<Nav> Hacer un proyecto en React desde cero </Nav> Pseudo Guía usando create-react-app. Contexto Hace un tiempo quería armar un pdf con todos los pasos a la hora de crear un proyecto de react desde cero, ya que siempre tenía que mirar mis antiguos proyectos para ver que tenia que instalar y como configurar el proyecto por encima del boilerplate de create-react-app. Esta guia me ayudo bastante a mi y a algunos compañeros con quienes la compartí, así que quise hacer una versión actualizada para que cualquiera que esté perdido a la hora de empezar un nuevo proyecto pueda lograrlo sin problema siguiendo esta guia! Aclaración: Las librerías, controladores de versionado, tecnologías y hasta estructuración de esta guía están basadas en lo que he aprendido en el bootcamp de #SoyHenry, así que probablemente los alumnos de Henry vayan a encontrarle mayor utilidad por estar familiarizados. Paso 1 - Generamos los archivos iniciales Vamos a utilizar el comando npx create-react-app my-app en nuestra terminal, este es un script que va a generar una seria de carpetas y archivos donde tendremos contenida nuestra primera versión del proyecto. Paso 1 - Generamos los archivos iniciales Vamos a utilizar el comando npx create-react-app my-app en nuestra terminal, este es un script que va a generar una seria de carpetas y archivos donde tendremos contenida nuestra primera versión del proyecto. Reemplazar el my-app por el nombre de tu aplicación. Paso 2 - Instalar las dependencias Como aclaré al principio, voy a usar principalmente las librerías y tecnologías que vemos en el bootcamp de Henry, así que quizás te pueda parecer que falta alguna o incluso que hay alguna que está de más. Que vamos a usar? Lo principal en nuestra app va a ser React y Redux, la primera ya viene instalada y a Redux la vamos a instalar a continuación junto a varias librerías relacionadas. Paso 2 - Instalar las dependencias Usaremos el comando de npm install ó npm i , para abreviar, y así instalar los paquetes necesarios. El comando completo para instalar todo de una vez sería el siguiente: npm i axios react-router-dom@5.3.0 redux react-redux redux-thunk redux-devtools-extension La instalación tardará un poco pero cuando termine ya podremos visualizar en nuestro archivo package.json todas las dependencias para ver que están instaladas correctamente. Por qué react-router-dom@5.3.0? Recientemente salió la versión 6.0.0 de RRD, la cual trajo cambios en el Switch, estos cambios no estaban vigentes cuando se creó el plan de estudios de Henry así que vamos a instalar la versión 5.3.0. Aun así los cambios de la 6.0.0 son mínimos y podés verlos acá. Paso 2 - Instalar las dependencias -Axios {permite hacer llamados asíncronos a APIs o rutas de nuestro Backend} -React-router-dom {nos da la capacidad de implementar ruteo dinámico en nuestra app} -Redux {mediante un store permite el manejo de estados de manera global para usarlos desde cualquier componente} -React-redux {añade hooks para el uso conjunto de React y Redux} -Redux-thunk {un middleware para poder hacer acciones asíncronas en nuestros actions de Redux} -Redux-devtools-extension {necesario para poder utilizar la extensión del navegador “Redux DevTools”, útil para ver los cambios en nuestros estados y que actions se ejecutan} Eso es todo lo que tenemos que instalar para empezar, obviamente si no vas a usar Redux no lo instales y tampoco sus librerías relacionadas. También recomiendo el uso de frameworks de diseño como Style-components, Material-UI, o librerías como Redux-persist. Paso 3 - Armar la estructura del ruteo Cuando ejecutemos npm start se va a mostrar la página por defecto que viene hecha con el script de create-react-app , esta página está alojada en el archivo app.js, esto lo vamos a cambiar ya que en este archivo es donde vamos a hacer el ruteo de la aplicación. Paso 3 - Armar la estructura del ruteo Vamos a borrar la estructura HTML dejando solamente el <div> principal, luego vamos a importar Switch, BrowserRouter y Route desde react-router-dom. Para empezar con el ruteo debemos tener un <Switch> rodeado por el <div> principal y a su vez este debe ser envuelto por el <BrowserRouter>. Paso 3 - Armar la estructura del ruteo Lo único que nos faltaria es agregar una ruta, para eso primero debemos crear un componente ya sea funcional o de clase, importarlo y dentro del <Switch> agregar un <Route> en el que vamos a aclarar en qué ruta queremos renderizar tal componente. Pueden seguir el ejemplo de la derecha para guiarse, para el resto de rutas es repetir la misma lógica. Paso 4 - Configurar Redux Para poder usar Redux debemos configurar varios archivos, estos son el reducer.js, el store.js y el index.js. Este último no es exclusivo de Redux ya que siempre vamos a tener un index.js en nuestro proyecto, pero hay que hacer un par de cambios en él así que lo agrego a la lista. Vamos a separar la configuración de Redux en 3 sub pasos. ● Paso 4.1 - Crear el Reducer ● Paso 4.2 - Crear y configurar el Store ● Paso 4.3 - Hacer cambios en el index.js Paso 4.1 - Crear el Reducer El Reducer es una especie de guardia del Store de Redux. Este guardia tiene guardados todos los estados de nuestro proyecto (si es que usamos Redux) y va a hacer distintos cambios en estos dependiendo de la orden que le demos. Flow de Redux: Desde un componente se llama a un action, este action es detectado por el reducer el cual hace ciertos cambios en el estado dependiendo del action llamado, los cambios se cargan al store y los componentes pueden acceder a estos estados modificados. Paso 4.1 - Crear el Reducer En este archivo vamos a declarar el estado inicial de nuestro store y armar nuestro Reducer. Este va a ser una función que por convención se le suele llamar rootReducer. Esta función va a recibir dos parámetros, el state siendo el estado inicial, y la información devuelta por el action ejecutado. En este ejemplo se llamó a un action que trae información de un nuevo personaje la cual está guardada en el payload del action. Aquí agregamos ese nuevo personaje a nuestro array de personajes para actualizar el estado. Paso 4.2 - Crear y configurar el Store Para el store vamos a importar createStore y applyMiddleware desde redux, el rootReducer que acabamos de crear, y thunk desde redux-thunk. Usaremos createStore que es la función que nos proporciona redux para crear nuestro nuevo store, a esta le pasaremos nuestro reducer como primer parámetro y la función composeWithDevTools(applyMiddleware(thunk))como segundo parametro. ComposeWithDevTools simplemente nos va a permitir usar la extensión de Redux Devtools de nuestro navegador, a este le pasaremos applyMiddleware , que permite agregar funcionalidades o facilidades a la hora de usar Redux mediante middlewares, que en nuestro caso es el thunk, que nos ayuda a manejar acciones asíncronas desde las actions. Paso 4.3 - Hacer cambios en el index.js En el archivo index.js se va a indicar que componentes renderizar, en nuestro caso el <App />, el cual tiene dentro hecho nuestro ruteo así que irá cambiando de forma dinámica dependiendo de la ruta y así irá renderizando distintos componentes. Paso 4.3 - Hacer cambios en el index.js Para empezar tenemos que importar el Provider desde react-redux y nuestro store. Vamos a rodear como en el ejemplo a nuestra aplicación con el Provider pasandole nuestro store. Esto va a hacer que podamos acceder al store desde cualquier componente de nuestra app. <Footer> Hacer un proyecto en React desde cero </Footer> Terminamos!