作为 React 开发人员需要了解的基本知识

ReactJS 是一个开源 JavaScript 库，用于为网站前端构建 Awesome 用户界面。 React JS 还以声明式、基于组件和 Learn Once, Write Anywhere 在代码中而闻名。在本文中，我们知道作为最近开发人员的基本内容如下：

1 、npm ： npm是javaScript默认的包管理器，npm可以通过package.json文件安装一个项目的所有依赖。它还可以更新和卸载软件包。它有一个命令行客户端。在该文件中，每个依赖项都可以使用语义版本控制方案指定一系列有效版本，从而允许开发人员自动更新他们的包

2. Redux ： Redux 是一个开源的 JavaScript 库。Redux 的主要特点是，它被用于 Angular js 和 React js 等框架中，用于构建令人敬畏的用户界面 Redux 只是管理应用程序的状态，或者在换句话说，它用于管理应用程序的数据。 Redux 也称为状态容器。

3. JSX： JSX 代表 JavaScript XML，JSX 是在 React 中编写 HTML 代码的简单扩展，所以 JSX 被称为模板语言 React Dom 是渲染元素。 JSX 使用花括号 {} 来编写 HTML 元素。 JSX 遵循的规则与 XML 规则相同。JSX 允许我们将 HTML 元素放入 DOM 中，而无需使用 appendChild() 或 createElement() 方法。

4. Context API： React Js 中的 Context API 用于从子组件传递 props，方法是将 props 存储在 store 中（类似于 Redux）并由子组件使用 store 中的这些 props 而无需实际传递它们在组件树的每个级别手动。简单地说，上下文 API 是一种用于交换所有独特细节的 React Structure 类型。

5.虚拟DOM： Virtual Dom 是实际 Dom 的轻量级副本。 Virtual Dom 用于声明式 Web 框架，例如 React js、Vue Js 等，使用 virtual dom 的主要优点是与实际 dom 相比速度非常快。如果每个对象都在原始 DOM 中，那么 React Virtual Dom 中就有一个对象。它有点相似。

6 .道具：道具代表属性。 props 是一种特殊类型的键盘，用于将数据从一个组件传递到另一个组件，prop 是不可更改的，它们不能改变组件的生命周期。基本上，prop 是一个全局变量或一种对象，用于传递组件的信息。在 React 中，有时我们需要更改组件内部的内容，以应对我们特别使用 props 的情况。

7.状态：状态是多变的。您可以根据要求更新状态，这意味着将来可以更新状态，而道具不能。我们可以在构造函数中初始化状态，然后当我们想改变它的时候调用setState。状态是呈现在组件内部的变量，不能在组件外部访问或修改。

8. React JS 中的组件：

功能组件：功能组件是在 React 中工作时会遇到的一些更常见的组件。这些只是 JavaScript 函数。我们可以通过编写 JavaScript函数来为 React 创建一个函数式组件。
类组件：类组件比功能组件稍微复杂一些。功能组件不知道程序中的其他组件，而类组件可以相互协作。我们可以将数据从一个类组件传递到其他类组件。我们可以使用 JavaScript ES6 类在 React 中创建基于类的组件。

9. 调试器工具：调试器工具用于去除 React js 代码中的 bug。调试中使用的主要顶级工具是：

Chrome 开发者工具。
反应开发者工具
查尔斯网络代理
断点
核素

以下是我们知道如何使用 React js 创建基本应用程序的 Steps to Step 过程：

第 1 步：创建 React 项目

npx create-react-app MY-APP

第 2 步：更改您的目录并输入您的主文件夹图表为

cd MY-APP

第 3 步：通过以下命令运行项目：

npm start

项目结构：项目结构如下：

现在让我们使用示例来看看 React 应用程序的工作原理。

示例：在此示例中，我们将看到如何在 react 中创建一个简单的计数器应用程序，在该应用程序中，我们可以使用状态和事件处理来设置计数器的值。

App.js

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 (
    
      Counter App
      
        {counter}
      
      
        
        
      
    
  );
};
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：