Criando do Zero

Configurações iniciais

Babel

Como o javascript evolui muito rapidamente, os navegadores não conseguem acompanhar o ritmo. Com isso, o babel possibilita um pré-processamento do código e o converte para uma forma em que até os navegadores mais antigos possam entendê-lo.

Resumo: Converter (transpilar) código do React para um código que o browser entenda

Instalação do React

$ yarn add react react-dom

Instalação do Babel e Webpack

$ yarn add @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli

Arquivo babel.config.js

Este arquivo deve estar na raiz do seu projeto.

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
  ],
}

Instalar o babel-loader como dependência:

$ yarn add babel-loader

Arquivo public/index.html

Importação do arquivo bundle.js

<script src="./bundle.js"></script>

WebPack Server

Webpack é um serviço que nos permite trabalhar com vários arquivos em uma mesma aplicação usando import/export. No modo desenvolvimento também permite live reload, ou seja atualização automatica das alterações.

Resumo: Pra cada tipo de arquivo (.js, .css, .png) irá converter o código de uma maneira diferente

Arquivo webpack.config.js

Este arquivo deve estar na raiz do seu projeto.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  }
};

Webpack Dev Server

Instalar o pacote $ yarn add webpack-dev-server -D

Arquivo webpack.config.js

Inserir o comando devServer:

devServer: {
  contentBase: path.resolve(__dirname, 'public'),
},

Arquivo package.json

Inserir o script para o build da aplicação:

{
  "scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --mode development"
  },
}

Compilando CSS

$ yarn add style-loader css-loader

Arquivo webpack.config.js

Criar uma nova rule:

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
  ]
}

Importação de imagens

$ yarn add file-loader -D

Arquivo webpack.config.js

Criar uma nova rule:

{
  test: /\.*\.(gif|png|jpe?g)$/i,
  use: {
    loader: 'file-loader'
  }
}

Uso de estados da aplicação

Necessita da dependência $ yarn add @babel/plugin-proposal-class-properties -D

Arquivo babel.config.js

Adicionar os plugins:

plugins: [
  '@babel/plugin-proposal-class-properties'
]

Arquivo src/index.js

Geralmente possui a arquitetura abaixo.

import React from 'react';
import { render } from 'react-dom'

import App from './App';

render(<App />, document.getElementById('app'));

Arquivo src/App.js

É o componente que renderizará a aplicação. Exemplo:

import React from 'react';
import './App.css';

import TechList from './components/TechList';

function App() {
  return <TechList />
}

export default App;