ReactJS - Configuración del entorno

En este capítulo, le mostraremos cómo configurar un entorno para el desarrollo exitoso de React. Tenga en cuenta que hay muchos pasos involucrados, pero esto ayudará a acelerar el proceso de desarrollo más adelante. NecesitaremosNodeJS, así que si no lo tiene instalado, consulte el enlace de la siguiente tabla.

No Señor.	Software y descripción
1	NodeJS and NPM NodeJS es la plataforma necesaria para el desarrollo de ReactJS. Consulte nuestra configuración del entorno NodeJS .

Después de instalar con éxito NodeJS, podemos comenzar a instalar React usando npm. Puedes instalar ReactJS de dos formas

Usando webpack y babel.
Utilizando el create-react-app mando.

Instalación de ReactJS usando webpack y babel

Webpackes un agrupador de módulos (gestiona y carga módulos independientes). Toma módulos dependientes y los compila en un solo paquete (archivo). Puede usar este paquete mientras desarrolla aplicaciones usando la línea de comando o configurándolo usando el archivo webpack.config.

Babel es un compilador y transpilador de JavaScript. Se utiliza para convertir un código fuente en otro. Al usar esto, podrá usar las nuevas funciones de ES6 en su código, donde babel lo convierte en el antiguo ES5 simple que se puede ejecutar en todos los navegadores.

Paso 1: cree la carpeta raíz

Crea una carpeta con nombre reactApp en el escritorio para instalar todos los archivos necesarios, utilizando el comando mkdir.

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

Para crear cualquier módulo, es necesario generar el package.jsonarchivo. Por lo tanto, después de crear la carpeta, necesitamos crear unpackage.jsonarchivo. Para hacerlo, debe ejecutar elnpm init comando desde el símbolo del sistema.

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

Este comando solicita información sobre el módulo, como el nombre del paquete, la descripción, el autor, etc. Puede omitirlos usando la opción –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to 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"
}

Paso 2: instala React y react dom

Dado que nuestra tarea principal es instalar ReactJS, instálelo y sus paquetes dom, usando install react y react-domcomandos de npm respectivamente. Puede agregar los paquetes que instalamos, apackage.json archivo usando el --save opción.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

O puede instalarlos todos con un solo comando como:

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

Paso 3: instala el paquete web

Dado que estamos usando webpack para generar paquetes de instalación de paquetes web, webpack-dev-server y webpack-cli.

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

O puede instalarlos todos con un solo comando como:

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

Paso 4: instala babel

Instale babel y sus complementos babel-core, babel-loader, babel-preset-env, babel-preset-react y, html-webpack-plugin

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

O puede instalarlos todos con un solo comando como:

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

Paso 5: crea los archivos

Para completar la instalación, necesitamos crear ciertos archivos, a saber, index.html, App.js, main.js, webpack.config.js y,.babelrc. Puede crear estos archivos manualmente o utilizandocommand prompt.

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

Paso 6: configurar el compilador, el servidor y los cargadores

Abierto webpack-config.jsarchivo y agregue el siguiente código. Estamos configurando el punto de entrada del paquete web para que sea main.js. La ruta de salida es el lugar donde se entregará la aplicación empaquetada. También estamos configurando el servidor de desarrollo para8001Puerto. Puede elegir el puerto que desee.

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'
      })
   ]
}

Abre el package.json y borrar "test" "echo \"Error: no test specified\" && exit 1" dentro "scripts"objeto. Estamos eliminando esta línea ya que no haremos ninguna prueba en este tutorial. Agreguemos elstart y build comandos en su lugar.

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

Paso 7: index.html

Esto es solo HTML normal. Estamos poniendodiv id = "app" como elemento raíz de nuestra aplicación y agregando index_bundle.js script, que es nuestro archivo de aplicación incluido.

<!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>

Paso 8: App.jsx y main.js

Este es el primer componente de React. Explicaremos los componentes de React en profundidad en un capítulo posterior. Este componente se 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 renderizarlo en nuestra raíz. App elemento, 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'));

Note - Siempre que quiera usar algo, necesita importprimero. Si desea que el componente se pueda utilizar en otras partes de la aplicación, debeexport después de la creación e impórtelo en el archivo donde desea usarlo.

Crea un archivo con nombre .babelrc y copie el siguiente contenido.

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

Paso 9: ejecutar el servidor

La configuración está completa y podemos iniciar el servidor ejecutando el siguiente comando.

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

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

Paso 10: generación del paquete

Finalmente, para generar el paquete, debe ejecutar el comando de compilación en el símbolo del sistema como:

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

Esto generará el paquete en la carpeta actual como se muestra a continuación.

Usando el comando create-react-app

En lugar de usar webpack y babel, puede instalar ReactJS más simplemente instalando create-react-app.

Paso 1: instale la aplicación create-react-app

Navegue por el escritorio e instale la aplicación Create React usando el símbolo del sistema como se muestra a continuación:

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Esto creará una carpeta llamada my-app en el escritorio e instalará todos los archivos necesarios en ella.

Paso 2: elimina todos los archivos de origen

Navegue a través de la carpeta src en la carpeta my-app generada y elimine todos los archivos en ella como se muestra a continuación:

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Paso 3: agregar archivos

Agregar archivos con nombres index.css y index.js en la carpeta src como -

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

En el archivo index.js agregue el siguiente código

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

Paso 4: ejecutar el proyecto

Finalmente, ejecute el proyecto usando el comando de inicio.

npm start

↰ Previous page Next page ↱