Ejercicio realizado durante el curso Clases del Curso Práctico de React JS disponible en plataforma Platzi
El objetivo del ejercicio es tomar esta página base y aplicar arquitectura de componentes para construirla usando React.
-
Carpeta específica para el proyecto
-
Iniciar repo de git
git init
-
Iniciar proyecto de Node.js
npm init -y
-
Carpetas Base del proyecto
- public
- index.html
- src
- components
- index.js
-
Instalación de librería
npm install --save react react-dom
-
Instalación de librerías
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
-
Crear archivo .babelrc, el cual usualmente tiene esta base
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], }
-
Agregar script a package.json
"build": "webpack --mode production",
-
Instalación
npm install webpack webpack-cli html-webpack-plugin html-loader --save-dev
-
Añadir archivo webpack.config.js
-
Instalación
npm install --save-dev webpack-dev-server
-
Agregar script en package.json
"start": "webpack serve --mode development --env development"
-
Instalar SASS (para estilos de css) npm install --save-dev mini-css-extract-plugin css-loader node-sass sass-loader
-
Agregar en webpack para que compile archivos CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //regla { test: /\.(s*)css$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader', ], }, //pluging new MiniCssExtractPlugin({ filename: 'assets/[name].css', }),
-
Habilitar carpetas en proyecto para estilos.
- src
- assets
- styles
- assets
-
Instalar paquetes necesarios
npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
-
Agregar archivo de configuración de eslint : .eslintrc
- Agregar archivo .gitignore con componentes necesarios a ignorar
Sirve para simular una Api desde un archivo json.
-
Instalación json-server
sudo npm install json-server -g
-
Agregar archivo json necesario para levantar la fake API
-
Ejecución en terminal
json-server archivoParaTuAPI.json
Los PropTypes son una propiedad de nuestros componentes que nos permiten especificar qué tipo de elementos son nuestras props: arrays, strings, números, etc.
-
Instalación
npm install --save prop-types