freeCodeCamp

6.7 KiB

Raw Blame History

title	localeTitle
Writing Code for Your Es6 React with Webpack Project	Escribir código para su proyecto Es6 React con Webpack

dist / index.html

Podemos ir ahora a abrir nuestro dist/index.html . Esta será la única página HTML que carga toda nuestra aplicación. No necesitamos mucho código para este archivo, solo lo suficiente para:

Establezca un elemento para React DOM en src/js/client.js .
Enlace a nuestro archivo JavaScript incluido (que aún no existe).

Por lo tanto, este es el aspecto que tendrá nuestro archivo dist/index.html :

<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
  <meta charset="UTF-8"> 
  <title>React Webpack Example</title> 
 </head> 
 <body> 
  <!-- React app will be injected into the following `div` element: --> 
  <div id="app"></div> 
  <!-- Include bundled JavaScript: --> 
  <script src="bundle.js"></script> 
 </body> 
 </html>

Quizás se esté preguntando por qué esta página se vincula con un bundle.js cuando todo lo que tenemos hasta ahora es un src/js/client.js . Esto se revelará más adelante cuando escribamos nuestro archivo de configuración de Webpack.

src / js / client.js

Ahora es el momento de escribir un código React. Al igual que en el archivo dist/index.html , por ahora escribiremos solo el código suficiente para que la aplicación funcione, por lo que no se requerirá mucho código:

import React from 'react'; 
 import ReactDOM from 'react-dom'; 
 
 class Main extends React.Component { 
  render() { 
    return ( 
      <div> 
        <h1>This is one cool app!</h1> 
      </div> 
    ); 
  } 
 } 
 
 const app = document.getElementById('app'); 
 ReactDOM.render(<Main />, app);

El código que parece elementos HTML es en realidad JSX, que es parte de React.

Ayuda: Más sobre JSX

Para explicar lo que está pasando en este archivo, lo desglosaremos:

Primero, estamos importando React y ReactDOM . Estos son necesarios para cualquier archivo React que se use para inyectar código en el DOM. El ReactDOM es un DOM virtual, y no es lo mismo que el Modelo de Objeto de Documento estándar.
Ayuda: Más sobre React DOM
- A continuación, estamos creando una clase React. Las clases fueron agregadas a JavaScript en ES6. Por lo tanto, este es el método ES6 para escribir una clase React, pero, por supuesto , también podemos escribir una en ES5 .
Ayuda: Más sobre las clases de ES6

Cada clase React tiene un método de render . En este caso, el método de render está return un elemento div JSX. Esto es lo que veremos en cualquier archivo React. La clase puede contener otros métodos que deben aparecer antes que el método de render , que siempre va al final de una clase.

Por último, estamos vinculando React con nuestro index.html . Configuramos la app para que sea la ubicación donde queramos que se inyecte nuestro código React. Y finalmente, usando ReactDOM, inyectamos el componente que escribimos, <Main /> , en la aplicación, que en este caso es el div con el id de la app .

webpack.config.js

Todavía queda un archivo más por escribir antes de que nuestro proyecto esté listo. Es el archivo de configuración de Webpack. Al principio, los archivos webpack.config.js pueden ser confusos, pero a menudo no son tan complejos como parecen.

En este caso, en su forma más básica, un webpack.config.js exporta un objeto que tiene las siguientes propiedades:

Propiedad	Papel
entrada	Lo que entra: el punto de entrada de la aplicación. En este caso, es `src/js/client.js` .
salida	Lo que sale: lo que Webpack va a agrupar para nosotros. En este caso, es lo que sea que lo `webpack.config.js` en el `webpack.config.js` .
cargadoras	Las tareas que va a realizar Webpack.

Aquí es cómo se webpack.config.js archivo webpack.config.js :

var path = require('path'); 
 var srcPath = path.join(__dirname, 'src'); 
 var buildPath = path.join(__dirname, 'dist'); 
 
 module.exports = { 
  context: srcPath, 
  entry: path.join(srcPath, 'js', 'client.js'), 
  output: { 
      path: buildPath, 
      filename: "bundle.js" 
  }, 
  module: { 
      loaders: <a href='https://en.wikipedia.org/wiki/Don%27t_repeat_yourself' target='_blank' rel='nofollow'> 
          { 
            test: /\.jsx?$/, 
            exclude: /(node_modules|bower_components)/, 
            loader: 'babel', 
            query: { 
              presets: ['react', 'es2015'] 
            } 
          } 
      ] 
  } 
 };

Nuevamente, vamos a desglosarlo para que quede claro lo que está haciendo este archivo:

En primer lugar, estamos requiriendo de NodeJS path módulo de manera que podemos manejar las rutas de archivos, que se requiere para el ajuste del objeto de context . Es muy importante usar este módulo en lugar de intentar y concatenar directorios con cadenas, ya que algunos sistemas operativos, como Windows, lo requieren.
Luego, especificamos un srcPath y un buildPath usando el módulo de path que solo requerimos. Hacer esto asegurará que tengamos [SECADO, código legible.
Ahora llega el momento de escribir el objeto. Las propiedades que vamos a utilizar son todas relevantes para Webpack.
- Primero proporcionamos un contexto, que simplemente especifica dónde está nuestra aplicación. Se refiere a la variable de context que acabamos de crear.
- Luego especificamos el punto de entrada, que es, por supuesto, la aplicación React que escribimos anteriormente ( src/js/client.js ).
- A continuación, especificamos el nombre del archivo empaquetado que Webpack crea cuando se ejecuta. En este caso es dist/bundle.js . ¿Suena familiar? Debería hacerlo, porque este es el archivo al que nos vinculamos desde nuestro dist/index.html !
- Finalmente viene la propiedad de module , que contiene una matriz, loaders , que actualmente contiene un solo objeto. Las propiedades de este objeto le dicen a Webpack qué archivos JavaScript se están escribiendo con ES6 y React, de modo que su cargador, babel , pueda ejecutarse en consecuencia cuando se ejecuta webpack.config.js . Esto es, en gran medida, un código repetitivo que podemos ver en la página Léame de Babel Loader .

Si webpack.config.js es confuso ahora, no se preocupe, siempre y cuando entienda lo que hay que hacer.

Ayuda: Más sobre escribir un archivo de configuración de Webpack

6.7 KiB Raw Blame History

dist / index.html

src / js / client.js

webpack.config.js

6.7 KiB

Raw Blame History