React 入门基础一览

前端

2023-11-13 12:19:33

React 是一个用于构建用户界面的 JavaScript 库。它使开发人员能够创建交互式和可重用的组件，从而加快开发速度并提高代码的可维护性。

React 基础

组件

React 组件是UI的独立且可复用的块。它们可以组合在一起以构建更复杂的UI。每个组件都有自己的状态和行为。

状态

React 组件的状态是组件当前状态的数据。组件的状态是可变的，可以在组件的生命周期中改变。

JSX

JSX 是 JavaScript 的语法扩展，用于编写 React 组件。JSX 代码看起来像 HTML，但它实际上是 JavaScript。

虚拟 DOM

虚拟 DOM 是 React 使用的一种数据结构，它表示应用程序的当前状态。当组件的状态发生变化时，React 会创建一个新的虚拟 DOM，然后将新虚拟 DOM 与旧虚拟 DOM 进行比较，以确定需要在实际DOM中进行哪些更改。

React 入门指南

安装 React

要开始使用 React，首先需要安装它。可以使用npm或Yarn包管理器进行安装。

npm install --save react react-dom

创建一个 React 组件

创建一个 React 组件，需要创建一个 JavaScript 文件，并将其导出。组件可以是函数组件或类组件。

函数组件

import React from "react";

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default MyComponent;

类组件

import React from "react";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default MyComponent;

渲染一个 React 组件

要渲染一个 React 组件，需要使用ReactDOM.render()方法。该方法将组件渲染到指定的DOM元素。

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

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));