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.

1. Carpeta específica para el proyecto

2. Iniciar repo de git

    git init
   

3. Iniciar proyecto de Node.js

    npm init -y
   

4. Carpetas Base del proyecto

• public
  • index.html
• src
  • components
  • index.js

1. Instalación de librería

    npm install --save react react-dom
   

1. Instalación de librerías

    npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
   

2. Crear archivo .babelrc, el cual usualmente tiene esta base

    {
    "presets": [
   
        "@babel/preset-env",
        "@babel/preset-react"
    ],
        }
   

3. Agregar script a package.json

     "build": "webpack --mode production",
   

1. Instalación

    npm install webpack webpack-cli html-webpack-plugin html-loader  --save-dev
   

2. Añadir archivo webpack.config.js

1. Instalación

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

2. Agregar script en package.json

   "start": "webpack serve --mode development --env development"
   

1. Instalar SASS (para estilos de css) npm install --save-dev mini-css-extract-plugin css-loader node-sass sass-loader

2. 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',
    }),
   

3. Habilitar carpetas en proyecto para estilos.

• src
  • assets
    • styles

1. Instalar paquetes necesarios

    npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
   

2. Agregar archivo de configuración de eslint : .eslintrc

1. Agregar archivo .gitignore con componentes necesarios a ignorar

Sirve para simular una Api desde un archivo json.

1. Instalación json-server

    sudo npm install json-server -g
   

2. Agregar archivo json necesario para levantar la fake API

3. 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.

1. Instalación

    npm install --save prop-types