Tutorial de ReactJS para principiantes: aprenda con un ejemplo paso a paso

¿Qué es ReactJS?

Reaccionar es una biblioteca JavaScript de código abierto para crear interfaces de usuario. Reaccionar es mantenido por Facebook y un comunity de desarrolladores individuales y empresas. Se utiliza ampliamente como base para la creación de sitios web y aplicaciones móviles de una sola página. 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. Sólo los cambios finales de DOM han later actualizado en el DOM de los navegadores.

Expresiones de JavaScript: Las expresiones JS se pueden usar en los archivos jsx usando curly brackets, 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 lo siguientewing imagen.

Usando ReactJS desde CDN

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>		

Reemplaza 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:

Para salida de producción

Nos meteremos en eltails del código en el próximo capítulo, veamos cómo funciona aquí con archivos CDN. Se dice que usar el script de Babel directamente no es una buena práctica, y los recién llegados pueden usarlo para aprender reaccionarjs por ahora. En producción, deberá instalar reaccionar 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 para reaccionarjs. Te explicaremos el details de ello 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>

Usando paquetes NPM

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 followwing mando:

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:

Resultado del proyecto First React

¿Qué es JSX?

JSX es una extensión de javascript. Es una plantilla de script 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 cambiaremos el código anterior para agregar expresiones. Las expresiones se utilizan dentro de rizado. brackets {} y se expanden durante el tiempo de ejecución. Las expresiones en reaccionar 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.

Expresiones en salida JSX

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:

Salida

¿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:

Salida de componentes en ReactJS

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.

Clase como salida de componente

¿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:

Estado en la salida de ReactJS

¿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 atributo details, y lo mismo se usa 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 la función de salida del componente

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;

The 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:

Accesorios para la salida del componente de clase

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 reaccionarjs tiene el siguientewing 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. Estamos expuestos a seguirwing métodos en el estado de montaje.

  • 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, un usuario interactúa con el dom y lo actualiza. Por ejemplo, ingresas algo en el texto.box, por lo que las propiedades del estado se actualizan.

Following son los métodos disponibles en 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.

Following Son los métodos disponibles en estado desmontado:

El componente willUnmount(): se llama cuando el componente se elimina o se destruyeyed.

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

Salida

En la consola del navegador obtienes:

Salida de la consola del navegador

Cuando el usuario ingresa el texto.box:

Salida de valores de usuario

En consola siguewing los mensajes se muestranyed:

Salida de consola

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 eventos onChange y onClick en el texto.box y botón enviar. Cuando el usuario ingresa dentro del textobox Se llama al evento onChange 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 Form from './form.jsx';

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

La salida en el navegador es la siguiente:

Trabajar con resultados de formularios

Paso 1) Ingresa tu nombre en el textobox:

Trabajar con resultados de formularios

  1. Haga clic en el botón enviar

Trabajar con resultados de formularios

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;

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 eventos onChange and onClick en el textobox y botón. Cuando el usuario ingresa dentro del textobox the 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:

Trabajar con resultados de eventos

Cuando un usuario ingresa el nombre:

Trabajar con resultados de eventos

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

Trabajar con resultados de eventos

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:

Trabajar con salida CSS en línea

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 recibe la clase details. Ahora probemos en el navegador.

Trabajar con salida CSS externa

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

Trabajar con salida CSS externa

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

Resumen

  • ReactJS es una biblioteca JavaScript de código abierto para crear la interfaz de usuario. Facebook lo mantiene y muchas empresas lo utilizan hoy en día 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)