首页手记 React18开发入门教程：从零开始搭建你的第一个Re...

React18开发入门教程：从零开始搭建你的第一个React应用

标签：

React.JS React Native

概述

本文介绍了React18开发入门教程，涵盖了从环境搭建到组件化开发的全过程。文章详细讲解了React18的新特性和开发环境搭建方法，并通过示例代码展示了如何创建和管理React应用。此外，还介绍了高阶组件、Hooks以及状态管理的相关知识。

React18开发入门教程：从零开始搭建你的第一个React应用

React18简介与环境搭建

React18最新特性介绍

React 18 引入了许多新特性和优化，使其更加高效和强大。以下是React 18的一些重要更新：

并发模式（Concurrent Mode）：允许开发者控制渲染速率，以优化用户体验。
自动批处理（Automatic Batched Updates）：更新状态和属性时，React 会自动将多个更新批处理在一起，从而减少渲染次数。
自动修复（Automatic Bailing out）：如果组件的状态或属性没有变化，React 会自动跳过更新，以节省计算资源。
错误边界（Error Boundaries）：允许捕获和处理组件树中的错误。

开发环境搭建指南

在开始编写React应用之前，你需要确保开发环境已经搭建好。本教程推荐使用Node.js和npm或yarn来安装和管理依赖。

安装Node.js和npm/yarn

安装Node.js：访问Node.js官网下载并安装最新版本的Node.js。安装完成后，你可以通过命令行检查安装是否成功。
```
node -v
npm -v
```
安装Yarn（可选）：Yarn是一个依赖管理工具，与npm类似，但是它的安装速度更快，依赖冲突更少。你可以通过npm安装Yarn。
```
npm install -g yarn
```
安装create-react-app：create-react-app是一个官方支持的工具，用于快速搭建React应用。你可以通过npm或yarn安装它。
```
npm install -g create-react-app
# 或者使用yarn
yarn global add create-react-app
```

创建第一个React项目

使用create-react-app创建一个React项目非常简单。以下是如何创建并启动一个React应用的步骤：

创建项目：在你想要创建项目的位置打开命令行，然后运行以下命令。
```
npx create-react-app my-app
cd my-app
```
启动项目：运行以下命令启动开发服务器。
```
npm start
# 或者使用yarn
yarn start
```

在浏览器中打开默认的端口（通常是http://localhost:3000），你将看到一个简单的“Hello World”应用已经启动并运行。

React基本概念与组件

组件化开发思想

组件化开发是React的核心思想之一。通过组件化，你可以将应用分解为多个独立且可复用的小部件。每个组件负责渲染一部分UI，并处理其自身的数据。

组件分类

React组件主要分为两种类型：

函数组件：简单的JS函数，返回UI。
类组件：继承自React.Component的JavaScript类。

类组件与函数组件的区别与使用

函数组件

函数组件更简单，更适合编写轻量级的UI。它们不需要继承任何类，只需要定义一个函数。

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

类组件

类组件需要继承自React.Component类，并重写render方法。类组件可以包含状态（state）和生命周期方法。

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

JSX语法基础

JSX是React中用来描述UI的语法扩展。它允许你在JavaScript中写HTML语法。

基本语法

JSX语法类似于HTML，但它可以嵌入变量和表达式。

const element = <h1>Hello, world!</h1>;

你可以使用JSX来创建元素，并将这些元素渲染到DOM中。

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

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

属性与事件

JSX中的属性可以携带额外的信息，如类名、样式和事件处理函数。

const element = (
  <div className="greeting">
    <h1>Hello, world!</h1>
  </div>
);

const handleClick = () => {
  alert('Button clicked!');
};

const button = <button onClick={handleClick}>Click me</button>;

状态与生命周期

状态管理（state）详解

状态是组件内部的可变数据，它允许组件根据不同的状态渲染不同的UI。

状态初始化

状态可以通过constructor方法初始化，也可以使用useState Hook（在函数组件中）。

import React, { Component } from 'react';

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

  render() {
    return <h1>{this.state.count}</h1>;
  }
}

export default Counter;

更新状态

更新状态通常通过setState方法完成。setState是异步的，它会在适当的时机更新UI。

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

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

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

生命周期方法简介

React组件有多个生命周期方法，它们允许你在组件的不同阶段执行特定的代码。

生命周期方法

componentWillMount：在组件挂载前调用。
componentDidMount：在组件挂载后立即调用。
componentWillUnmount：在组件卸载前调用。

class LifecycleExample extends Component {
  componentDidMount() {
    console.log('Component did mount!');
  }

  componentWillUnmount() {
    console.log('Component will unmount!');
  }

  render() {
    return <div>Life Cycle Example</div>;
  }
}

export default LifecycleExample;

React18中的更新与优化

React 18引入了并发模式，允许开发者控制渲染速率，以优化用户体验。自动批处理和自动修复机制也会减少不必要的渲染。

import React, { useEffect, useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 模拟异步操作
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

export default App;

路由管理与状态管理

React Router基础使用

React Router是React应用中最常用的路由库。它可以让你的应用在不同的路由间切换，并根据当前路由渲染不同的组件。

安装React Router

首先需要通过npm或yarn安装react-router-dom。

npm install react-router-dom

或

yarn add react-router-dom

基本用法

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

Context API与Redux简介

React提供了一个内置的Context API，可以用来在组件树中共享数据。对于复杂的应用，你可能需要使用Redux来管理全局状态。

使用Context API

import React from 'react';

const ThemeContext = React.createContext('light');

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  return (
    <ThemeContext.Consumer>
      {theme => <h1>Theme: {theme}</h1>}
    </ThemeContext.Consumer>
  );
};

export default App;

管理应用全局状态

全局状态管理可以使用Redux来实现。Redux是一个状态管理库，它通过一个全局的store来管理应用的状态。

安装Redux

npm install redux react-redux

或

yarn add redux react-redux

基本用法

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

const Counter = ({ count, dispatch }) => {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
};

const mapStateToProps = state => ({ count: state.count });

const ConnectedCounter = connect(mapStateToProps)(Counter);

const App = () => {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
};

export default App;

高阶组件与HOOKS

高阶组件（Higher Order Components）使用

高阶组件是一种高级用法，它接受一个组件作为参数，并返回一个新的、功能增强的组件。

基本用法

import React from 'react';

const withCount = WrappedComponent => props => {
  return <WrappedComponent count={10} {...props} />;
};

const App = withCount(({ count }) => <h1>{count}</h1>);

export default App;

Hooks的基本概念与使用

Hooks允许你在不编写类的情况下使用状态和其他React特性。它们在函数组件中使用。

常用的Hook

useState：用于状态管理。
useEffect：类似于生命周期方法，用于执行副作用操作。
useContext：用于访问Context。

示例代码

import React, { useState, useEffect, useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggler = () => {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    document.body.className = theme;
  }, [theme]);

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Consumer>
      {({ theme }) => (
        <button onClick={toggleTheme}>
          {theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
        </button>
      )}
    </ThemeContext.Consumer>
  );
};

export default ThemeToggler;

实战演练与调试技巧

开发一个小项目（如待办事项应用）

开发一个待办事项应用是学习React的好方法。你可以使用React Router和Redux来管理应用的路由和状态。

待办事项应用

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, toggleTodo } from './actions';
import { Todo } from './components';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = title => {
    dispatch(addTodo(title));
  };

  return (
    <Router>
      <div>
        <h1>Todo List</h1>
        <input type="text" placeholder="Add a new todo" onKeyUp={e => handleAddTodo(e.target.value)} />
        <ul>
          {todos.map(todo => (
            <Todo
              key={todo.id}
              {...todo}
              onClick={() => dispatch(toggleTodo(todo.id))}
            />
          ))}
        </ul>
        <Switch>
          <Route path="/todos/:id" component={TodoDetails} />
          <Route path="/" exact component={Home} />
        </Switch>
      </div>
    </Router>
  );
};

const TodoDetails = ({ match }) => {
  const { id } = match.params;
  const todo = useSelector(state => state.todos.find(todo => todo.id === id));

  return (
    <div>
      <h1>{todo.title}</h1>
      <p>{todo.completed ? 'Completed' : 'Incomplete'}</p>
    </div>
  );
};

const Home = () => <div>Home page</div>;

export default App;

调试工具使用

React提供了多个调试工具，帮助你更好地理解应用的状态和行为。

React DevTools

React DevTools是一个浏览器插件，可以用来检查和调试React组件树。安装后，你可以通过右键点击页面，选择“Inspect”来查看组件的详细信息。

Redux DevTools

Redux DevTools是一个浏览器插件，可以用来调试Redux状态。你可以查看和修改状态，以及执行动作的历史记录。

代码优化与性能提升

优化React应用的性能可以提高用户体验。以下是一些常见的优化技巧：

减少渲染次数

尽量减少不必要的渲染。例如，使用React.memo来优化已渲染组件的性能。

import React, { memo } from 'react';

const MyComponent = memo(({ value }) => {
  console.log('MyComponent rendered');
  return <div>{value}</div>;
});

export default MyComponent;

使用React.memo

React.memo是一个高阶组件，它会阻止不必要的渲染。

import React, { memo } from 'react';

const MyComponent = memo(({ value }) => {
  console.log('MyComponent rendered');
  return <div>{value}</div>;
});

export default MyComponent;

使用useMemo和useCallback

useMemo和useCallback可以用来优化函数和对象的生成，避免不必要的计算。

import React, { useState, useCallback, useMemo } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const expensiveCalculation = useCallback(() => {
    // 耗时的计算
  }, []);

  const expensiveValue = useMemo(() => {
    return count + 1;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <h1>{expensiveValue}</h1>
    </div>
  );
};

export default App;

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

喵喔喔

手记
篇

粉丝

103

获赞与收藏

606

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31204 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18652 347

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React18开发入门教程：从零开始搭建你的第一个React应用

React18最新特性介绍

开发环境搭建指南

安装Node.js和npm/yarn

创建第一个React项目

组件化开发思想

组件分类

类组件与函数组件的区别与使用

函数组件

类组件

JSX语法基础

基本语法

属性与事件

状态管理（state）详解

状态初始化

更新状态

生命周期方法简介

生命周期方法

React18中的更新与优化

React Router基础使用

安装React Router

基本用法

Context API与Redux简介

使用Context API

管理应用全局状态

安装Redux

基本用法

高阶组件（Higher Order Components）使用

基本用法

Hooks的基本概念与使用

常用的Hook

示例代码

开发一个小项目（如待办事项应用）

待办事项应用

调试工具使用

React DevTools

Redux DevTools

代码优化与性能提升

减少渲染次数

使用React.memo

使用useMemo和useCallback

阅读免费教程