React.js入门学习第一篇

下面为大家详细讲解“React.js入门学习第一篇”的完整攻略。

简介

React.js是Facebook出品的一款用于构建用户界面的JavaScript库。其特别之处在于采用组件化方式构建用户界面，将整个应用程序拆分为多个组件，进行单独开发、测试和维护，有利于提高代码的模块化程度、可维护性和重用性。

前置知识

在学习React.js之前，需要掌握以下的技能：

• HTML/CSS基础
• JavaScript基础
• ES6语法（不是强制要求，但是建议了解）

入门步骤

1. 安装Node.js

官网下载Node.js安装包，按照安装向导进行安装。

1. 安装React.js

打开终端，输入以下命令：

npm install -g create-react-app

create-react-app是用于创建React.js项目的命令行工具。上述命令会将其全局安装。

1. 创建React.js项目

在终端中执行以下命令：

create-react-app my-app

上述命令会在当前目录下创建名为my-app的React.js项目，并自动安装项目所需的依赖包。

1. 运行示例应用

在终端中执行以下命令：

cd my-app
npm start

上述命令会启动React.js项目，并在浏览器中打开一个示例应用程序。通过这个示例应用程序可以了解到React.js的基本语法和用法。

示例说明

示例一：计数器组件

计数器组件是一个很常见的简单组件示例，它包含一个按钮和一个计数器。点击按钮可以使计数器的数值加一。

下面是计数器组件的代码：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>计数器数值：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

export default Counter;

该代码使用了React.js的函数式组件，使用useState钩子函数来定义计数器的数值和更新计数器的函数。

示例二：TODO列表组件

TODO列表是另一个常见的组件示例，它包含一个输入框和一个列表，用于输入和显示待办事项。

下面是TODO列表组件的代码：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  }

  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue.trim()]);
      setInputValue('');
    }
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>添加</button>
      <ul>
        {
          todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))
        }
      </ul>
    </div>
  );
}

export default TodoList;

该代码同样使用了React.js的函数式组件，使用useState钩子函数来定义待办事项数组和输入框的值。输入框的值变化时，会触发handleInputChange函数更新输入框的值。点击“添加”按钮时，会将输入框的内容添加到待办事项数组中，并清空输入框。使用map函数遍历待办事项数组，渲染每个待办事项。需要注意的是，在渲染TODO列表时，需要为每个待办事项定义一个唯一的key属性，以便React.js正确地跟踪每个元素的变化。