Den beste artikkelen for grunnleggende oppsett av reager web-app med Babel + React + Webpack.

Jeg liker alltid å skrive om React når som helst på fritiden. Personlig startet jeg opp en rekke React-prosjekter den siste tiden. Jeg måtte alltid sette opp prosjektet fra bunnen av. Etter hvert har jeg laget min egen https://github.com/vishalvishalgupta/react-webpack-babel-setup. Som du kanskje vet, ble utallige React-kjeleplateprosjekter og depoter opprettet på den måten. Men artikkelen er ikke mitt forsøk på å annonsere enda et React-kjeleplate-prosjekt. Jeg hadde flere grunner til at jeg hentet installasjonsprosessen fra en annen artikkel av meg.

Før du kan komme i gang, bør du sørge for å ha en installert editor og terminal på maskinen din. I tillegg trenger du en installert versjon av node med npm. Sørg for å ha satt opp alt av det før du fortsetter å lese.

mkdir react-boilerplate
cd reaksjonskjelplate
npm init -y
mkdir dist
cd dist
trykk på index.html

Hele applikasjonen inneholder bare to filer: en .html og en .js-fil. Mens .js-filen blir generert automatisk fra alle JavaScript-kildefilene dine (via Webpack) senere, kan du allerede opprette .html-filen manuelt som et inngangspunkt for applikasjonen din.



  
     React Webpack Babel Setup av Vishal Gupta 
  
  
    
       

Webpack Setup

Du vil bruke Webpack som modulbunter og byggeverktøy. Videre vil du bruke webpack-dev-server til å tjene den medfølgende appen din i et lokalt miljø. Ellers kunne du ikke se den i nettleseren for å utvikle den. Sist, men ikke minst, trenger du webpack-cli node-pakken for å konfigurere Webpack-oppsettet i en konfigurasjonsfil senere. La oss installere alle tre node-pakker ved å bruke npm.

npm installering - lagre-dev webpack webpack-dev-server webpack-cli

Skript for å kjøre det nettpakkbaserte prosjektet: -

...
"skript": {
  "start": "webpack-dev-server --config ./webpack.config.js - modusutvikling",
  ...
}
...

La oss lage den nødvendige webpack.config.js-filen.

module.exports = {
  oppføring: './src/index.js',
  utgang: {
    bane: __dirname + '/ dist',
    publicPath: '/',
    filnavn: 'bundle.js'
  }
  devServer: {
    contentBase: './dist'
  }
};

Det som mangler i prosjektet vårt er src / index.js-filen.

mkdir src
cd src
trykk på index.js

index.js: -

console.log ('My React Webpack Babel Setup');

Nå skal du kunne starte webpack-dev-serveren.

npm start

Babeloppsett

Babel lar deg skrive koden din med JavaScript som ikke støttes ennå i de fleste nettlesere. Perhaphs du har hørt om JavaScript ES6 (ES2015) og videre. Med Babel vil koden bli transponert tilbake til vanilje JavaScript, slik at hver nettleser, uten å ha implementert all JavaScript ES6 og utover, kan tolke den. For å få Babel til å fungere, må du installere to av de viktigste avhengighetene.

npm installering - lagre-dev @ babel / core @ babel / preset-env

For å koble den til Webpack må du dessuten installere en såkalt laster:

npm installering - lagre-dev babel-laster

Som det siste trinnet, siden du vil bruke React, trenger du en konfigurasjon til for å transformere React's JSX-syntaks til vanilje JavaScript.

Fra rotmappe:

npm installering - lagre-dev @ babel / forhåndsinnstilt reaksjon

webpack.config.js

module.exports = {
  oppføring: './src/index.js',
  modul: {
    regler: [
      {
        test: /\.(js|jsx)$/,
        ekskludere: / node_modules /,
        bruk: ['babel-loader']
      }
    ]
  }
  løse: {
    utvidelser: ['*', '.js', '.jsx']
  }
  utgang: {
    bane: __dirname + '/ dist',
    publicPath: '/',
    filnavn: 'bundle.js'
  }
  devServer: {
    contentBase: './dist'
  }
};

Du kan starte søknaden din på nytt. Ingenting skal ha endret seg bortsett fra at du kan bruke kommende ECMAScript-funksjonaliteter for JavaScript nå.

Enten konfigurerer du forhåndsinnstillinger for babel i .bablerc som nedenfor

...

{

“Forhåndsinnstillinger”: [

“@ Babel / forhånds-env”,

“@ Babel / forhåndsreagere”

]

}

...

eller du kan også angi innholdet i pakken.json som nedenfor.

......

"babel": {
  "forhåndsinnstillinger": [
    "@ Babel / forhånds-env",
    "@ Babel / forhåndsreagere"
  ]
}

......

Babel lar deg bruke fremtidig JavaScript i nettleseren din, fordi den transpilerer det ned til vanilje JavaScript. Nå er du klar for å bygge din første React-komponent nå.

React Setup i et Webpack + Babel-prosjekt

For å kunne bruke React, trenger du to node-pakker til. Reaksjon- og reaksjonspakkene bør fikse start på npm.

Fra rotmappe:

npm installasjon - lagre reaksjon-dom

I src / index.js kan du implementere din første krok i React-verdenen.

src / index.js

import React fra 'react';
importer ReactDOM fra 'react-dom';
const title = 'My React Webpack Babel Setup';
ReactDOM.render (
  
{tittel} ,   document.getElementById ( 'app') );

Erstatning av varm modul i reaksjon

Et stort utviklingsøkning vil gi deg reakt-hot-loader (Hot Module Replacement). Det vil forkorte tilbakemeldingssløyfen din under utvikling. I utgangspunktet når du endrer noe i kildekoden, vil endringen gjelde i appen din som kjører i nettleseren uten å laste inn hele siden.

npm installering - lagre-dev react-hot-loader

Du må legge til noen flere konfigurasjoner i Webpack-konfigurasjonsfilen.

webpack.config.js

const webpack = krever ('webpack');
module.exports = {
  oppføring: './src/index.js',
  modul: {
    regler: [
      {
        test: /\.(js|jsx)$/,
        ekskludere: / node_modules /,
        bruk: ['babel-loader']
      }
    ]
  }
  løse: {
    utvidelser: ['*', '.js', '.jsx']
  }
  utgang: {
    bane: __dirname + '/ dist',
    publicPath: '/',
    filnavn: 'bundle.js'
  }
  plugins: [
    ny webpack.HotModuleReplacementPlugin ()
  ]
  devServer: {
    contentBase: './dist',
    hot: sant
  }
};

I tillegg i src / index.js-filen må du definere at varm omlasting er tilgjengelig og bør brukes.

src / index.js

import React fra 'react';
importer ReactDOM fra 'react-dom';
const title = 'My React Webpack Babel Setup';
ReactDOM.render (
  
{tittel} ,   document.getElementById ( 'app') );
module.hot.accept ();

Nå kan du starte appen din igjen.

Fra rotmappe:

npm start

Best of Luck BYE BYE. Glad reaksjon….

Les denne historien senere i Journal.

🗞 Våkn opp hver søndag morgen til ukens mest bemerkelsesverdige teknologiske historier, meninger og nyheter som venter i innboksen: Få det bemerkelsesverdige nyhetsbrevet>