Configuración del entorno de ReactJS

En este capítulo, le mostraremos cómo configurar con éxito el entorno para el desarrollo de React. Tenga en cuenta que implica muchos pasos, pero esto ayudará a acelerar el proceso de desarrollo futuro. Necesitaremos NodeJS, por lo que si no lo ha instalado, consulte los enlaces en la tabla a continuación.

Después de instalar NodeJS con éxito, podemos comenzar a usar npm para instalar React-on. Puede instalar ReactJS de dos formas

• Usar webpack y Babel.

• UsarAdemás de instalar webpack y babel, también puede instalar-codebox\Desktop>npx create-codebox\Desktop>cd　mycomando.

Instalar ReactJS usando webpack y Babel

Webpackes un empaquetador de módulos (gestiona y carga módulos independientes). Toma módulos relacionados y los compila en un paquete (archivo) único. Puede usar este paquete para desarrollar aplicaciones utilizando la línea de comandos o configurando el archivo webpack.config para el desarrollo de aplicaciones.

Babel es un compilador de JavaScript y compilador. Se utiliza para convertir un código fuente en otro código fuente. Al usar esta función, podrá usar ES6de nuevas características, mientras que Babel lo convertirá en código ES5。

N)?　sí1Paso-Crear carpeta raíz

Use el comando mkdir para crear una carpeta llamada reactApp en el escritorio para instalar todos los archivos necesarios.

C:\Users\username\Desktop>mkdir　reactApp
C:\Users\username\Desktop>cd　reactApp

Para crear cualquier módulo, se necesita generar el archivo package.json. Por lo tanto, después de crear la carpeta, se necesita crear el archivo package.json. Para esto, debe ejecutar el comando npm init desde la línea de comandos.

C:\Users\username\Desktop\reactApp>npm　init

Este comando pregunta sobre la información del módulo, como el nombre del paquete, la descripción, el autor, etc. Puede usar la opción –y para saltarse esta información.

C:\Users\username\Desktop\reactApp>npm　init　-s
Escribió a C:\reactApp\package.json:
{
　　　"name":　"reactApp"
　　　"version":　"1.0.0
　　　"description":　""
　　　"main":　"index.js"
　　　"scripts":　{
　　　　　　"test":　"echo　\"Error:　no　test　specified\"　&&　exit　1"
　　　},
　　　"keywords":　[],
　　　"author":　""
　　　"license":　"ISC"
}

N)?　sí2Paso-安装React和React dom

因为我们的主要任务是安装 ReactJS，安装它和它的 dom 包，分别使用 npm 的 install react 和 react-dom 命令。可以使用 -- save 选项将我们安装的软件包添加到 package.json 文件中。

C:\Users\w3codebox\Desktop\reactApp>npm　install　react　--guardar
C:\Users\w3codebox\Desktop\reactApp>npm　install　react-dom　--guardar

O, también puede instalarlos todos en una sola orden, como se muestra a continuación:

C:\Users\username\Desktop\reactApp>npm　install　react　react-dom　--guardar

N)?　sí3Paso-Instalar Webpack

Debido a que usamos webpack para generar paquetes, por favor instale webpack, webpack-dev-server y webpack-cli.

C:\Users\username\Desktop\reactApp>npm　install　webpack　--guardar
C:\Users\username\Desktop\reactApp>npm　install　webpack-dev-server　--guardar
C:\Users\username\Desktop\reactApp>npm　install　webpack-cli　--guardar

O, también puede instalar todos estos programas en una sola orden, como:

C:\Users\username\Desktop\reactApp>npm　install　webpack　webpack-dev-server　webpack-cli　--guardar

Pasos4-Instalar Babel

Instalar babel y sus plugins babel-core, babel-loader, babel-preset-env, babel-preset-react y html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm　install　babel-core　--guardar-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-loader　--guardar-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-preset-env　--guardar-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-preset-codebox\Desktop>npx create　--guardar-dev
C:\Users\username\Desktop\reactApp>npm　install　html-webpack-plugin　--guardar-dev

O, también puede instalar todos estos programas en una sola orden, como-

C:\Users\username\Desktop\reactApp>npm　install　babel-core　babel-loader　babel-preset-env　
　　　babel-preset-react　html-webpack-plugin　--guardar-dev

N)?　sí5Paso-Crear archivos

Para completar la instalación, necesitamos crear algunos archivos, es decir, index.html, App.js, main.js, webpack.config.js y .babelrcPuede crear estos archivos manualmente o usar la línea de comandos para crearlos.

C:\Users\username\Desktop\reactApp>type　nul　>　index.html
C:\Users\username\Desktop\reactApp>type　nul　>　App.js
C:\Users\username\Desktop\reactApp>type　nul　>　main.js
C:\Users\username\Desktop\reactApp>type　nul　>　webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

N)?　sí6Paso-设置编译器，服务器和加载器

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
　　　entry: '.',/main.js',
　　　output: {
　　　　　　path: path.join(__dirname, '/bundle'),
　　　　　　filename: 'index_bundle.js'
　　　},
　　　devServer: {
　　　　　　inline: true,
　　　　　　port:　8001
　　　},
　　　module: {
　　　　　　rules: [
　　　　　　　　　{
　　　　　　　　　　　　test:　/\.jsx?$/,
　　　　　　　　　　　　exclude:　/node_modules/,
　　　　　　　　　　　　loader: 'babel-loader',
　　　　　　　　　　　　query: {
　　　　　　　　　　　　　　　presets: ['es2015', 'react'
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　]
　　　},
　　　plugins:[
　　　　　　new HtmlWebpackPlugin({
　　　　　　　　　template: "./index.html'
　　　　　　})
　　　]
}

打开 package.json 并在“ scripts”对象中删除 "test" "echo \"Error: no test specified\" && exit" 1"。我们正在删除这一行，因为我们不会在本教程中做任何测试。让我们添加 start 和 build 命令。

"start": "webpack"-dev-server　--mode development　--open　--hot","build": "webpack"　--mode production"

N)?　sí7Paso-index.html

这只是普通的HTML。我们将设置div id = "app"为应用程序的根元素，并添加index_bundle.js脚本（捆绑的应用程序文件）。

<!DOCTYPE html>
<html lang="en">
　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>React App</<title>
　　　</<head>
　　　<body>
　　　　　　<div id="app"></div>
　　　　　　<script src='index_bundle.js'>/script>
　　　</body>
</html>

N)?　sí8Paso-App.jsx y main.js

Este es el primer componente React. Lo explicaremos en detalle en el siguiente capítulo. Este componente renderizaráHello World。

App.js

import React, { Component } from 'react';
class App extends Component{    render(){
　　　　　　return(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Hello World</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

Necesitamos importar este componente y presentarlo en nuestro rootAppelemento, para que podamos verlo en el navegador.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App　/> document.getElementById('app'));

Cree un archivo con un nombre.babelrcy copie el siguiente contenido en ese archivo.

{
　　　"presets":["env", "react"]

Pasos9-Ejecutar servidor

Después de configurar, podemos arrancar el servidor ejecutando el siguiente comando.

C:\Users\username\Desktop\reactApp>npm start

Mostrará el puerto que debemos abrir en el navegador. En nuestro caso eshttp://localhost:8001/Después de abrirlo, veremos la siguiente salida.

Pasos10-Generación de paquete

Finalmente, para generar el paquete, debe ejecutar el comando build en la línea de comandos, como se muestra a continuación:

C:\Users\w3codebox\Desktop\reactApp>npm run build

Esto generará un paquete de distribución en la carpeta actual, como se muestra a continuación.-codebox\Desktop>npx create-usar create

comando appAdemás de instalar webpack y babel, también puede instalar-codebox\Desktop>npx create-codebox\Desktop>cd　mycreate

N)?　sí1Paso-para instalar ReactJS de manera más sencilla.-codebox\Desktop>npx create-codebox\Desktop>cd　my

Instalar create-

C:\Users\w3Explorar el escritorio y usar el símbolo del sistema para instalar Create React App, como se muestra a continuación3codebox>cd C:\Users\w
C:\Users\w3codebox\Desktop\-codebox\Desktop>npx create-react-codebox\Desktop>cd　my

app　mi-Esto creará una carpeta llamada mi

N)?　sí2Paso-Carpeta app, e instale todos los archivos necesarios.

Eliminar todos los archivos de origen-Explorar el mi-

C:\Users\w3La carpeta src en la carpeta app y elimine todos los archivos, como se muestra a continuación-codebox\Desktop>cd　my/app
C:\Users\w3codebox\Desktop\my-src　*
C:\Users\w3codebox\Desktop\my-app\src>del*app\src\/, ¿estás seguro (S

N)?　sí3Paso-Agregar archivo

Añada un archivo con el nombre en la carpeta srcindex.cssyindex.jsarchivos de archivo-

C:\Users\w3codebox\Desktop\my-app\src>type　nul　>　index.css
C:\Users\w3codebox\Desktop\my-app\src>type　nul　>　index.js

Añada el siguiente código en el archivo index.js

import　React　from　'react';import　ReactDOM　from　'react-dom';import　'./index.css';

Pasos4-Ejecutar el proyecto

Finalmente, ejecute el proyecto utilizando el comando start.

npm start