Tutorial de ReactJS para principiantes

¿Qué es ReactJS?

Reaccionar es una interfaz de código abierto JavaBiblioteca de scripts para construir interfaces de usuario. Reaccionar Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas. Se utiliza ampliamente como base para crear sitios web de una sola página y aplicaciones móviles. Es muy fácil de usar y permite a los usuarios crear componentes de interfaz de usuario reutilizables.

Características de ReactJS

JSX: JSX es una extensión de javascript. Aunque no es obligatorio usar JSX en reaccionar, es una de las buenas características y fácil de usar.

Componentes: Los componentes son como funciones puras de JavaScript que ayudan a facilitar el código al dividir la lógica en código independiente reutilizable. Podemos usar componentes como funciones y componentes como clases. Los componentes también tienen un estado, accesorios que facilitan la vida. Dentro de una clase se mantiene el estado de cada uno de los props.

DOM virtuales: React crea un DOM virtual, es decir, un caché de estructura de datos en memoria. Solo los cambios finales del DOM se actualizan posteriormente en el DOM del navegador.

Javascript Expresiones: Las expresiones JS se pueden utilizar en los archivos jsx usando llaves, por ejemplo {}.

Ventajas de ReactJS

A continuación se detallan las ventajas y ventajas importantes de utilizar ReactJS:

ReactJS utiliza dom virtual que utiliza caché de estructura de datos en memoria, y solo los cambios finales se actualizan en el dom de los navegadores. Esto hace que la aplicación sea más rápida.
Puede crear componentes de su elección utilizando la función de componente de reacción. Los componentes se pueden reutilizar y también son útiles en el mantenimiento del código.
Reactjs es una biblioteca de JavaScript de código abierto, por lo que es fácil empezar.
ReactJS se ha vuelto muy popular en poco tiempo y lo mantienen Facebook e Instagram. Es utilizado por muchas empresas famosas como Apple, Netflix, etc.
Facebook mantiene ReactJS, la biblioteca, por lo que está bien mantenida y actualizada.
ReactJS se puede utilizar para desarrollar una interfaz de usuario enriquecida para aplicaciones móviles y de escritorio.
Fácil de depurar y probar ya que la mayor parte de la codificación se realiza en Javascript en lugar de en HTML.

Desventajas de ReactJS

A continuación, se muestran las desventajas/desventajas de usar ReactJS:

La mayor parte del código está escrito en JSX, es decir, HTML y CSS son parte de JavaScript, lo que puede resultar bastante confuso ya que la mayoría de los otros marcos prefieren mantener HTML separado del código JavaScript.
El tamaño del archivo de ReactJS es grande.

Usando ReactJS desde CDN

Para comenzar a trabajar con reaccionar, primero debemos instalar reaccionarjs. Puede comenzar a usar reaccionarjs fácilmente utilizando los archivos javascript CDN, como se muestra a continuación.

Vaya al sitio oficial de reactjs para obtener los enlaces CDN, es decir, https://reactjs.org/docs/cdn-links.html y obtendrá los archivos necesarios para explicar la siguiente imagen.

Para desarrolladores

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

para pinchar

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Reemplace versión con la última versión de reacción tanto para reaccionar-development.js como para reaccionar-dom.developement.js. Puede alojar los archivos por su cuenta para comenzar a trabajar con reaccionarjs.

En caso de que planee utilizar los archivos CDN, asegúrese de mantener el atributo de origen cruzado para evitar problemas entre dominios. El código Reactjs no se puede ejecutar directamente en el navegador y debe transpirarse usando Babel a javascript antes de ejecutarse en el navegador.

Aquí está el script BabelJS que se puede utilizar:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Aquí está el ejemplo funcional de ReactJS usando archivos cdn y script babeljs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Salida:

Entraremos en detalles sobre el código en el próximo capítulo. Veamos cómo funciona aquí con los archivos CDN. Se dice que usar el script de Babel directamente no es una buena práctica y que los principiantes pueden usarlo para aprender ReactJS por ahora. En producción, tendrás que instalar React usando el paquete npm.

Usando paquetes NPM

Asegúrate de tener instalado nodejs. Si no está instalado, consulte este tutorial para nodejs (https://www.guru99.com/node-js-tutorial.html) instalación.

Una vez que tengas nodejs instalado, crea una carpeta reaccionarproj/.

Para comenzar con la configuración del proyecto, ejecute el comando npm init.

Así es como se verá la estructura de carpetas:

reactproj\
package.json

Ahora instalaremos los paquetes que necesitamos.

Aquí está la lista de paquetes para reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Abra el símbolo del sistema y ejecute los comandos anteriores dentro de la carpeta reactproj/.

Crea una carpeta src / donde vendrá todo el código js en esa carpeta. Todo el código para el proyecto reactjs estará disponible en la carpeta src/. Cree un archivo index.js y agregue import reaccionar y reaccionar-dom, como se muestra a continuación.

index.js

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

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Hemos devuelto el código básico de reactjs. Explicaremos los detalles en el próximo capítulo. Queremos mostrar Hola, de los tutoriales de Guru99. y lo mismo se le da al elemento dom con id "root". Se toma del archivo index.html, que es el archivo de inicio, como se muestra a continuación.

Cree una carpeta public/ y agregue index.html como se muestra a continuación

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

El paquete reaccionar-scripts se encargará de compilar el código e iniciar el servidor para mostrar el archivo html, es decir, index.html. Debe agregar el comando en package.json que se encargará de usar scripts de reacción para compilar el código e iniciar el servidor como se muestra a continuación:

 "scripts": {
    "start": "react-scripts start" 
  }

Después de instalar todos los paquetes y agregar el comando anterior, el paquete.json final es el siguiente:

Paquete.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Para comenzar a probar reaccionarjs ejecute el comando

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

Abrirá el navegador con la URL. http://localhost:3000/ como se muestra a continuación:

public / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

También utilizaremos el mismo proceso para ejecutar los archivos javascript en los próximos capítulos. Agregue todos sus archivos js y .jsx en la carpeta src/. La estructura del archivo será la siguiente:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Cómo crear la configuración de su primer proyecto React

Aquí hay una guía paso a paso en este Tutorial de ReactJS para comenzar con la primera aplicación de reacción.

Paso 1) Importe los paquetes de reacción.
1. Para comenzar con ReactJS, primero debemos importar los paquetes de reacción de la siguiente manera.

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

2. Guarde el archivo como index.js en la carpeta src/

Paso 2) Escribe código simple.
Escribiremos un código simple en este tutorial React JS, en el que mostraremos el mensaje "¡Hola, de los tutoriales de Guru99!"

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.renderizar agregará la etiqueta al elemento con id root. Aquí está el archivo html que tenemos:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Paso 3) Compile el código.

A continuación, en este tutorial de React.js, debemos compilar el código para obtener el resultado en el navegador.

Aquí está la estructura de carpetas:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Hemos agregado los comandos para compilar el archivo final en package.json de la siguiente manera:

"scripts": {
    "start": "react-scripts start"
  },

Para compilar el archivo final, ejecute el siguiente comando:

npm run start

Cuando ejecute el comando anterior, compilará los archivos y le notificará si hay algún error; si todo se ve bien, abrirá el navegador y ejecutará el archivo index.html en http://localhost:3000/index.html

Comando: npm ejecutar inicio:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Paso 4) Verifique la salida.
La dirección URL http://localhost:3000 se abrirá en el navegador una vez que el código esté compilado como se muestra a continuación:

¿Qué es JSX?

JSX es una extensión de javascript. Es un script de plantilla donde tendrás el poder de usar HTML y Javascript juntos.

A continuación se muestra un ejemplo sencillo de un código JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

¿Por qué necesitamos JSX en React?

Para una interfaz de usuario, necesitamos HTML, y cada elemento en el dom tendrá eventos que manejar, cambios de estado, etc.

En el caso de React, nos permite hacer uso de Html y javascript en un mismo archivo y encargarnos de los cambios de estado en el dom de manera eficiente.

Expresiones en JSX

A continuación se muestra un ejemplo sencillo de cómo utilizar expresiones en JSX.

En ejemplos anteriores de ReactJS, habíamos escrito algo como:

index.js

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

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Ahora modificaremos el código anterior para agregar expresiones. Las expresiones se utilizan entre llaves {} y se expanden durante el tiempo de ejecución. Las expresiones en React son las mismas que las expresiones de JavaScript.

index.js

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

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Probemos ahora lo mismo en el navegador.

Puede ver que la expresión {display} no se reemplaza. React no sabe qué hacer cuando se usa una expresión dentro del archivo .js.

Ahora agreguemos cambios y creemos un archivo .jsx, como se muestra a continuación:

prueba.jsx

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

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Hemos agregado el código requerido y usaremos el archivo text.jsx en index.js. Queremos que h1etiqueta variable que se utilizará dentro de script.js, por lo que la misma se exporta como se muestra arriba en test.jsx

Aquí está el código modificado en index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Para usar test.jsx en index.js, primero debemos importarlo como se muestra a continuación:

import h1tag from './test.jsx';

Podemos usar h1tag ahora en ReactDOM.render como se muestra a continuación:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Aquí está el resultado cuando verificamos lo mismo en el navegador:

¿Qué son los componentes en ReactJS?

Los componentes son como funciones puras de JavaScript que ayudan a facilitar el código al dividir la lógica en código independiente reutilizable.

Componentes como funciones

prueba.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

Hemos creado una función llamada Hola que devolvió la etiqueta h1 como se muestra arriba. El nombre de la función actúa como un elemento, como se muestra a continuación:

const Hello_comp = <Hello />;
export default Hello_comp;

El componente Hola se utiliza como una etiqueta HTML, es decir, y asignado a Hola_comp variable y la misma se exporta usando export.

Usemos ahora este componente en el archivo index.js como se muestra a continuación:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Aquí está el resultado en el navegador:

Clase como componente

Aquí hay un ejemplo de ReactJS que usa una clase como componente.

prueba.jsx

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

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Podemos usar el componente Hello en el archivo index.js de la siguiente manera:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

El componente Hola se utiliza como una etiqueta HTML, es decir, .

Aquí está el resultado del mismo.

¿Qué es un estado en ReactJS?

Un estado es un objeto javascript similar a los accesorios que tienen datos para usarse con el renderizado de reactjs. Los datos de estado son un objeto privado y se utilizan dentro de los componentes dentro de una clase.

Ejemplo de Estado

Aquí hay un ejemplo práctico sobre cómo usar el estado dentro de una clase.

prueba.jsx

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Esto es lo que obtenemos cuando lo probamos en el navegador:

¿Qué son los accesorios en ReactJS?

Los accesorios son propiedades que se utilizarán dentro de un componente. Actúan como objetos globales o variables que se pueden utilizar dentro del Componente.

Accesorios para el componente funcional

A continuación se muestra un ejemplo de cómo pasar accesorios a un componente de función.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Como se muestra arriba, hemos agregado MSG atributo al componente . Se puede acceder al mismo como accesorios dentro de la función Hola, que es un objeto que tendrá la MSG detalles del atributo, y el mismo se utiliza como expresión.

El componente se utiliza en index.js de la siguiente manera:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Aquí está el resultado en el navegador:

Accesorios para el componente de clase

Para acceder a los props en una clase podemos hacerlo de la siguiente manera:

prueba.jsx

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

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

El proceso de MSG El atributo se pasa al componente en index.js de la siguiente manera:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Este es el resultado en el navegador:

También verifique: Tutorial de AngularJS para principiantes: aprenda AngularJS paso a paso

Ciclo de vida de un componente

El ciclo de vida de un componente se divide en etapas de Inicialización, Montaje, Actualización y Desmontaje.

Aquí hay una explicación detallada sobre cada componente.

Un componente en reactjs tiene las siguientes etapas:

Inicialización: Esta es la primera etapa del ciclo de vida del componente.

Aquí tendrá los accesorios predeterminados y el estado en el nivel inicial.

Montaje:En esta fase, el componente se renderiza dentro del DOM. En el estado de montaje, conocemos los siguientes métodos.

componenteDidMount(): esto también se llama cuando el componente se acaba de agregar al dom.

render(): Tienes este método para todos los componentes creados. Devuelve el nodo HTML.

Actualizar:En este estado, el usuario interactúa con el DOM y lo actualiza. Por ejemplo, si ingresa algo en el cuadro de texto, se actualizan las propiedades del estado.

Los siguientes son los métodos disponibles en el estado de actualización:

deberíaComponentUpdate(): se llama cuando se actualiza el componente.

componenteDidUpdate(): después de actualizar el componente.

Desmontaje: este estado entra en escena cuando el Componente no es requerido o eliminado.

Los siguientes son los métodos disponibles en el estado de desmontaje:

Componente willUnmount(): se llama cuando el componente se elimina o se destruye.

Ejemplo de trabajo

A continuación se muestra un ejemplo práctico que muestra los métodos llamados en cada estado.

Ejemplo: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Cuando verificas la salida en el navegador

En la consola del navegador obtienes:

Cuando el usuario ingresa en el cuadro de texto:

En la consola se muestran los siguientes mensajes:

Trabajar con formularios

En reaccionarjs, los elementos de entrada HTML como , y tienen su propio estado y deben actualizarse cuando el usuario interactúa utilizando el método setState().

En este capítulo, veremos cómo trabajar con formularios en reaccionarjs.

Aquí hay un ejemplo de trabajo:

formulario.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Para los campos de entrada, necesitamos mantener el estado, por lo que reaccionar proporciona un método especial llamado establecer estado, lo que ayuda a mantener el estado cada vez que hay un cambio.

Hemos utilizado los eventos onChange y onClick en el cuadro de texto y el botón de envío. Cuando el usuario ingresa dentro del cuadro de texto, se llama al evento onChange y el campo de nombre dentro del objeto de estado se actualiza como se muestra a continuación:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

La salida en el navegador es la siguiente:

Paso 1) Ingrese su nombre en el cuadro de texto:

Haga clic en el botón enviar

Trabajar con eventos en ReactJS

Trabajar con eventos en reaccionarjs es lo mismo que lo habría hecho en javascript. Puede utilizar todos los controladores de eventos que se utilizan en javascript. El método setState() se utiliza para actualizar el estado cuando el usuario interactúa con cualquier elemento HTML.

Aquí hay un ejemplo práctico de cómo usar eventos en reaccionarjs.

eventos.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Hemos utilizado eventos onChange y onClick en el cuadro de texto y el botón. Cuando el usuario ingresa dentro del cuadro de texto, onChange Se llama al evento y el campo de nombre dentro del estado del objeto de estado se actualiza como se muestra a continuación:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Aquí está el resultado en el navegador:

Cuando un usuario ingresa el nombre:

Cuando el usuario hace clic en el botón Haga clic aquí:

Trabajar con CSS en línea en ReactJS

Veremos un ejemplo funcional para comprender el funcionamiento de CSS en línea en Reactjs.

agregarestilo.jsx

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

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Agregué color: estilo "rojo" a la etiqueta h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

La salida en el navegador es la siguiente:

Puede crear un objeto de estilo que desee en el elemento y usar una expresión para agregar estilo, como se muestra en el ejemplo anterior.

Trabajar con CSS externo en ReactJS

Creemos un CSS externo, para eso creemos una carpeta css/ y agreguemos style.css en ella.

style.css

.h1tag {
color:red;
}

Agregue style.css a su archivo index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Ahora agreguemos la clase a la etiqueta h1 en el archivo .jsx.

agregarestilo.jsx

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

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

El atributo className contiene los detalles de la clase. Ahora, hagamos una prueba en el navegador.

Esto es lo que ves cuando inspeccionas la etiqueta h1 en el navegador:

Puede ver que la clase = "h1tag" se agregó correctamente a la etiqueta h1.

Resumen

ReactJS es una interfaz de código abierto JavaBiblioteca de scripts para crear la interfaz de usuario. Facebook la mantiene y muchas empresas la utilizan actualmente para el desarrollo de la interfaz de usuario.
Las características principales de ReactJS incluyen JSX, componentes (componentes funcionales y componentes basados en clases), el ciclo de vida de un componente, accesorios y soporte de estado para un componente, trabajando con expresiones de JavaScript.
La configuración del proyecto de ReactJS se explica utilizando archivos CDN y también usando paquetes npm para construir el proyecto.
JSX es una extensión de javascript. Es una plantilla de script donde tendrás el poder de usar HTML y JavaScript juntos.
Los componentes son como funciones puras de JavaScript que ayudan a facilitar el código al dividir la lógica en código independiente reutilizable.
Un estado es un objeto javascript similar a los accesorios que tienen datos para usarse con el renderizado de reactjs. Los datos de estado son un objeto privado y se utilizan dentro de los componentes dentro de una clase.
Los accesorios son propiedades que se utilizarán dentro de un componente.
El ciclo de vida de un componente se divide en etapas de Inicialización, Montaje, Actualización y Desmontaje.
En reaccionarjs, los elementos de entrada html como , y tienen su propio estado y deben actualizarse cuando el usuario interactúa utilizando el método setState().
Trabajar con eventos en reaccionarjs es lo mismo que lo habría hecho en javascript. Puede utilizar todos los controladores de eventos que se utilizan en javascript. El método setState() se utiliza para actualizar el estado cuando el usuario interactúa con cualquier elemento HTML.
ReactJS le permite trabajar con CSS externo y CSS en línea usando expresiones de JavaScript.

También verifique: Las 70 preguntas y respuestas principales de la entrevista de React (actualizado)

Tutorial de ReactJS para principiantes

¿Qué es ReactJS?

Características de ReactJS

Ventajas de ReactJS

Desventajas de ReactJS

Usando ReactJS desde CDN

Para desarrolladores

para pinchar

Usando paquetes NPM

Cómo crear la configuración de su primer proyecto React

¿Qué es JSX?

¿Por qué necesitamos JSX en React?

Expresiones en JSX

¿Qué son los componentes en ReactJS?

Componentes como funciones

Clase como componente

¿Qué es un estado en ReactJS?

Ejemplo de Estado

¿Qué son los accesorios en ReactJS?

Accesorios para el componente funcional

Accesorios para el componente de clase

Ciclo de vida de un componente

Ejemplo de trabajo

Trabajar con formularios

Trabajar con eventos en ReactJS

Trabajar con CSS en línea en ReactJS

Trabajar con CSS externo en ReactJS

Resumen

Resumir este post con:

Regístrate para recibir el boletín

¿Qué es ReactJS?

Características de ReactJS

Ventajas de ReactJS

Desventajas de ReactJS

Usando ReactJS desde CDN

Para desarrolladores

para pinchar

ARTÍCULOS RELACIONADOS

Usando paquetes NPM

Cómo crear la configuración de su primer proyecto React

¿Qué es JSX?

¿Por qué necesitamos JSX en React?

Expresiones en JSX

¿Qué son los componentes en ReactJS?

Componentes como funciones

Clase como componente

¿Qué es un estado en ReactJS?

Ejemplo de Estado

¿Qué son los accesorios en ReactJS?

Accesorios para el componente funcional

Accesorios para el componente de clase

Ciclo de vida de un componente

Ejemplo de trabajo

Trabajar con formularios

Trabajar con eventos en ReactJS

Trabajar con CSS en línea en ReactJS

Trabajar con CSS externo en ReactJS

Resumen

Resumir este post con:

Regístrate para recibir el boletín