Curso React Crash para principiantes, Parte 1

En esta serie de tutoriales, nos sumergiremos en el uso de React a medida que creamos una aplicación totalmente funcional para mostrar una galería de películas..

Aprender a crear una aplicación desde cero es una gran oportunidad para practicar el uso de todas las funciones clave de React al mismo tiempo que mejora sus habilidades de desarrollo. Se siguen todos los métodos recomendados y las mejores prácticas, lo cual es esencial para crear aplicaciones React modernas..

Estaremos configurando una nueva aplicación React usando el crear-reaccionar-aplicación herramienta desarrollada por Facebook, además de cubrir en detalle los siguientes temas de React:

• Componentes 
• JSX
• Accesorios
• Estado
• Estructurando tu aplicación correctamente
• Usando las características de ES6 para el desarrollo de aplicaciones modernas

Lo que estaremos construyendo

Para que el aprendizaje sobre el desarrollo de React sea más divertido, estaremos construyendo una aplicación totalmente funcional, en lugar de presentar fragmentos de código genéricos cuando se cubren nuevos aspectos de React.

Juntos construiremos 'Movie Mojo', una aplicación para mostrar una galería de películas para sentirse bien. Cuando se complete, la aplicación cargará algunas películas al cargar la página, y luego se cargará más cuando se haga clic en un botón. Finalmente, podrá ingresar sus propios títulos de películas a través de un formulario personalizado que, una vez enviado, insertará dinámicamente una nueva película en la galería..

Prerrequisitos

Este es un tutorial de nivel intermedio, por lo que se beneficiará enormemente si tiene algún conocimiento previo de los siguientes temas:

• Características de ES6 como funciones de flecha, clases y módulos..
• Sepa qué componentes React, props y estado son.
• Alguna experiencia en el uso de Node.js y NPM.
• Al menos un nivel básico de dominio de JavaScript.

La mayoría de estos están cubiertos en detalle a medida que avanzamos, pero recomiendo que se cepille las áreas particulares según sea necesario..

Vamos a configurar

Estaremos usando el crear-reaccionar-aplicación Herramienta para configurar nuestra aplicación React. Es extremadamente fácil de usar y nos permitirá concentrarnos en codificar nuestra aplicación de inmediato, sin tener que navegar por un proceso de configuración complicado..

Usar crear-reaccionar-aplicación, necesitarás tener Node.js y npm instalado. Puede verificar si ambos están disponibles escribiendo lo siguiente en una ventana de línea de comandos:

nodo -v

Y entonces:

npm -v

Si ambos están instalados, verá el número de versión actual de cada uno..

MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $

Si necesita instalar o actualizar Node.js y npm entonces la forma más sencilla es descargar Node.js desde la página web oficial. Node.js se incluye con npm por lo que no necesita realizar una instalación separada.

Instalar crear-reaccionar-aplicación globalmente, escriba esto en cualquier ventana de línea de comandos:

npm install -g create-react-app

Ahora podemos seguir adelante y usar crear-reaccionar-aplicación para andamiar nuestra nueva aplicación React. También creará una carpeta de nivel superior para contener nuestros archivos de proyecto. Abra una ventana de línea de comandos y navegue hasta la carpeta en la que desea ubicar su aplicación (por ejemplo, / Escritorio), y escriba lo siguiente:

crear-reaccionar-aplicación movie-mojo

Tardará un minuto más o menos en completarse, pero cuando lo haga, debería ver un mensaje similar a este:

¡Éxito! Creado movie-mojo en / Users / davidgwyer / Desktop / movie-mojo Dentro de ese directorio, puede ejecutar varios comandos: inicio de hilo Inicia el servidor de desarrollo. yarn build Combina la aplicación en archivos estáticos para producción. prueba de hilo Inicia el corredor de prueba. yarn eject Elimina esta herramienta y copia las dependencias de compilación, los archivos de configuración y los scripts en el directorio de la aplicación. ¡Si haces esto, no puedes volver! Le sugerimos que comience escribiendo: cd movie-mojo yarn start Happy hacking!

Un nuevo película-mojo La carpeta se habrá creado con la siguiente estructura de archivos:

los src La carpeta es donde editará los archivos de su proyecto, y cuando llegue a implementar su aplicación, se agruparán y agregarán a la público Carpeta lista para su distribución..

Para ver la aplicación de ejemplo en su navegador, aprovechemos el mini servidor web incluido con crear-reaccionar-aplicación. Necesitamos estar dentro de la carpeta del proyecto que acabamos de crear, por lo que en la ventana de línea de comandos, escriba:

cd movie-mojo

Y entonces:

npm start

Este simple comando hace tres cosas principales. Va a:

• Compila nuestra aplicación React de muestra.
• Abre una nueva ventana del navegador y muestra nuestra aplicación..
• Monitorear cambios a archivos de proyecto.

Una vez compilado, verás el siguiente resultado:

Compilado con éxito! Ahora puedes ver movie-mojo en el navegador. Local: http: // localhost: 3000 / En su red: http://192.168.0.15:3000/ Tenga en cuenta que la versión de desarrollo no está optimizada. Para crear una construcción de producción, use la construcción de hilados..

Y aquí está la aplicación de ejemplo que se ejecuta en el navegador..

Cuando se realice algún cambio en su aplicación, se volverá a compilar y recargar automáticamente en la ventana del navegador. Esta es una característica muy buena de crear-reaccionar-aplicación y te ahorrará mucho tiempo durante el desarrollo!

También le permite concentrarse en codificar su aplicación sin distraerse al tener que volver a compilar manualmente y actualizar continuamente la ventana del navegador para ver los últimos cambios..

Quizás el mejor flujo de trabajo, si tiene el espacio de pantalla disponible, es tener el navegador y el editor de texto abiertos uno al lado del otro. De esa manera, cada vez que realice un cambio en uno de los archivos de su proyecto, verá los cambios que se muestran casi al instante en la ventana del navegador..

Probemos a hacer un cambio en nuestro proyecto de muestra..

Dentro de src carpeta abierta App.js en su editor de texto. Intenta cambiar la línea:

Para empezar, edita src / App.js y guardar para recargar.

a:

Bienvenido a la aplicación React 'Movie Mojo'!

Tan pronto como guarde los cambios, la aplicación React se compilará automáticamente y la ventana del navegador se actualizará. Si ha reorganizado su espacio de trabajo como se sugirió anteriormente, entonces verá cuán instantáneo es esto..

Estructurando nuestra aplicación

Vamos a configurar la estructura de nuestra aplicación que utilizaremos durante el resto de este tutorial..

los crear-reaccionar-aplicación La herramienta hace un gran trabajo de andamiaje nuestra aplicación, pero aún tenemos la flexibilidad para modificarla para que se adapte a nuestras necesidades..

En primer lugar, eliminemos los archivos que ya no necesitamos de nuestros src carpeta. No necesitamos trabajadores de servicio en nuestra aplicación, así que elimine el registerServiceWorker.js expediente. Esto se hace referencia en index.js, así que ábralo en un editor y elimine todas las referencias para que se vea así:

importar reaccionar desde 'reaccionar'; importar ReactDOM desde 'react-dom'; importar './index.css'; Importar aplicación desde './App'; ReactDOM.render (, document.getElementById ('root'));

A continuación, elimine el logo.svg archivar y editar App.js para eliminar las referencias a ella. Tu archivo actualizado ahora debería verse así:

importar React, Componente desde 'reaccionar'; importar './App.css'; la aplicación de clase extiende el Componente render () return ( 
 
 
Bienvenido a React
 
 
 Bienvenido a la aplicación React 'Movie Mojo'! 
 
 );  exportar la aplicación por defecto;

También podemos deshacernos de la App.test.js expediente. Esto nos dejará con los siguientes archivos en src:

• index.js
• index.css
• App.js
• App.css

Vamos a crear múltiples componentes, así que vamos a crear una carpeta dedicada para almacenarlos todos. Dentro src, crear un nuevo componentes carpeta y añadir el App.js archivarlo Nuestra aplicación no se compilará correctamente hasta que actualicemos un par de referencias.

En index.js, actualizar la ruta para importar el  componente:

Importe la aplicación desde './components/App';

Y en App.js, actualizar el camino a App.css:

importar '… /App.css';

Guarda tus cambios y asegúrate de que tu aplicación se compile correctamente.

Ahora estamos casi listos para comenzar a codificar nuestra aplicación 'Movie Mojo'. En primer lugar, sin embargo, vamos a familiarizarnos con cómo se renderiza nuestra aplicación.

Echa un vistazo a index.js. Este es el archivo que realmente procesa nuestra aplicación para el DOM. Lo hace a través de la ReactDom.render () Método, que toma en dos argumentos. El primer argumento es el componente que queremos hacer. En nuestro caso, esta es la  componente, que es el componente de nivel superior (y actualmente solo) en nuestra aplicación.

El segundo argumento especifica el elemento de destino DOM al que queremos montar nuestra aplicación React. Por defecto, 'create-react-app' crea este elemento automáticamente. Si echas un vistazo al interior del público carpeta, hay una index.html que contiene un