React.js 由 Facebook 开发和维护，已成为用于构建用户界面（尤其是单页应用程序 (SPA)）的最流行的 JavaScript 库之一。 React 以其灵活性、高效和易用性而闻名，拥有庞大的社区和丰富的资源供各个级别的开发人员使用。无论您是初学者还是希望将 React 添加到您的技能组合中的经验丰富的开发人员，本教程都将指导您了解 React.js 的基础知识。

1.什么是 React.js？

React.js 是一个开源 JavaScript 库，用于构建用户界面，特别是对于需要快速、交互式用户体验的单页应用程序。 React 允许开发人员创建大型 Web 应用程序，这些应用程序可以有效地更新和渲染以响应数据更改。它是基于组件的，这意味着 UI 被分成小的、可重用的部分，称为组件。

2.设置你的 React 环境

在开始编码之前，您需要设置开发环境。请按照下列步骤操作：

第 1 步：安装 Node.js 和 npm

• Node.js：React 需要 Node.js 作为其构建工具。
• npm：节点包管理器（npm）用于安装库和包。

您可以从官网下载并安装Node.js。 npm 与 Node.js 捆绑在一起。

第2步：安装Create React App

Facebook 创建了一个名为 Create React App 的工具，可以帮助您快速高效地建立新的 React 项目。在终端中运行以下命令：

npx create-react-app my-app

此命令创建一个名为 my-app 的新目录，其中包含启动 React 项目所需的所有文件和依赖项。

第3步：启动开发服务器

导航到您的项目目录并启动开发服务器：

cd my-app
npm start

您的新 React 应用程序现在应该在 http://localhost:3000 上运行。

3.了解 React 组件

React 就是组件。 React 中的组件是一个独立的模块，它呈现一些输出，通常是 HTML。组件可以定义为功能组件或类组件.

功能组件

功能组件是一个返回 HTML 的简单 JavaScript 函数（使用 JSX）。

例子：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

类组件

类组件是定义组件的更强大的方式，并允许您管理本地状态和生命周期方法。

例子：

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4. JSX – JavaScript XML

JSX 是 JavaScript 的语法扩展，看起来与 HTML 类似。它允许您直接在 JavaScript 中编写 HTML，然后 React 将其转换为真正的 DOM 元素。

例子：

const element = 
Hello, world!
;

JSX 使 UI 结构的编写和可视化变得更加容易。然而，在幕后，JSX 被转换为 React.createElement() 调用。

5.状态和道具

道具

Props（“属性”的缩写）用于将数据从一个组件传递到另一个组件。它们是不可变的，这意味着它们不能被接收组件修改。

例子：

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

状态

State 与 props 类似，但它是在组件内管理的，并且可以随着时间的推移而改变。状态通常用于组件需要跟踪的数据，例如用户输入。

例子：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6。处理事件

在 React 中处理事件类似于在 DOM 元素中处理事件。但是，存在一些语法差异：

• React 事件使用驼峰式命名，而不是小写。
• 使用 JSX，您可以传递一个函数作为事件处理程序，而不是一个字符串。

例子：

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7.生命周期方法

React 中的类组件具有特殊的生命周期方法，允许您在组件生命周期中的特定时间运行代码。其中包括：

• componentDidMount：组件挂载后调用。
• componentDidUpdate：组件更新后调用。
• componentWillUnmount：在组件卸载之前调用。

例子：

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8.条件渲染

在 React 中，您可以根据组件的状态创建不同的视图。

例子：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9.列表和键

当你需要显示数据列表时，React 可以将每个项目渲染为一个组件。为每个项目提供一个唯一的“key”属性非常重要，以帮助 React 识别哪些项目已更改。

例子：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10.反应钩子

React Hooks 允许您在功能组件中使用状态和其他 React 功能。一些最常用的钩子包括：

• useState：允许您向功能组件添加状态。
• useEffect：允许您在函数组件中执行副作用。
• useContext：提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递 props。

使用状态示例：

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11。构建和部署 React 应用程序

一旦您的应用程序准备就绪，您就可以构建它以用于生产。使用以下命令：

npm run build

这将在构建文件夹中创建 React 应用程序的优化生产构建。然后您可以将其部署到任何 Web 服务器。

结论

React.js 是构建现代 Web 应用程序的强大工具。通过了解组件、状态管理、事件处理和挂钩，您可以创建动态和交互式用户界面。本教程涵盖了基础知识，但 React 的生态系统提供了更多内容，包括使用 Redux 进行高级状态管理、使用 React Router 进行路由以及使用 Next.js 进行服务器端渲染。

当您继续使用 React 的旅程时，请记住利用丰富的在线资源，包括官方 React 文档、社区论坛和教程。快乐编码！