Buenas! Hoy vamos a empezar una serie que es una introducción a React, que es una librería de JavaScript, el requisito mínimo para ir siguiéndonos es que bueno, sepan algo de js! Tal vez demos la introducción a js, como una introducción a esta introducción, pero más adelante (?
Esta librería esta centrada en simplificar el desarrollo de interfases visuales, es frontend! Desarrollada por facebook y presentada en el 2013, así que podemos dar fe de que el desempeño ha sido puesto a prueba. La idea central es poder saber en qué estadoestá y porqué de una interfase en todo momento. Divide su colección en componentes.
Se puede usar para aplicaciones web, como para una página web también.
Si ya quisieron probar angular o vue, verán que es mucho más simple, es muy fácil de agregar a un proyecto ya empezado, aunque lleve un poco más de tiempo acostumbrarse.
Bueno, simple, pero igual como cualquier framework hay cosas que aprender.
Vamos a empezar por los siguientes cuatro conceptos:
- JSX
- Components / componentes
- Props /propiedades
- State / estado
JSX
const element = <h1>Hello, world!</h1>;
Componentes
React components are JavaScript functions.
Son funciones de JavaScript,como podemos ver, vamos a crear un componente en el siguiente ejemplo:
function Bienvenida() {
return <h1>Hola mundo!</h1>;
}
ReactDOM.render(<Hola/>, document.getElementById('root'));
Son una pieza en particular, singular de la interfase, a los que les podemos agregar propiedades!
Propiedades
Ahora vamos a seguir con el ejemplo anterior pero agregandole una propiedad: props.
function Bienvenida(propiedades) {
return <h1>hola {propiedades.nombre}!</h1>;
}
ReactDOM.render(<Bienvenida nombre = "John Doe"/>, document.getElementById('root'));
Estados
El «state» es lo que pueden cambiar dentro de un componente de react después de que el componente ha sido construido. Se suele utilizar para comprar propiedades de este componente. A diferencia de las props, el state no puede ser modificado una vez creado.
Basta por hoy
Sí, como dijimos vamos a ir de a poco, porque le temen XD
Fuentes:
https://reactjs.org/docs/introducing-jsx.html
https://www.w3schools.com/whatis/whatis_react.asp
http://www.js-craft.io/blog/18-react-state-and-stateless-components/