Așadar, de ceva timp folosiți create-react-app aka CRA. Este minunat și puteți ajunge direct la codificare. Dar când trebuie să ieșiți din create-react-app și să începeți să vă configurați propria aplicație React? Va exista un moment în care va trebui să renunțăm la verificarea siguranței și să începem să ne aventurăm singuri.

Acest ghid va acoperi cea mai simplă configurație React pe care am folosit-o personal pentru aproape toate proiectele mele React. Până la sfârșitul acestui tutorial vom avea propriul nostru cazan personal și vom învăța câteva configurații din acesta.

Cuprins

  • De ce să creați propria configurație?
  • Configurarea pachetului web 4
  • Configurarea Babel 7
  • Adăugând Prettier
  • Adăugarea hărții sursă pentru jurnale de erori mai bune
  • Configurarea ESLint
  • Am găsit erori! Ce fac?
  • Adăugarea procesorului CSS LESS
  • Implementarea aplicației React pe Netlify
  • Concluzie

De ce să creați propria configurație?

Există anumite motive care fac ca crearea propriei configurații React să aibă sens. Probabil că sunteți bun cu React și doriți să aflați cum să folosiți singuri instrumente precum webpack și Babel. Aceste instrumente de construcție sunt puternice și, dacă aveți ceva timp suplimentar, este întotdeauna bine să aflați despre ele.

Dezvoltatorii sunt oameni curioși în mod natural, așa că, dacă simți că ai vrea să știi cum funcționează lucrurile și ce parte face ce, atunci lasă-mă să te ajut cu asta.

Mai mult, ascunderea configurației React prin create-react-app este destinată dezvoltatorilor care încep să învețe React, așa cum configurația nu ar trebui să stea în calea inițierii. Dar când lucrurile devin serioase, desigur, aveți nevoie de mai multe instrumente pentru a vă integra în proiect. Gandeste-te:

  • Adăugarea încărcătoarelor webpack pentru mai puțin, sass
  • Efectuarea redării pe partea de server
  • Folosind noi versiuni ES
  • Adăugarea MobX și Redux
  • Realizarea propriei configurații doar pentru dragul învățării

Dacă te uiți în jurul Internetului, există câteva hacks pentru a evita limitele CRA, cum ar fi creați-reacționați-aplicați recablat. Dar, într-adevăr, de ce nu învățați singuri configurația React? Te voi ajuta să ajungi acolo. Pas cu pas.

Acum, că ești convins să înveți o anumită configurație, să începem prin inițializarea unui proiect React de la zero.

Deschideți linia de comandă sau Git bash și creați un nou director

mkdir react-config-tutorial && cd react-config-tutorial

Inițializați proiectul NPM executând:

npm init -y

Acum instalați react

npm install react react-dom

De asemenea, puteți vizualiza cod sursa pe GitHub în timp ce citiți acest tutorial pentru explicații despre setări.

Configurarea pachetului web 4

Prima noastră oprire va fi webpack-ul. Este un instrument foarte popular și puternic pentru a configura nu numai React, ci aproape toate proiectele front-end. Funcția de bază a webpack-ului este că este nevoie de o grămadă de fișiere JavaScript pe care le scriem în proiectul nostru și le transformă într-un singur fișier micșorat, astfel încât să fie repede difuzat. Începând de la webpack 4, nu suntem obligați să scriem deloc un fișier de configurare pentru a-l folosi, dar în acest tutorial vom scrie unul pentru a-l putea înțelege mai bine.

În primul rând, să facem o instalare

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

Aceasta va instala:

  • modul webpack – care includ toate funcționalitățile webpack de bază
  • webpack-dev-server – acest server de dezvoltare repornește automat webpack-ul când fișierul nostru este schimbat
  • webpack-cli – activați rularea webpack din linia de comandă

Să încercăm să rulăm webpack adăugând următorul script la package.json

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

Acum creați un index.html fișier în proiectul dvs. rădăcină cu următorul conținut:

<!DOCTYPE html>
<html>
 <head>
 <title>My React Configuration Setup</title>
 </head>
 <body>
 <div id="root"></div>
 <script src="https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/./dist/bundle.js"></script>
 </body>
</html>

Creați un nou director numit src iar în interiorul ei, creați un nou index.js fişier

mkdir src && cd src && touch index.js

Apoi scrieți o componentă React în fișier:

import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}
ReactDOM.render(<Welcome />, document.getElementById("root"));

Rulați pachetul web utilizând npm run start … Și o eroare va fi declanșată.

You may need an appropriate loader to handle this file type

Configurarea Babel 7

Componenta React pe care am scris-o mai sus a folosit class sintaxă, care este o caracteristică a ES6. Webpack are nevoie de Babel pentru a procesa ES6 în sintaxe ES5 pentru ca această clasă să funcționeze.

Să instalăm Babel în proiectul nostru

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

De ce avem nevoie de aceste pachete?

  • @ babel / core este principala dependență care include scriptul de transformare babel.
  • @ babel / preset-env este presetarea Babel implicită utilizată pentru a transforma ES6 + în cod ES5 valid. Opțional, configurează automat umplerea browserului.
  • @ babel / preset-react este folosit pentru transformarea sintaxei claselor JSX și React în cod JavaScript valid.
  • babel-loader este un încărcător de webpack care leagă Babel de webpack. Vom executa Babel din webpack cu acest pachet.

Pentru a conecta Babel la webpack-ul nostru, trebuie să creăm un fișier de configurare webpack. Să scriem un webpack.config.js fişier:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
    {
      test: /.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
  },
};

Această configurație webpack spune practic că entry punctul aplicației noastre este din index.js, deci trageți tot ce este necesar fișierului respectiv, apoi puneți output a procesului de grupare în dist director, denumit bundle.js. Oh, dacă alergăm mai departe webpack-dev-server, apoi spuneți serverului să difuzeze conținut de la contentBase config, care este același director în care se află această config. Pentru toate fișierele .js sau .jsx, utilizați babel-loader să le transpile pe toate.

Pentru a utiliza presetările Babel, creați un nou .babelrc fişier

touch .babelrc

Scrieți următorul conținut:

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

Acum fugi npm run start din nou. De data aceasta va funcționa.

Adăugând Prettier

Pentru a accelera și mai mult dezvoltarea, să facem formatatorul de coduri folosind Prettier. Instalați dependența local și utilizați argumentul – save-exact, deoarece Prettier introduce modificări stilistice în versiunile de patch-uri.

npm install --save-dev --save-exact prettier

Acum trebuie să scriem .prettierrc Fișier de configurare:

{
 "semi": true,
 "singleQuote": true,
 "trailingComma": "es5"
}

Regulile înseamnă că dorim să adăugăm punct și virgulă la sfârșitul fiecărei instrucțiuni, să folosim un ghilimel ori de câte ori este cazul și să punem virgule finale pentru codul ES5 cu mai multe linii, cum ar fi obiecte sau tablouri.

Puteți rula Prettier din linia de comandă cu:

npx prettier --write "src/**/*.js"

Sau adăugați un script nou la package.json fişier:

"scripts": {
 "test": "echo "Error: no test specified" && exit 1",
 "start": "webpack-dev-server --mode development",
 "format": "prettier --write "src/**/*.js""
},

Acum putem rula Prettier folosind npm run format.

În plus, dacă utilizați VSCode pentru dezvoltare, puteți instala fișierul Extensie mai frumoasă și rulați-o de fiecare dată când salvați modificările adăugând această setare:

"editor.formatOnSave": true

Adăugarea hărții sursă pentru jurnale de erori mai bune

Deoarece webpack include codul, hărțile sursă sunt obligatorii pentru a obține o referință la fișierul original care a generat o eroare. De exemplu, dacă grupați trei fișiere sursă (a.js, b.js, și c.js) într-un singur pachet (bundler.js) și unul dintre fișierele sursă conține o eroare, urmărirea stivei va indica pur și simplu bundle.js. Acest lucru este problematic, deoarece probabil doriți să știți exact dacă fișierul a, b sau c provoacă o eroare.

Puteți spune webpack să genereze hărți sursă folosind proprietatea devtool a configurației:

module.exports = {
  devtool: 'inline-source-map',
  // … the rest of the config
};

Deși va provoca o construcție mai lentă, nu are niciun efect asupra producției. Sourcemaps sunt descărcate numai dacă deschideți browserul DevTools.

Configurarea ESLint

Linter este un program care verifică codul nostru pentru orice eroare sau avertisment care poate provoca erori. Linter-ul JavaScript, ESLint, este un program foarte flexibil de linting care poate fi configurat în mai multe moduri.

Dar, înainte de a începe, să instalăm ESLint în proiectul nostru:

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react
  • eslint este dependența de bază pentru toate funcționalitățile, în timp ce eslint-loader ne permite să conectăm eslint la webpack. Acum, deoarece React a folosit sintaxa ES6 +, vom adăuga babel-eslint – un analizor care permite eslint să scape toate codurile ES6 + valide.
  • eslint-config-react și eslint-plugin-react sunt utilizate ambele pentru a permite ESLint să utilizeze reguli prestabilite.

Deoarece avem deja webpack, trebuie doar să modificăm ușor configurația:

module.exports = {
  // modify the module
  module: {
    rules: [{
      test: /.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'] // include eslint-loader
    }]
  },
};

Apoi creați un fișier de configurare eslint numit .eslintrc cu acest conținut:

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Configurarea spune în principiu: „Hei ESLint, te rog analizează codul folosind babel-eslint înainte de ao verifica, și când îl verificați, vă rugăm să verificați dacă toate regulile din configurația noastră pentru regulile React sunt adoptate. Luați variabile globale din mediul browserului și nodului. A, și dacă este codul React, luați versiunea din modul în sine. În acest fel, utilizatorul nu va trebui să specifice versiunea manual.

În loc să specificăm propriile reguli manual, extindem pur și simplu react reguli care au fost puse la dispoziție de eslint-config-react și eslint-plugin-react.

Am găsit erori! Ce fac?

Din păcate, singura modalitate de a afla cu adevărat cum să remediați erorile ESLint este căutând documentația pentru reguli. Există o modalitate rapidă de a remedia erorile ESLint folosind eslint--fix, și este de fapt bun pentru o soluție rapidă. Să adăugăm un script pe package.json fişier:

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "start": "webpack-dev-server --mode development",
  "format": "prettier --write "src/**/*.js"",
  "eslint-fix": “eslint --fix "src/**/*.js"", // the eslint script
  "build": "webpack --mode production"
},

Apoi rulați-l cu npm run eslint-fix. Nu vă faceți griji dacă sunteți încă neclar despre ESLint pentru moment. Veți afla mai multe despre ESLint pe măsură ce îl utilizați.

Adăugarea procesorului CSS LESS

Pentru a adăuga procesorul LESS în aplicația noastră React, vom solicita atât pachete mai puține, cât și pachete de încărcare de pe webpack:

npm install --save-dev less less-loader css-loader style-loader

less-loader va compila fișierul nostru mai puțin în css, în timp ce css-loader va rezolva sintaxa CSS ca import sau url(). style-loader va primi css-ul nostru compilat și îl va încărca în <style> tag în pachetul nostru. Acest lucru este excelent pentru dezvoltare, deoarece ne permite să ne actualizăm stilul din mers, fără a fi nevoie să reîmprospătăm browserul.

Acum să adăugăm câteva fișiere CSS pentru a crea un nou director de stil în src/style

cd src && mkdir style && touch header.less && touch main.less

header.less conţinut:

.header {
  background-color: #3d3d;
}

main.less conţinut:

@import "header.less";
@color: #f5adad;
body {
  background-color: @color;
}

Acum importați-ne main.less fișier din index.js:

import "./style/main.less";

Apoi actualizați configurația noastră webpack module proprietate:

module: {
  rules: [{
    test: /.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  },
  {
    test: /.less$/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader',
    ],
  },
 ]
},

Rulați scriptul de pornire și suntem bine să plecăm!

Implementarea aplicației React pe Netlify

Toate aplicațiile trebuie să fie implementate pentru ultimul pas, iar pentru aplicațiile React, implementarea este foarte ușoară.

În primul rând, să schimbăm rezultatul și dezvoltarea compilării contentBase din dist la build în configurația noastră Webpack.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'), // change this
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: "./build",
  },
//…

Acum să instalăm un nou plugin Webpack numit HtmlWebpackPlugin

npm install html-webpack-plugin -D

Acest plugin va genera index.html fișier în același director în care bundle.js este creat de Webpack. În acest caz, build director.

De ce avem nevoie de acest plugin? Deoarece Netlify necesită un singur director pentru a fi făcut director rădăcină, deci nu putem folosi index.html în directorul nostru rădăcină folosind Netlify. Trebuie să vă actualizați configurația webpack pentru a arăta astfel:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: //…
  output: {
    //…
  },
  devServer: {
    contentBase: "./build",
  },
  module: {
    //…
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
  ]
};

Și vă rugăm să eliminați script eticheta din index.html:

<!DOCTYPE html><html>  <head>    <title>My React Configuration Setup</title>  </head>  <body>    <div id="root"></div>  </body></html><!DOCTYPE html>
<html>
  <head>
    <title>My React Configuration Setup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Acum puteți testa configurația cu npm run build comanda. După ce ați terminat, împingeți boiler-ul dvs. într-o repo GitHub. Este timpul să ne implementăm aplicația!

Acum să înregistrăm un Netlify cont. Dacă nu ați mai auzit de Netlify înainte, este un site uimitor de găzduire static care oferă toate instrumentele de care aveți nevoie pentru a implementa un site static gratuit. Ce este un site static? Este un site web creat dintr-o colecție de pagini HTML statice, fără niciun backend. Platforma noastră React, așa cum este acum, este considerată un site static, deoarece nu avem configurat un backend și este doar HTML și JavaScript.

După înscriere, selectați un nou site din Git și alegeți GitHub ca furnizor de Git:

Cum sa configurati si sa implementati aplicatia React de la

Trebuie să acordați permisiuni pentru Netlify, apoi selectați repoartul React boilerplate.

1612090633 287 Cum sa configurati si sa implementati aplicatia React de la

Acum trebuie să introduceți comanda de construire și directorul de publicare. După cum puteți vedea, de aceea avem nevoie HtmlWebpackPlugin, deoarece trebuie să servim totul dintr-un singur director. Mai degrabă decât să ne actualizăm manual rădăcina index.html fișier pentru modificări, doar îl generăm folosind pluginul.

1612090633 672 Cum sa configurati si sa implementati aplicatia React de la

Asigurați-vă că aveți aceeași comandă ca și captura de ecran de mai sus sau este posibil ca aplicația dvs. să nu ruleze.

1612090634 830 Cum sa configurati si sa implementati aplicatia React de la

Odată ce starea de implementare se transformă în published (numărul 2 de mai sus), puteți accesa numele site-ului aleatoriu pe care Netlify l-a atribuit aplicației dvs. (numărul 1).

Aplicația dvs. React este implementată. Minunat!

Concluzie

Tocmai v-ați creat propriul cazan de proiect React și l-ați implementat live pe Netlify. Felicitări! Desigur, nu am aprofundat configurațiile webpack, deoarece această boilerplate este menită să fie un starter generic. În unele cazuri în care avem nevoie de funcții avansate, cum ar fi redarea pe partea de server, trebuie să modificăm din nou configurația.

Dar relaxează-te! Ați ajuns până aici, ceea ce înseamnă că înțelegeți deja ce fac webpack, Babel, Prettier și ESLint. Webpack are multe încărcătoare puternice care vă pot ajuta cu multe cazuri pe care le contracarați frecvent atunci când creați o aplicație web.

De asemenea, în prezent scriu o carte pentru a ajuta dezvoltatorii de software să învețe despre React, așa că s-ar putea să doriți verifică!

Cum sa configurati si sa implementati aplicatia React de la

Puteți citi mai multe din tutorialele mele React la sebhastian.com.