从零开始：React脚本编程入门与实战教程

引言

React作为当今最流行的前端JavaScript库之一，已经被广泛应用于各种大型项目的开发中。React脚本编程，即使用JavaScript编写React组件和逻辑，是React开发的核心。本教程将从零开始，逐步深入讲解React脚本编程的基础知识，并通过实战项目帮助读者掌握React脚本编程的技能。

第一部分：React基础知识

1.1 React简介

React是由Facebook开发的一个用于构建用户界面的JavaScript库。它采用虚拟DOM（Virtual DOM）的概念，提高了页面渲染的效率，并且具有组件化、声明式编程的特点。

1.2 安装Node.js和npm

在开始学习React之前，你需要安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，而npm是Node.js的包管理器。

# 安装Node.js和npm curl -fsSL https://deb.nodesource.com/setup_16.x | bash - sudo apt-get install -y nodejs

1.3 创建React项目

使用Create React App创建一个新的React项目，这是一个官方提供的一键式脚手架。

# 创建一个新的React项目 npx create-react-app my-app

进入项目目录并启动开发服务器：

cd my-app npm start

第二部分：React组件与状态管理

2.1 组件

React组件是React应用程序的基本构建块。组件可以是无状态的（纯组件），也可以是有状态的（容器组件）。

无状态组件

function Greeting(props) { return <h1>Hello, {props.name}</h1>; } // 使用组件 render(<Greeting name="Alice" />, document.getElementById('root'));

有状态组件

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }

2.2 状态更新

组件的状态可以通过setState方法进行更新。在类组件中，你可以在构造函数中初始化状态，并在方法中更新状态。

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }

2.3 属性与子组件

组件可以接受属性，并且可以将一个组件作为另一个组件的子组件使用。

function App() { return ( <div> <Greeting name="Alice" /> <Greeting name="Bob" /> <Clock /> </div> ); }

第三部分：React高级特性

3.1 装饰器（Decorators）

React装饰器是一种特殊的JavaScript函数，它可以被用来修改React组件的属性或者生命周期。

import React from 'react'; @withRouter class MyComponent extends React.Component { // ... }

3.2 高阶组件（Higher-Order Components）

高阶组件是一个接收一个组件作为参数并返回一个新的组件的函数。

function withCount(WrappedComponent) { return class extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ count: this.state.count + 1 }); } render() { return <WrappedComponent count={this.state.count} {...this.props} />; } }; }

3.3 使用Context API进行状态管理

Context API提供了一种在组件树之间共享值的方法，而不必一层一层手动传递props。

import React, { createContext, useContext } from 'react'; // 创建一个Context const CountContext = createContext(); // 使用Context的组件 function CountProvider({ children }) { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); } function App() { return ( <CountProvider> <Counter /> </CountProvider> ); } function Counter() { const { count, setCount } = useContext(CountContext); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

第四部分：React实战项目

4.1 创建待办事项列表

本节将指导你创建一个简单的待办事项列表应用。

步骤1：设置项目结构

在你的React项目中创建以下目录和文件：

src/ |-- components/ | |-- App.js | |-- List.js | |-- Item.js |-- index.js

步骤2：编写组件

在src/components/List.js中编写List组件：

import React from 'react'; import Item from './Item'; function List({ items, onRemove }) { return ( <ul> {items.map((item, index) => ( <Item key={index} item={item} onRemove={onRemove} /> ))} </ul> ); } export default List;

在src/components/Item.js中编写Item组件：

import React from 'react'; function Item({ item, onRemove }) { return ( <li> {item.text} <button onClick={() => onRemove(item)}>Remove</button> </li> ); } export default Item;

在src/App.js中编写App组件：

import React, { useState } from 'react'; import List from './components/List'; function App() { const [items, setItems] = useState([]); const addItem = (text) => { setItems([...items, { text }]); }; const removeItem = (item) => { setItems(items.filter((i) => i !== item)); }; return ( <div> <h1>Todo List</h1> <input type="text" placeholder="Add new item..." onKeyDown={(e) => { if (e.key === 'Enter') { addItem(e.target.value); e.target.value = ''; } }} /> <List items={items} onRemove={removeItem} /> </div> ); } export default App;

在src/index.js中设置React应用：

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );