6.7 KiB
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.
Para explicar lo que está pasando en este archivo, lo desglosaremos:
-
Primero, estamos importando
React
yReactDOM
. Estos son necesarios para cualquier archivo React que se use para inyectar código en el DOM. ElReactDOM
es un DOM virtual, y no es lo mismo que el Modelo de Objeto de Documento estándar. -
- 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 .
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 laapp
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 eldiv
con elid
de laapp
.
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 decontext
. 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 unbuildPath
usando el módulo depath
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 nuestrodist/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 ejecutawebpack.config.js
. Esto es, en gran medida, un código repetitivo que podemos ver en la página Léame de Babel Loader .
- Primero proporcionamos un contexto, que simplemente especifica dónde está nuestra aplicación. Se refiere a la variable de
Si webpack.config.js
es confuso ahora, no se preocupe, siempre y cuando entienda lo que hay que hacer.