Instalación de React (CDN)

React se puede descargar y usar directamente. El paquete de descarga también incluye muchos ejemplos de aprendizaje.

Este tutorial utiliza la versión 18.2.0 de React. En el sitio web oficial puedeshttps://reactjs.org/descargar la última versión.

Usa la librería React CDN de ByteDance, con la siguiente dirección:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Usa la librería React CDN de Staticfile CDN, con la siguiente dirección:

<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script> <!--No se recomienda su uso en entornos de producción.--> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

Direcciones CDN proporcionadas oficialmente:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!--No se recomienda su uso en entornos de producción.--> <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Nota:Usar Babel en el navegador para compilar JSX es muy ineficiente.

Ejemplo de uso

El siguiente ejemplo genera la salida: Hello, React!

Ejemplo de React

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script> </head> <body> <div id="example"></div> <script type="text/babel">// Componente React simple function App() { return<h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // Renderiza el componente React en el DOM root.render(<App />); </script> </body> </html> </script> </body> </html>

Pruébalo »

Análisis del ejemplo:

En el ejemplo incorporamos tres librerías: react.production.min.js, react-dom.production.min.js y babel.min.js:

  • react.min.js- La librería principal de React
  • react-dom.min.js- Proporciona las funcionalidades relacionadas con el DOM
  • babel.min.js- Babel puede convertir código ES6 a código ES5, de modo que podamos ejecutar código React en navegadores que aún no admiten ES6. Babel tiene soporte integrado para JSX. Al usar Babel junto con el paquete babel-sublime (package), el resaltado de sintaxis del código fuente puede elevarse a un nivel completamente nuevo.
//Componente React simple function App() { return <h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); //Renderizar componente React en el DOM root.render(<App />);

El código anterior inserta un encabezado h1 en el nodo con id="example".

const root = ReactDOM.createRoot(document.getElementById("example"));
  • Obtener el contenedor DOM：document.getElementById("example")Se obtiene un elemento DOM con id "example".
  • Crear el nodo raíz：ReactDOM.createRootEs un nuevo método introducido en React 18, utilizado para crear un nodo raíz de React. En este ejemplo,rootla variable almacena este nodo raíz.

Nota:

Si necesitamos usar JSX, el atributo type de la etiqueta <script> debe establecerse en text/babel.

Otras extensiones