El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Ús de Webpack amb React

Següent ►
►

En aquest tema, aprendrem com configurar Webpack per a un projecte React. Això inclou la configuració de loaders i plugins específics per a React, així com la integració amb Babel per a la transpilació de codi JSX.

Objectius

  • Configurar Webpack per a un projecte React.
  • Utilitzar loaders per a la transpilació de JSX.
  • Integrar Babel amb Webpack.
  • Configurar el servidor de desenvolupament de Webpack per a React.

Requisits Previs

  • Coneixements bàsics de Webpack.
  • Coneixements bàsics de React.
  • Coneixements bàsics de Babel.

Passos per Configurar Webpack amb React

  1. Instal·lació de Dependències

Primer, necessitem instal·lar les dependències necessàries. Això inclou Webpack, Babel i React.

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save react react-dom

  1. Configuració del Fitxer webpack.config.js

Creem un fitxer webpack.config.js a l'arrel del nostre projecte amb la següent configuració bàsica:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  mode: 'development',
};

  1. Configuració de Babel

Creem un fitxer .babelrc a l'arrel del nostre projecte amb la següent configuració:

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

  1. Estructura del Projecte

L'estructura del projecte hauria de ser similar a la següent:

/my-react-app
  /node_modules
  /src
    /components
      App.jsx
    index.js
  .babelrc
  package.json
  webpack.config.js

  1. Creació de Components React

Creem un component React bàsic a src/components/App.jsx:

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React with Webpack!</h1>
    </div>
  );
};

export default App;

  1. Punt d'Entrada

Creem el punt d'entrada a src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

  1. Configuració del HTML

Creem un fitxer index.html a la carpeta dist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React with Webpack</title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

  1. Executar el Servidor de Desenvolupament

Afegim un script al package.json per executar el servidor de desenvolupament:

"scripts": {
  "start": "webpack serve --open"
}

Ara podem executar el servidor de desenvolupament amb:

npm start

Exercici Pràctic

Exercici 1: Afegir un Nou Component

  1. Crea un nou component Header.jsx a la carpeta src/components.
  2. Fes que el component Header mostri un títol i una descripció.
  3. Importa i utilitza el component Header dins del component App.

Solució

src/components/Header.jsx

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Welcome to My React App</h1>
      <p>This is a simple React application configured with Webpack.</p>
    </header>
  );
};

export default Header;

src/components/App.jsx

import React from 'react';
import Header from './Header';

const App = () => {
  return (
    <div>
      <Header />
      <h1>Hello, React with Webpack!</h1>
    </div>
  );
};

export default App;

Conclusió

En aquesta secció, hem après a configurar Webpack per a un projecte React, incloent la configuració de loaders i plugins específics per a React, així com la integració amb Babel. També hem creat un component React bàsic i hem configurat el servidor de desenvolupament de Webpack per a React. Amb aquests coneixements, estem preparats per desenvolupar aplicacions React més complexes utilitzant Webpack.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats