Establecer un entorno React, Parte 3

Observe cómo en el componente podemos crear tantos elementos como queramos añadiendo más llamadas a React.createElement (). Además, los accesorios se pasan a componentes secundarios a través de un accesorios Objeto JavaScript, al que luego se puede acceder dentro de los componentes a través del parámetro de función accesorios.

Abierto index.html en un navegador para ver la salida React.

No voy a entrar en más detalles aquí sobre React.createElement (), y otros temas que no son JSX, ya que la mayoría de los usuarios de React eligen escribir sus componentes utilizando JSX. Utilizaremos JSX para nuestros componentes React durante el resto de esta serie de tutoriales..

Claramente, la falta de herramientas como Babel restringe lo fácil que es escribir el código React completamente desde cero. También podemos aprovechar otras muchas herramientas, como un agrupador que crea un único archivo JavaScript de todas las bibliotecas React requeridas y nuestro código de aplicación. Descubriremos un mejor enfoque en la siguiente sección que es tan fácil de configurar.

Crear React App

Para resolver el problema de las complejas configuraciones manuales de React, Facebook presentó create-react-app, que es una forma fácil de usar para comenzar a desarrollar con React. Le proporciona una configuración de compilación completa, pero no requiere ninguna configuración manual..

Sigamos adelante e instalemos create-react-app. Escriba el siguiente código en una ventana de línea de comandos.

npm install -g create-react-app

Esto instalará la aplicación create-react-global para que pueda acceder desde cualquier directorio..

Necesitará npm instalado para ejecutar este comando, y Node.js para ejecutar create-react-app. Como npm viene incluido con Node.js, simplemente descargue e instale la última versión de Node.js desde el sitio web oficial.

Ahora crearemos una nueva aplicación React llamada mis primeros componentes. Tenga en cuenta que create-react-app crea automáticamente la carpeta que contiene su aplicación, por lo que solo debe asegurarse de estar en el directorio en el que desea que se cree su carpeta de aplicaciones..

Ejecute estos comandos para crear su aplicación y ejecute el script de inicio.

crear-reaccionar-aplicación my-first-components cd my-first-components / npm start

Puede llevar un minuto o dos para que la aplicación-crear-reaccionar complete la instalación de todo. Una vez hecho esto, ingrese el npm start Se abrirá un comando y se abrirá una nueva ventana del navegador y, después de unos segundos, se mostrará su aplicación React..

Lo bueno de crear-reaccionar-aplicación es que incluye un mini servidor web y también observa los archivos en su aplicación para detectar cambios. Cada vez que se realiza un cambio, su aplicación se reconstruye y la ventana del navegador se vuelve a cargar automáticamente para mostrar su aplicación actualizada..

Durante el proceso de configuración automatizada, create-react-app genera varios archivos, así como las siguientes tres carpetas:

• nodo_módulos
• público
• src

Para tener una idea de cómo creamos componentes y los conectamos juntos dentro de una aplicación generada por crear-reaccionar, crearemos los mismos componentes con los que hemos estado trabajando hasta ahora..

La salida por defecto de la aplicación sugiere que editemos. App.js como punto de partida, abra este archivo y elimine las llamadas de importación del logotipo y los archivos CSS, ya que no los necesitaremos. También podemos simplificar el componente, y añadir en nuestros dos componentes secundarios de antes.

Tu App.js El archivo ahora debería verse así:

importar React, Componente desde 'reaccionar'; la aplicación de clase extiende el Componente render () return ( 
 
Mis primeros componentes reaccionan!
   
 ) la clase MyFirstComponent extiende el Componente render () return ( 
this.props.number: Hola de React!
 ) la clase MySecondComponent extiende el Componente render () return ( 
this.props.number: My Second React Component.
 ) exportar la aplicación por defecto;

Guarde los cambios y la aplicación crear-reaccionar actualizará automáticamente su aplicación en el navegador. Esto da como resultado la misma salida que antes. (Tenga en cuenta que esta vez se carga en el navegador a través del servidor web local).

Sin embargo, hagamos que esto sea más modular para estar en línea con las mejores prácticas modernas para crear aplicaciones React. Crea dos nuevos archivos dentro de la src carpeta llamada MyFirstComponent.js y MySecondComponent.js.

Dentro MyFirstComponent.js, añade el siguiente código:

importar React, Componente desde 'reaccionar'; la clase MyFirstComponent extiende el Componente render () return ( 
this.props.number: Hola de React!
 ) exportar por defecto MyFirstComponent;

Y dentro MySecondComponent.js, agregar código similar:

importar React, Componente desde 'reaccionar'; la clase MySecondComponent extiende el Componente render () return ( 
this.props.number: My Second React Component.
 ) exportar por defecto MySecondComponent;

Por último, necesitamos actualizar App.js para importar ambos componentes secundarios, ya que ahora están ubicados en archivos separados:

importar React, Componente desde 'reaccionar'; importar MyFirstComponent desde './MyFirstComponent'; importar MySecondComponent desde './MySecondComponent'; la aplicación de clase extiende el Componente render () return ( 
 
Mis primeros componentes reaccionan!
   
 ) exportar la aplicación por defecto;

Este enfoque para estructurar su aplicación React es mucho más modular y portátil. También permite una depuración más fácil ya que cada componente es autónomo dentro de su propio módulo.

Conclusión

En este tutorial, hemos cubierto dos métodos para configurar React localmente: el enfoque manual y el uso de la herramienta crear-reaccionar-aplicación de Facebook..

Creando una aplicación React manualmente desde cero e insertando las dependencias de script directamente dentro de index.html El archivo es bastante ineficiente. A medida que su aplicación se amplíe, y a medida que se liberen diferentes versiones de sus scripts, la actualización manual de los scripts será rápidamente inmanejable. Además de eso, no podemos usar las características de ES6, o escribir nuestros componentes en JSX!

Usar la aplicación create-react-app, por otro lado, es un proceso muy suave. Se instala e inicializa con un par de comandos. Una vez que se ejecuta, create-react-app reconstruye tu aplicación y actualiza la ventana del navegador cada vez que editas cualquier archivo de proyecto. Este es un flujo de trabajo realmente agradable cuando se realizan muchos cambios menores, ya que ayuda a acelerar el desarrollo de la aplicación..

En el siguiente tutorial, crearemos una aplicación React desde cero que utiliza Webpack y Babel para agrupar y procesar nuestra aplicación en un solo archivo JavaScript. A diferencia de la aplicación create-react-app, donde todo se hace por usted, configuraremos manualmente todos los archivos de configuración y discutiremos por qué elegiría este enfoque..