51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
---
|
||
title: Setting Up a React Es6 and Webpack Project
|
||
localeTitle: 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.
|
||
|
||
* [Ayuda: Más sobre React](https://facebook.github.io/react/docs/why-react.html)
|
||
|
||
Para este proyecto utilizaremos Webpack, que es un paquete de módulos, y se usa comúnmente en los proyectos React.
|
||
|
||
* [Ayuda: Más sobre Webpack](https://webpack.github.io/docs/what-is-webpack.html)
|
||
|
||
[React va bien con ES6](https://babeljs.io/blog/2015/06/07/react-on-es6-plus) , 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](https://github.com/lukehoban/es6features)
|
||
|
||
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` .
|
||
|
||
* [Ayuda: Más sobre ES6](http://dev.venntro.com/2013/09/es6-part-1/)
|
||
|
||
## 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](http://www.freecodecamp.com/map) .
|
||
|
||
Antes de comenzar, asegúrese de tener [NodeJS](https://nodejs.org/en/download/) y [Node Package Manager](http://blog.npmjs.org/post/85484771375/how-to-install-npm) 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](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! |