LaurenceZanotti/notas.md

## notas.md

      
    Raw
  

              notas.md
            
          
    Recursos para consulta

valentinchelle/nodejs-rest-api-boilerplate

https://github.com/valentinchelle/nodejs-rest-api-boilerplate
Creating a React App… From Scratch

https://medium.com/@JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658
lau
r4Buoq0Z1cyVHTFz

  
## react-com-vite.md

      
    Raw
  

              react-com-vite.md
            
          
    React com Vite

# Instalar o node e git

curl --insecure https://nodejs.org/dist/v16.15.1/node-v16.15.1-x64.msi -o node.msi
winget install --id Git.Git -e --source winget

Download do Node

Download do Git
Instalar o Yarn

npm i --global yarn

React

yarn init -y
git init
yarn create vite nome_do_app --template react
yarn
yarn vite


## react-sem-toolchain.md

      
    Raw
  

              react-sem-toolchain.md
            
          
    React sem toolchain

Baseado no guia Creating a React App… From Scratch. Esse guia é recomendado pelos docs do React.
Instalar node e git

Download do Node

Download do Git
ou pelo CLI:
curl --insecure https://nodejs.org/dist/v16.15.1/node-v16.15.1-x64.msi -o node.msi
winget install --id Git.Git -e --source winget

Estrutura do diretório

mkdir src
mkdir public
yarn init -y
git init

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack with Yarn</title>
</head>
<body>
    <div id="root"></div>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <script src="../dist/bundle.js"></script>
</body>
</html>

Babel

yarn @babel/core @babel/cli @babel/preset-env @babel/preset-react

.babelrc

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

Webpack

yarn add webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: "./src/index.js",
    mode: "development",
    module: {
        rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel-loader",
            options: { presets: ["@babel/env"] }
        },
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }
        ]
    },
    resolve: { extensions: ["*", ".js", ".jsx"] },
    output: {
        path: path.resolve(__dirname, "dist/"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: path.join(__dirname, "public/"),
        port: 3000,
        publicPath: "http://localhost:3000/dist/",
        hotOnly: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

Adicionando scripts no package.json

  "scripts": {
    "dev": "webpack",
    "watch": "webpack --watch",
    "build": "webpack build"
  }

Rodando

Sem hot module

Usar plugin Live Server ou qualquer outro com hot reload se não tiver configurado o hotmodule
# Habilitar Live Server do VS Code no public/index.html

yarn run watch

Com hot module

yarn add react-hot-reloader html-webpack-plugin
No App.jsx:
  import React, { Component} from "react";
+ import {hot} from "react-hot-loader";
  import "./App.css";

  class App extends Component{
    render(){
      return(
        <div className="App">
          <h1> Hello, World! </h1>
        </div>
      );
    }
  }

+ export default hot(module)(App);