Het beste artikel voor het instellen van react web-app met Babel + React + Webpack.

Ik schrijf altijd graag over React wanneer ik maar wil in mijn vrije tijd. Persoonlijk heb ik de afgelopen tijd veel React-projecten opgestart. Ik moest het project altijd helemaal opnieuw instellen. Uiteindelijk heb ik mijn eigen https://github.com/vishalvishalgupta/react-webpack-babel-setup gemaakt. Zoals u wellicht weet, zijn op die manier ontelbare React boilerplate-projecten en repositories gemaakt. Maar het artikel is niet mijn poging om nog een ander React boilerplate-project te adverteren. Ik had verschillende redenen waarom ik het installatieproces uit een ander artikel van mij had gehaald.

Voordat u aan de slag kunt, moet u ervoor zorgen dat u een geïnstalleerde editor en terminal op uw machine heeft. Bovendien hebt u een geïnstalleerde versie van node met npm nodig. Zorg ervoor dat u alles hebt ingesteld voordat u doorgaat met lezen.

mkdir react-boilerplate
cd react-boilerplate
npm init -y
mkdir dist
cd dist
raak index.html aan

De hele gediende applicatie bevat slechts twee bestanden: een .html- en een .js-bestand. Hoewel het .js-bestand later automatisch wordt gegenereerd op basis van al uw JavaScript-bronbestanden (via Webpack), kunt u het .html-bestand al handmatig als invoerpunt voor uw toepassing maken.



  
     De React Webpack Babel Setup door Vishal Gupta 
  
  
    
       

Webpack Setup

U gebruikt Webpack als modulebundler en build-tool. Bovendien gebruik je webpack-dev-server om je gebundelde app in een lokale omgeving te bedienen. Anders kon je het niet in de browser zien om het te ontwikkelen. Last but not least hebt u het webpack-cli node-pakket nodig om uw Webpack-instellingen later in een configuratiebestand te configureren. Laten we alle drie knooppuntpakketten installeren met behulp van npm.

npm install - opslaan-dev webpack webpack-dev-server webpack-cli

Script voor het uitvoeren van het op webpack gebaseerde project: -

...
"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode ontwikkeling",
  ...
},
...

Laten we het vereiste webpack.config.js-bestand maken.

module.exports = {
  vermelding: './src/index.js',
  output: {
    pad: __dirname + '/ dist',
    publicPath: '/',
    bestandsnaam: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

Wat ontbreekt in ons project is het bestand src / index.js.

mkdir src
cd src
raak index.js aan

index.js: -

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

Nu zou u uw webpack-dev-server moeten kunnen starten.

npm start

Babel Setup

Met Babel kunt u uw code schrijven met JavaScript, dat nog niet wordt ondersteund in de meeste browsers. Perhaphs je hebt gehoord over JavaScript ES6 (ES2015) en verder. Met Babel wordt de code teruggestuurd naar vanille JavaScript, zodat elke browser, zonder dat alle JavaScript ES6 en meer functies zijn geïmplementeerd, deze kan interpreteren. Om Babel aan het werk te krijgen, moet u twee van de belangrijkste afhankelijkheden installeren.

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

Om het aan Webpack aan te sluiten, moet je bovendien een zogenaamde loader installeren:

npm install - opslaan-dev babel-loader

Als laatste stap, omdat u React wilt gebruiken, heeft u nog een configuratie nodig om de JSX-syntaxis van React om te zetten in vanille JavaScript.

Uit rootmap:

npm installatie - save-dev @ babel / preset-react

webpack.config.js

module.exports = {
  vermelding: './src/index.js',
  module: {
    reglement: [
      {
        test: /\.(js|jsx)$/,
        uitsluiten: / node_modules /,
        gebruik: ['babel-loader']
      }
    ]
  },
  oplossen: {
    extensies: ['*', '.js', '.jsx']
  },
  output: {
    pad: __dirname + '/ dist',
    publicPath: '/',
    bestandsnaam: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

U kunt uw toepassing opnieuw starten. Er zou niets moeten zijn veranderd, behalve dat u nu de komende ECMAScript-functies voor JavaScript kunt gebruiken.

Stel de babel-presets in .bablerc in zoals hieronder

...

{

"Presets": [

“@ Babel / preset-env”

“@ Babel / preset reageren”

]

}

...

of u kunt ook de inhoud in uw package.json instellen zoals hieronder.

......

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

......

Met Babel kunt u toekomstige JavaScript in uw browser gebruiken, omdat deze wordt omgezet in vanille JavaScript. Nu bent u klaar om nu uw eerste React-component te bouwen.

Reageren Setup in een Webpack + Babel-project

Om React te gebruiken, hebt u nog twee knooppuntpakketten nodig. De react- en react-dom-pakketten moeten je npm-start corrigeren.

Uit rootmap:

npm install - bewaar react react-dom

In je src / index.js kun je je eerste hook in de React-wereld implementeren.

src / index.js

importeren Reageren van 'reageren';
import ReactDOM uit 'react-dom';
const title = 'Mijn reactie Webpack Babel Setup';
ReactDOM.render (
  
{title} ,   document.getElementById ( 'app') );

Vervanging hete module in React

Een enorme ontwikkelingsboost geeft je react-hot-loader (vervanging van hot modules). Het verkort je feedbacklus tijdens de ontwikkeling. Kortom, wanneer u iets in uw broncode wijzigt, is de wijziging van toepassing op uw app die in de browser wordt uitgevoerd zonder de hele pagina opnieuw te laden.

npm installeren - save-dev react-hot-loader

U moet wat meer configuratie toevoegen aan uw Webpack-configuratiebestand.

webpack.config.js

const webpack = vereisen ('webpack');
module.exports = {
  vermelding: './src/index.js',
  module: {
    reglement: [
      {
        test: /\.(js|jsx)$/,
        uitsluiten: / node_modules /,
        gebruik: ['babel-loader']
      }
    ]
  },
  oplossen: {
    extensies: ['*', '.js', '.jsx']
  },
  output: {
    pad: __dirname + '/ dist',
    publicPath: '/',
    bestandsnaam: 'bundle.js'
  },
  plug-ins: [
    nieuwe webpack.HotModuleReplacementPlugin ()
  ],
  devServer: {
    contentBase: './dist',
    hot: waar
  }
};

Bovendien moet u in het bestand src / index.js definiëren dat hot reloading beschikbaar is en moet worden gebruikt.

src / index.js

importeren Reageren van 'reageren';
import ReactDOM uit 'react-dom';
const title = 'Mijn reactie Webpack Babel Setup';
ReactDOM.render (
  
{title} ,   document.getElementById ( 'app') );
module.hot.accept ();

Nu kunt u uw app opnieuw starten.

Uit rootmap:

npm start

Het beste van geluk tot ziens. Happy React….

Lees dit verhaal later in Journal.

🗞 Word elke zondagochtend wakker met de meest opmerkelijke technische verhalen, meningen en nieuws van de week in je inbox: ontvang de opmerkelijke nieuwsbrief>