首页手记 React18开发入门教程：从零开始搭建React应用

React18开发入门教程：从零开始搭建React应用

标签：

React.JS React Native

概述

本文详细介绍了从零开始使用React18构建React应用的过程，涵盖环境搭建、新特性介绍、组件开发、路由配置、状态管理、样式处理以及项目实战与部署等多个方面。通过丰富的代码示例，帮助读者全面掌握React18开发的各个方面。从安装Node.js和npm开始，逐步引导读者创建React项目，并深入讲解了React组件的使用、状态管理以及路由配置等内容。

React18开发入门教程：从零开始搭建React应用

React18简介与环境搭建

React18新特性介绍

React18发布了一系列重要新特性，包括：

并发模式：提供了一种更好的方式来控制UI的更新和渲染优先级，从而改善用户体验。
自动批处理：改进了状态更新的批处理机制，减少了不必要的渲染次数。
函数组件的严格模式：在严格模式下，函数组件会运行两次，用于检查组件是否有潜在的问题。
Suspense for Data Fetching：改进了数据获取的Suspense机制，使得异步加载更加高效。

开发环境搭建：Node.js与npm安装

为了使用React生态系统中的工具，首先需要安装Node.js和npm（Node包管理器）。

安装Node.js

访问Node.js官网（https://nodejs.org/）下载并安装最新版本的Node.js。
安装npm

安装Node.js的同时也安装了npm。可以通过以下命令检查npm是否安装成功：
```
npm --version
```
输出版本号说明npm已成功安装。

创建React项目：使用create-react-app

create-react-app是一个命令行工具，可以帮助你快速搭建React项目。首先需要全局安装create-react-app：

npm install -g create-react-app

安装完成后，使用以下命令创建一个新的React应用：

create-react-app my-app
cd my-app
npm start

这将创建一个名为my-app的React项目，并启动开发服务器。

React基础组件开发

组件与函数组件

React应用通常由组件构成，组件可以是函数组件或类组件。函数组件通常用于简单的UI渲染，而类组件则涉及更多的逻辑和生命周期方法。

函数组件示例

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

创建和使用组件

组件可以包含子组件，这些子组件可以嵌套在一起形成复杂的UI结构。

创建一个子组件

function Greeting(props) {
  return (
    <div>
      <h1>{props.greeting}</h1>
      <p>{props.message}</p>
    </div>
  );
}

使用子组件

function App() {
  return (
    <div>
      <Greeting greeting="Hello" message="Welcome to my app!" />
    </div>
  );
}

父子组件之间数据传递

父组件可以通过属性将数据传递给子组件。

父组件

function ParentComponent() {
  return <ChildComponent name="Alice" />;
}

function ChildComponent(props) {
  return (
    <div>
      <p>Hello, {props.name}</p>
    </div>
  );
}

状态与生命周期

状态(state)管理

状态是组件内部的数据，用于描述组件的当前状态。状态的变化会导致组件重新渲染。

初始化状态

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

生命周期方法介绍

在React16中，生命周期方法被重构成Hook形式，但在新版本中这些方法已不再支持，但依然有三种主要的Hook：

useEffect：相当于componentDidMount、componentDidUpdate和componentWillUnmount。
useState：用于组件状态。
useContext：用于消费Context值。

React18中的Effect Hook

useEffect Hook允许你在组件渲染后执行副作用操作，例如数据获取、订阅、手动修改DOM等。

`useEffect`基本使用

function Example(props) {
  useEffect(() => {
    document.title = `You clicked ${props.count} times`;
  });

  return (
    <div>
      <p>You clicked {props.count} times</p>
    </div>
  );
}

路由与导航

路由的基本概念

路由是现代Web应用的核心，它允许你通过不同的路径访问不同的视图或组件。React Router是React中最流行的路由库之一。

使用react-router-dom进行路由配置

安装react-router-dom：

npm install react-router-dom

基本路由配置

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

路由组件的使用

路由组件可以接收一个location属性，用于获取当前的URL路径。

function About() {
  const { pathname } = useLocation();
  return (
    <div>
      <h2>About</h2>
      <p>The current URL is {pathname}</p>
    </div>
  );
}

样式与样式管理

CSS在React中的使用

在React中，可以将CSS文件直接引入到组件中，也可以使用内联样式或JSX样式。

使用外部CSS文件

创建App.css文件，并在组件中引用它：

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  margin-bottom: 1rem;
}

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, world!</p>
      </header>
    </div>
  );
}

CSS-in-JS方案：styled-components

styled-components允许你使用CSS模板字符串来创建React组件，从而将样式与组件逻辑结合在一起。

基本使用

import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: #00b894;
  border: none;
  color: white;
  border-radius: 3px;
`;

function App() {
  return <Button>Click me</Button>;
}

使用CSS Modules

CSS Modules允许组件本地化CSS样式，使得全局样式不会对整个应用产生影响。

使用CSS Modules

/* App.module.css */
.App {
  font-family: sans-serif;
  text-align: center;
}

.App-logo {
  height: 40vmin;
  margin-bottom: 1rem;
}

import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <header className={styles.App-header}>
        <img src={logo} className={styles.App-logo} alt="logo" />
        <p>Hello, world!</p>
      </header>
    </div>
  );
}

项目实践与部署

小项目实战：构建一个简单的待办事项应用

组件结构

待办事项应用通常由以下几个组件构成：

TodoApp：整个应用的容器，管理所有待办事项。
TodoList：渲染所有待办事项的列表。
TodoItem：渲染单个待办事项。
AddTodo：添加新的待办事项。

`TodoApp`组件

import React, { useState } from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

function TodoApp() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div>
      <AddTodo addTodo={addTodo} />
      <TodoList todos={todos} removeTodo={removeTodo} />
    </div>
  );
}

export default TodoApp;

`AddTodo`组件

import React, { useState } from 'react';

function AddTodo({ addTodo }) {
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    addTodo(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
}

export default AddTodo;

`TodoList`组件

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, removeTodo }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} text={todo.text} index={index} removeTodo={removeTodo} />
      ))}
    </ul>
  );
}

export default TodoList;

`TodoItem`组件

import React from 'react';

function TodoItem({ text, index, removeTodo }) {
  return (
    <li>
      {text}
      <button onClick={() => removeTodo(index)}>Remove</button>
    </li>
  );
}

export default TodoItem;

项目打包与部署

在开发结束后，可以通过以下命令打包项目：

npm run build

这将生成一个build目录，其中包含了生产环境下的静态文件。

使用GitHub Pages部署React应用

克隆项目到本地

git clone <repository-url>
cd <repository-name>

安装GitHub Pages
```
npm install --save gh-pages
```

配置package.json

在package.json中添加以下脚本：

"scripts": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build"
}

部署
```
npm run deploy
```

这将把build目录的内容推送到GitHub Pages。

总结

本文详细介绍了从零开始搭建React应用的过程，包括环境搭建、组件开发、路由配置、样式管理以及项目部署等多个方面。通过实际代码示例，希望读者能够对React有更深入的理解和实际应用能力。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕沐林林

手记
篇

粉丝

29

获赞与收藏

116

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

React18开发入门教程：从零开始搭建React应用

React18新特性介绍

开发环境搭建：Node.js与npm安装

创建React项目：使用create-react-app

组件与函数组件

函数组件示例

创建和使用组件

创建一个子组件

使用子组件

父子组件之间数据传递

父组件

状态(state)管理

初始化状态

生命周期方法介绍

React18中的Effect Hook

useEffect基本使用

路由的基本概念

使用react-router-dom进行路由配置

基本路由配置

路由组件的使用

CSS在React中的使用

使用外部CSS文件

CSS-in-JS方案：styled-components

基本使用

使用CSS Modules

使用CSS Modules

小项目实战：构建一个简单的待办事项应用

组件结构

TodoApp组件

AddTodo组件

TodoList组件

TodoItem组件

项目打包与部署

使用GitHub Pages部署React应用

阅读免费教程

`useEffect`基本使用

`TodoApp`组件

`AddTodo`组件

`TodoList`组件

`TodoItem`组件