Introducción a React

Introducción a React

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:

  1. JSX
  2. Components / componentes
  3. Props /propiedades
  4. State / estado

JSX

const element = <h1>Hello, world!</h1>; Con jsx vamos a estar interactuando con objetos de js, no se trata de el tipo de variable string. Lo que ven que parece html, no lo es! :O si no más bien que es la sintaxis para definir componentes.

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/

Sin comentarios

Comenta!