Configurando un

proyecto en React
Desde CERO
 Babel

React

Live
WebPack
Server
Repositorio en GitHub
1. Acceder a nuestra cuenta de github y crear un nuevo repositorio
2. Colocar una descripción adecuada al proyecto a manipular.
3. Habilitar GITIGNORE seleccionando NODE.
4. Habilitar LICENCIA tipo MIT LICENCE
5. Clonar el repositorio para trabajar de manera local en nuestro
equipo.
6. Acceder por medio de la consola a la ruta donde se clonó el
proyecto y crear un package.json con el comando npm init -y
Configuración de carpetas
1. Instalar en nuestro proyecto las dependencias de react y
react-dom: npm install react react-dom --save
2. Crear las carpetas src y public
● src
● components
○ About.jsx
● containers
● index.js
● public
○ index.html
Configuración de Babel - Transpilador
1. Instalar las dependencias de babel:

npm install @babel/core @babel/preset-react

@babel/preset-env babel-loader --save-dev

2. Instalar las dependencias correspondientes al plugin:

npm install babel-plugin-transform-class-properties --save-dev

3. Crear el archivo .babelrc y configurar las dependencias

instaladas.
Configuración de Webpack
1. Instalar las dependencias de Webpack:

npm install webpack webpack-cli html-webpack-plugin

html-loader --save-dev

2. Crear el archivo webpack.config.js y realizar las configuraciones

pertinentes.
3. CUIDADO!! prestar mucha atención a la configuración respecto
a comas, puntos, formato de objetos literales y arreglos.
Configuración de Webpack Server
1. Instalar las dependencias de Webpack server:

npm install webpack-dev-server --save-dev

2. Scripts:
a. “build” : “webpack --mode production”
b. “start” : “webpack-dev-server --open --mode development”
3. npm run build → Crea nuestra carpeta dist (recuerda ignorar en
.gitignore) y configura nuestro proyecto en modo de producción
4. npm run start → Para pruebas, poder tener nuestro Live-Reload
y monitorear cambios en tiempo real.
Haciendo uso de
create-react-app
Creando una app React!
1. Instalar la configuración de un proyecto de react:

npm init react-app [nombre-de-mi-app]

2. Ubicarse en el proyecto creado

cd [nombre-de-mi-app]

3. npm run start