ReactJS教程

ReactJS是一个由Facebook开源的JavaScript库，用于构建用户界面。在本教程中，我们将学习如何使用ReactJS构建一个简单的Todo应用程序。

准备工作

在开始之前，您需要安装一些必要的东西:

• Node.js
• npm

ReactJS是用Node.js编写的，所以我们需要安装它来运行我们的应用程序。npm是Node包管理器，使我们能够轻松地安装和管理我们的依赖关系。

安装React

我们可以使用npm来安装React。我们需要安装react和react-dom模块。在终端中，运行以下命令:

npm install --save react react-dom

这将安装react和react-dom模块以及它们的依赖项。

编写代码

我们将使用jsx语法编写我们的React代码，jsx是一种JavaScript的语言扩展，它允许我们在JavaScript中编写类似HTML的语法。

我们将创建一个Todo组件来渲染我们的应用程序。下面是我们的组件代码:

import React from 'react';

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>Todo List</h3>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">What needs to be done?</label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>Add #{this.state.items.length + 1}</button>
        </form>
        <TodoList items={this.state.items} />
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

export default Todo;

以上代码实现一个简单的Todo List, 包括添加todo, 删除todo, 过滤todo等功能。

渲染代码

我们需要将我们的React代码渲染到HTML中。我们可以使用ReactDOM模块来执行此操作。添加以下代码到您的index.js文件中：

import React from 'react';
import ReactDOM from 'react-dom';
import Todo from './Todo';

ReactDOM.render(<Todo />, document.getElementById('root'));

在本教程中，我们在div#root元素处呈现我们的Todo组件。

执行代码

现在我们已经编写了我们的React代码并在HTML中呈现它，让我们在终端中运行以下命令:

npm start

这将运行我们的应用程序并在浏览器中打开它。

恭喜，您已经构建了一个简单的React应用程序！

总结

在本教程中，我们学习了以下内容:

• 安装React和React-DOM模块
• 编写React代码
• 渲染React代码
• 运行React应用程序

希望这个教程可以帮助你入门React！