Empezando con React.js

React.js es un flexible y basado en componentes Biblioteca de JavaScript para construyendo interfaces de usuario interactivas. Era Creado y abierto por Facebook y es utilizado por muchas compañías de tecnología líderes como Dropbox, AirBnB, PayPal y Netflix. React permite a los desarrolladores crear aplicaciones de datos pesados que se puede actualizar sin dolor por volver a renderizar solo los componentes necesarios.

Reaccionar es el Ver capa desde el MVC patrón de diseño de software, y principalmente se centra en la manipulación de DOM. Como en estos días todos hablan sobre React, en este post vamos a ver cómo puedes empezar con eso.

Instalar React

Puedes instalar React ya sea con el gestor de paquetes npm o por Añadiendo las bibliotecas necesarias manualmente. a su página HTML. Se recomienda utilizando React con Babel eso te permite utilizar la sintaxis ECMAScript6 y JSX en tu código React.

Si quieres instalar React manualmente, los documentos oficiales recomiendan usar este archivo HTML. Puedes descargar la página haciendo clic en el Archivo> Guardar página como ... Menú en su navegador. Los scripts que necesitará (React, React DOM, Babel) también se descargarán en el react-example_files / carpeta. Luego, agregue las siguientes etiquetas de script a la sección de su documento HTML:

En lugar de descargarlos, puede agregar los guiones React de CDN también.

También puedes usar el versiones minificadas de los archivos JavaScript anteriores:

Si prefieres instalar React con npm, la mejor manera es usar el Crear React App Repositorio Github creado por la Incubadora de Facebook: esta es también la solución que recomiendan los documentos de React. Aparte de React, también contiene Webpack, Babel, Autoprefixer, ESLint y otras herramientas para desarrolladores. Para comenzar, use los siguientes comandos de la CLI:

 npm install -g create-react-app create-react-app my-app cd my-app npm start

Cuando estés listo, puedes accede a tu nueva aplicación React sobre el localhost: 3000 URL:

Si quieres leer más en cómo instalar React, revisar la directriz de instalación de los documentos.

Reaccionar y jsx

Aunque no es obligatorio, puedes usar la sintaxis JSX en tus aplicaciones React. JSX significa JavaScript XML, y eso Transpila en JavaScript regular. La gran ventaja de JSX es que te permite incluir HTML en tus archivos JavaScript, por lo tanto, hace que la definición de elementos React sea más fácil.

Aquí están las cosas más importantes que debes saber sobre JSX:

Etiquetas que comenzar con minúsculas (caja de camello inferior) se representan como elementos normales de HTML.
Etiquetas que comenzar con mayúsculas (caja de camello superior) se representan como reactivar componentes.
Cualquier codigo escrito dentro de llaves … son interpretados como JavaScript literal.

Si quieres saber más sobre Cómo usar JSX con React Echa un vistazo a esta página de la documentación, y para la documentación JSX por defecto Puedes echar un vistazo a la wiki de JSX..

Crear elementos React

Reaccionar tiene un arquitectura basada en componentes en el que los desarrolladores crean componentes reutilizables Para resolver diferentes problemas. Un componente React está formado por algunos o muchos Reaccionar elementos que son Las unidades más pequeñas de las aplicaciones React..

Abajo, puedes ver Un ejemplo simple de un elemento React. que agrega un botón Haga clic en mí a una página HTML. En el HTML, añadimos un

contenedor con el "myDiv" ID que será Se rellena con el elemento React.. Creamos nuestro elemento React dentro de un

   Hacemos nuestro elemento Reaccionar con el ReactDOM.render () método cual toma dos parámetros requeridos, la Reaccionar elemento () y su contenedor (document.getElementById ('myDiv')). Puedes leer más en Cómo funcionan los elementos React en el “Elementos de representación” sección de los documentos.
 Crear componentes
 Reaccionar componentes son Unidades de UI reutilizables e independientes en el que puedes actualizar fácilmente los datos. Un componente puede estar hecho de uno o varios elementos React.. Accesorios son entradas arbitrarias Puede utilizar para pasar datos a un componente. Un componente React funciona de manera similar a las funciones de JavaScript: cada vez que se invoca, genera algún tipo de salida.
 Puedes usar cualquiera de sintaxis de la función clásica o lo nuevo Sintaxis de clase ES6 a definir un componente React. En este artículo, usaré este último, ya que Babel nos permite usar ECMAScript 6. Si está interesado en cómo crear un componente sin ES6, consulte la página Componentes y accesorios de la documentación..
 Abajo, puedes ver el componente React simple Vamos a crear como ejemplo. Es una notificación básica que el usuario ve después de iniciar sesión en un sitio. Hay tres datos que van a cambio de caso a caso: el nombre del usuario, el número de mensajes y el número de notificaciones, los pasaremos como accesorios.
  
Cada componente React es una clase de JavaScript que extiende el React.Component clase base. Nuestro componente se llamará Estadísticas Como proporciona al usuario una estadística básica. Primero nosotros crear el Estadísticas clase con el la clase Stats extiende React.Component … sintaxis, entonces nosotros renderizarlo a la pantalla llamando al ReactDOM.render () Método (ya hemos utilizado este último en la sección anterior).
  la clase Stats extiende React.Component render () return (  Hola, this.props.name, tienes this.props.notifications nuevas notificaciones y this.props.messages nuevos mensajes.. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 El primer argumento de la ReactDOM.render () método consiste en El nombre de nuestro componente React. (), y sus apoyos (nombre, notificaciones, y mensajes) con sus valores. Cuando declaramos los valores de los accesorios, las cadenas deben ser encerrado entre comillas (me gusta "John Doe") y valores numéricos entre llaves (me gusta 3).
 Tenga en cuenta que debido a JavaScript, nosotros usado nombre de la clase en lugar de clase para pasar un atributo de clase a una etiqueta HTML (className = "resumen").
 La página HTML correspondiente es la siguiente:
          
    
 En los documentos de React, hay muchos otros ejemplos interesantes en cómo construir y administrar los componentes React, y ¿Qué más saber sobre accesorios?.
 Otras lecturas
 Con React, Facebook introdujo un nuevo tipo de marco en el desarrollo de front-end que desafía el patrón de diseño de MV *. Si desea comprender mejor cómo funciona y qué puede y no puede lograr con esto, aquí hay algunos artículos interesantes que pueden ayudar:
 Publicación del blog de Facebook en por qué construyeron React.
 La brillante publicación de blog de Andrew Ray sobre lo bueno y lo malo de reaccionar.
 Codementor en como React y AngularJS se comparan.
 El artículo de reflexión de FreeCodeCamp sobre si MVC está muerto en la parte delantera.
 Artículo de HackerNoon sobre Cómo optimizar el rendimiento relacionado con React..