2.7 KiB
title | localeTitle |
---|---|
Setting Up a React Es6 and Webpack Project | Configuración de un proyecto React Es6 y Webpack |
Este wiki le indicará cómo configurar un proyecto básico que utiliza React, Webpack y ES6. Vamos a revisar todo en profundidad.
Para este proyecto utilizaremos Webpack, que es un paquete de módulos, y se usa comúnmente en los proyectos React.
React va bien con ES6 , así que usaremos ES6 en nuestro código.
ES6 es una actualización importante para el idioma, y la primera actualización del idioma desde que se estandarizó ES5 en 2009.
- lukehoban
ES6 aún no funciona en los navegadores por sí solo, pero podemos hacer que funcione manualmente utilizando Babel para trasladarlo a ES5.
Una característica clave de las tecnologías que estamos usando es que nuestro archivo index.html
se referirá a un archivo JavaScript incluido desde el cual podemos referirnos a otros archivos JavaScript, en lugar de referirnos a ellos desde el archivo HTML con etiquetas de script
.
Prerrequisitos
Este tutorial está destinado a darle una estructura básica para expandirse. Debe ser un buen punto de partida para cualquier persona que quiera aprender React y ES6. Si aún no ha creado nada con JavaScript o jQuery, primero debe realizar algunos de los ejercicios en el mapa FreeCodeCamp .
Antes de comenzar, asegúrese de tener NodeJS y Node Package Manager instalados en sus versiones más recientes.
Instrucciones rápidas
Aquí hay una lista de todas las instrucciones mencionadas en este tutorial.
npm install webpack webpack-dev-server -g
mkdir react-webpack-example && cd $_
touch webpack.config.js
npm init
npm install --save-dev react react-dom webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .gitignore
- escriba
.gitignore
(use https://www.gitignore.io/api/node ) mkdir src
mkdir dist
mkdir src/js
touch src/js/client.js
touch dist/index.html
- escribe
dist/index.html
- escribe
src/js/client.js
- escribir
webpack.config.js
webpack
webpack-dev-server --content-base dist
- Abra la ruta del servidor Webpack Dev en el navegador. ¡Hecho!