Instalación de React (NPM)

Antes de comenzar, asegúrate de tener Node.js y npm instalados. Puedes verificar si están instalados con los siguientes comandos:

node -v
npm -v

Si tu sistema aún no es compatible con Node.js y NPM, puedes consultar nuestroTutorial de Node.js。

Recomendamos usar el sistema de módulos CommonJS en React, como browserify o webpack. Este tutorial usa webpack.

En China, el uso de npm es muy lento. Puedes usar la herramienta de línea de comandos cnpm (con soporte de compresión gzip) personalizada por Taobao en lugar del npm predeterminado:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

De esta manera, puedes usar el comando cnpm para instalar módulos:

$ cnpm install [name]

Puedes consultar más información en:http://npm.taobao.org/。

Uso de create-react-app para construir rápidamente un entorno de desarrollo de React

React proporciona una herramienta oficial, Create React App, para configurar rápidamente proyectos de React.

create-react-app proviene de Facebook. Con este comando podemos construir rápidamente un entorno de desarrollo de React sin necesidad de configuración.

El proyecto creado automáticamente por create-react-app está basado en Webpack + ES6.

Ejecuta el siguiente comando para crear el proyecto:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

También puedes usarnpxel comando para crearlo. npx es una herramienta incluida en npm 5.2.0 y versiones posteriores, que se utiliza para ejecutar paquetes npm locales o remotos:

npx create-react-app my-app

Abre en el navegadorhttp://localhost:3000/, el resultado se muestra en la siguiente figura:

La estructura de directorios del proyecto es la siguiente:

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (o  package-lock.json)

Descripción de directorios y archivos

node_modules/

Guarda todos los paquetes de dependencias del proyecto. Este directorio es generado automáticamente por npm o yarn y contiene todas las bibliotecas y módulos de terceros necesarios para ejecutar el proyecto.

public/

Guarda archivos estáticos. Webpack no procesará los archivos de este directorio.publicLos archivos del directorio se copiarán directamente al directorio de compilación.

  • favicon.ico: icono pequeño en la pestaña del navegador.
  • index.html: archivo de plantilla HTML. Los componentes de React se montarán en eldivelemento.
  • logo192.pngylogo512.png: iconos del logotipo de React en diferentes tamaños.
  • manifest.json: archivo de manifiesto de la aplicación web, utilizado para definir metadatos como el nombre, los iconos, etc. de la aplicación.
  • robots.txt: se utiliza para indicar a los motores de búsqueda qué páginas pueden ser rastreadas.

src/

Guarda el código fuente de la aplicación. Aquí es donde principalmente desarrollarás.

  • App.css：AppArchivo de estilos del componente.
  • App.js: archivo de componente principal, que define un componente básico de React.
  • App.test.js：AppArchivo de prueba del componente.
  • index.css: archivo de estilos globales.
  • index.js: archivo de entrada de la aplicación, responsable de renderizar los componentes de React en el DOM.
  • logo.svg: archivo SVG del logotipo de React.
  • reportWebVitals.js: archivo para monitoreo de rendimiento, que puede ayudarte a comprender y analizar el rendimiento de la aplicación.
  • setupTests.js: archivo para configurar el entorno de pruebas.

.gitignore

Lista los archivos y directorios que Git debería ignorar, por ejemplonode_modules/y el directorio de salida de compilación.

package.json

Archivo de configuración del proyecto, que contiene información del proyecto, scripts, dependencias, etc.

README.md

Archivo README del proyecto, que contiene información básica e instrucciones de uso.

yarn.lockopackage-lock.json

Archivo de bloqueo, que registra las versiones exactas de las dependencias para garantizar que las dependencias instaladas en diferentes entornos sean consistentes.

Intenta modificar el código del archivo src/App.js:

src/App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Bienvenido a Ejemplo</h2> </div> <p className="App-intro"> Puedes modificar en el archivo <code>src/App.js</code>. </p> </div> ); } } export default App;

Después de modificar, abre http://localhost:3000/ (generalmente se actualiza automáticamente). El resultado se muestra a continuación:

src/index.js es un archivo de entrada. Podemos intentar modificar directamente el código del archivo src/index.js:

Nota:En React 18, ReactDOM.render está obsoleto.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello {props.name}!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Renderiza el componente Hello y pasa la propiedad name
root.render(<Hello name="World" />);

En este momento, abre el navegadorhttp://localhost:3000/y se mostrará:

Hello World!

Crear tu primer componente

Puedes editarApp.jsel archivo para crear tu primer componente. A continuación se muestra un ejemplo sencillo: cambia elAppcomponente para que muestre "Hello, React!":

Ejemplo

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
      </header>
    </div>
  );
}

export default App;

Después de guardar el archivo, el navegador se actualizará automáticamente y deberías ver "Hello, React!" en la página.

Puedessrccrear más archivos de componentes en el directorio, por ejemplo crear unHello.jsarchivo:

Código del archivo Hello.js:

import React from 'react';

function Hello() {
  return <h1>Hello from a new component!</h1>;
}

export default Hello;

Luego enApp.jsimporta y usa este nuevo componente:

Ejemplo

import React from 'react';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Hello />
      </header>
    </div>
  );
}

export default App;

Después de guardar el archivo, el navegador se actualizará automáticamente y verás el contenido del nuevo componente.

Otras extensiones