Cosas esenciales que debe saber como React Developer

ReactJS es una biblioteca JavaScript de código abierto que se utiliza para crear la interfaz de usuario impresionante para el front-end del sitio web. React JS también es famoso por el código declarativo, basado en componentes y Learn Once, Write Anywhere. En este artículo, sabemos lo esencial como desarrollador reciente que se detalla a continuación:

1. NPM: Npm es el administrador de paquetes predeterminado por javaScript NPM puede instalar todas las dependencias de un proyecto a través del archivo package.json. También puede actualizar y desinstalar paquetes. Tiene un cliente de línea de comandos. En el archivo, cada dependencia puede especificar un rango de versiones válidas utilizando el esquema de control de versiones semántico, lo que permite a los desarrolladores actualizar automáticamente sus paquetes.

2. Redux : Redux es una biblioteca de código abierto de JavaScript. La característica principal de Redux es que se usa en marcos como Angular js y React js para construir la increíble interfaz de usuario. Redux simplemente administra el estado de su aplicación, o en es decir, se utiliza para gestionar los datos de la aplicación. Redux también se llama contenedor de estado.

3. JSX: JSX significa JavaScript XML, JSX es una extensión simple para escribir código HTML en React, por lo que JSX se denomina lenguaje de plantillas. React Dom se representa como elemento. JSX utiliza llaves Curley { } para escribir elementos HTML. La regla seguida por JSX es la misma que la regla XML. JSX nos permite poner elementos HTML en DOM sin usar el método appendChild() o createElement().

4. API de contexto: la API de contexto en React Js se usa para pasar los accesorios del componente secundario almacenándolos en una tienda (similar a Redux) y usando estos accesorios de la tienda por componentes secundarios sin realmente pasarlos manualmente en cada nivel del árbol de componentes. Simplemente podemos decir que la API de contexto es el tipo de React Structure que se usa para intercambiar todos los detalles únicos.

5. Virtual DOM: Virtual Dom es una copia ligera del Dom real. Virtual Dom se usa en marcos web declarativos como React js, Vue Js, etc. La principal ventaja de usar el dom virtual es que es bastante rápido en comparación con el dom real. Si todos los objetos están en el DOM original, entonces hay un objeto en React Virtual Dom. Es algo parecido.

6 _ Accesorios: los accesorios representan propiedades. Los accesorios son un tipo especial de teclado. Se utiliza para pasar datos de un componente a otro, los accesorios no se pueden cambiar, no pueden cambiar la vida útil de un componente. Básicamente, el prop es una variable global o un tipo de objeto que se utiliza para pasar la información del componente. En React a veces necesitamos cambiar el contenido dentro del componente para ese caso usamos especialmente accesorios.

7. Estado: El estado es modificable. puede actualizar el estado según el requisito, lo que significa que el estado se puede actualizar en el futuro mientras que los accesorios no. podemos inicializar el estado en el constructor y luego llamar a setState cuando queramos cambiarlo. El estado es una variable que se presenta dentro del componente A la que no se puede acceder ni modificar fuera del componente.

8. Componentes en React JS:

1. Componentes funcionales: los componentes funcionales son algunos de los componentes más comunes que se encontrarán mientras se trabaja en React. Estas son simplemente funciones de JavaScript. Podemos crear un componente funcional para React escribiendo una función de JavaScript.
2. Componentes de clase: los componentes de clase son un poco más complejos que los componentes funcionales. Los componentes funcionales no son conscientes de los otros componentes de su programa, mientras que los componentes de clase pueden trabajar entre sí. Podemos pasar datos de un componente de clase a otros componentes de clase. Podemos usar clases de JavaScript ES6 para crear componentes basados ​​en clases en React.

9. Herramientas de depuración: la herramienta de depuración se utiliza para eliminar el error del código React js. Las principales herramientas utilizadas en la depuración son:

1. Herramientas para desarrolladores de Chrome.
2. Herramientas de desarrollo de reacción
3. Proxy web Carlos
4. puntos de ruptura
5. nucleido

A continuación se muestra el procedimiento Paso a paso en el que sabemos cómo crear una aplicación básica utilizando React js:

Paso 1: Crear Proyecto React

npx create-react-app MY-APP

Paso 2: Cambie su directorio e ingrese su gráfico de carpeta principal como

cd MY-APP

Paso 3: Ejecute el proyecto con el siguiente comando:

npm start

Estructura del proyecto: La estructura del proyecto es la siguiente:

Ahora veamos el funcionamiento de la aplicación de reacción usando el ejemplo.

Ejemplo: en este ejemplo, veremos cómo creamos una aplicación de contador simple en reaccionar en la que podemos establecer el valor del contador usando el manejo de estados y eventos.

import React, { useState } from "react";
  
// Importing app.css is css file to add styling
import "./App.css";
  
const App = () => {
  // Counter is a state initialized to 0
  const [counter, setCounter] = useState(0);
  
  // Function is called everytime increment button is clicked
  const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1);
  };
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented
    setCounter(counter - 1);
  };
  
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        fontSize: "300%",
        position: "absolute",
        width: "100%",
        height: "100%",
        top: "-15%",
      }}
    >
      Counter App
      <div
        style={{
          fontSize: "120%",
          position: "relative",
          top: "10vh",
        }}
      >
        {counter}
      </div>
      <div className="buttons">
        <button
          style={{
            fontSize: "60%",
            position: "relative",
            top: "20vh",
            marginRight: "5px",
            backgroundColor: "green",
            borderRadius: "8%",
            color: "white",
          }}
          onClick={handleClick1}
        >
          Increment
        </button>
        <button
          style={{
            fontSize: "60%",
            position: "relative",
            top: "20vh",
            marginLeft: "5px",
            backgroundColor: "red",
            borderRadius: "8%",
            color: "white",
          }}
          onClick={handleClick2}
        >
          Decrement
        </button>
      </div>
    </div>
  );
};
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: