首页手记 React18项目实战：从零开始构建你的第一个React应用

React18项目实战：从零开始构建你的第一个React应用

标签：

前端工具 React React Native

概述

本文详细介绍了如何从零开始构建一个React18项目，涵盖环境搭建、项目创建、组件开发、状态管理、路由配置以及API数据获取等内容。通过实战案例，读者可以掌握React18项目实战的全过程。文中不仅讲解了React18的新特性，还提供了详细的代码示例和调试技巧。

React18项目实战：从零开始构建你的第一个React应用

React18简介与环境搭建

React18新特性介绍

React18 是 React 的一个主要版本，它带来了一些重要的新特性和改进。以下是其中一些主要的新特性：

自动批量更新：在 React18 中，useEffect 和 useState 的更新将自动批量处理。这有助于减少不必要的渲染和提升性能。
并发模式：并发模式允许你更精细地控制组件的更新和渲染，以提供更好的用户体验。
Suspense for Data Fetching：新的 Suspense 机制允许你更优雅地处理数据获取和加载状态。
自定义 Hooks：React18 支持更灵活的自定义 Hooks，使代码更易于重用和管理。

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

为了开始使用 React，你需要安装 Node.js 和 npm（Node Package Manager）。以下是安装步骤：

安装 Node.js：
- 访问官网下载页面：https://nodejs.org/en/download/
- 选择适合你操作系统的安装包进行下载。
- 安装过程中确保勾选所有必要的选项。
- 安装完成后，可以通过命令行验证安装是否成功：
```
node -v
npm -v
```
安装 React CLI：
- 打开命令行工具。
- 使用 npm 全局安装 create-react-app 工具：
```
npm install -g create-react-app
```

创建第一个React项目

使用 create-react-app 创建一个新的 React 项目。以下是具体的步骤：

创建项目：
- 打开命令行工具。
- 在你希望存放项目的目录中运行以下命令：
```
npx create-react-app my-first-react-app
```
  这将创建一个名为 my-first-react-app 的目录，并在其中初始化一个新的 React 项目。
启动开发服务器：
- 进入项目目录：
```
cd my-first-react-app
```
- 启动开发服务器：
```
npm start
```
  这将启动开发服务器，并在浏览器中打开一个新的标签页，展示你的 React 应用。默认情况下，应用会运行在 http://localhost:3000。

查看项目

启动开发服务器后，你会看到一个默认的 React 应用页面，显示 "Hello, world!"。这个页面位于 src/App.js 文件中。

基本组件与JSX语法

React组件与JSX基础

React 应用由组件构建而成，组件可以是 JavaScript 函数或类。组件的主要功能是接收输入（props），并返回 HTML 代码片段（或 JSX）。

JSX 是一种语法扩展，允许你在 JavaScript 中编写类似 HTML 的代码。JSX 代码会被编译成 React.createElement 函数，以下是一个简单的 JSX 示例：

import React from 'react';

const App = () => {
  return <h1>Hello, world!</h1>;
};

export default App;

创建和使用组件

创建一个简单的组件，例如一个显示欢迎消息的组件：

import React from 'react';

function WelcomeMessage() {
  return <h2>Welcome to React!</h2>;
}

export default WelcomeMessage;

在其他组件中使用这个 WelcomeMessage 组件：

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

const App = () => {
  return (
    <div>
      <WelcomeMessage />
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

组件的属性与状态

组件可以通过属性（props）接收外部的输入数据。属性是传递给组件的 JavaScript 对象，它们可以包含任意你需要的数据。

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

const element = <Welcome name="Sara" />;

状态（state）是组件中的内部数据。状态可以用来保存组件的局部数据。

import React, { Component } from 'react';

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

  componentDidMount() {
    this.timer = setInterval(() => this.incrementCount(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

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

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

export default Counter;

状态管理与生命周期

状态(state)管理

状态用于保存组件的内部数据。在函数组件中，你可以使用 useState Hook 来管理状态。

import React, { useState } from 'react';

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

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

export default Counter;

生命周期方法介绍

React 组件的生命周期分为三个主要阶段：挂载、更新、卸载。

挂载阶段
- componentDidMount：组件挂载完成后调用此方法，用于执行初始化操作，例如网络请求。
更新阶段
- shouldComponentUpdate：决定组件是否需要重新渲染。
- componentDidUpdate：组件更新完成后调用此方法，用于执行更新后的操作。
卸载阶段
- componentWillUnmount：组件卸载前调用此方法，用于清理资源。

import React, { Component } from 'react';

class LifecycleExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, world!',
    };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

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

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default LifecycleExample;

状态更新与回调函数

状态更新是通过 setState 方法完成的。setState 会触发组件重新渲染。如果你需要在状态更新后执行某些操作，可以使用回调函数。

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

  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }), () => {
      console.log('Updated count:', this.state.count);
    });
  };

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

路由与导航

React Router简介

React Router 是一个用于 React 的路由库，允许你创建具有多个页面的应用。

安装 React Router：
- 使用 npm 或 yarn 安装 React Router：
```
npm install react-router-dom
```
配置基本路由：
- 创建一个包含路由配置的文件 App.js：
```
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
```
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}

export default App;

设置基本路由配置

创建 Home 组件：

import React from 'react';

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

export default Home;

创建 About 组件：

import React from 'react';

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

export default About;

实现页面跳转和链接

创建导航链接：
- 在应用的某个位置创建导航链接，例如在 Header 组件中：
```
import React from 'react';
import { Link } from 'react-router-dom';
```
function Header() {
return (
<header>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
</header>
);
}

export default Header;
在应用中使用导航链接：
- 在 App.js 中使用 Header 组件：
```
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import About from './About';
```
function App() {
return (
<Router>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}

export default App;

API请求与数据处理

使用fetch与axios获取数据

使用 fetch 获取数据：
- 在组件中使用 fetch 发起异步请求：
```
import React, { useEffect, useState } from 'react';
```
function FetchData() {
const [data, setData] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []);

return (
<div>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
</div>
);
}

export default FetchData;
使用 axios 获取数据：
- 安装 axios：
```
npm install axios
```
- 使用 axios 发起请求：
```
import React, { useEffect, useState } from 'react';
import axios from 'axios';
```
function AxiosData() {
const [data, setData] = useState(null);

useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => setData(response.data))
.catch(error => console.error('Error fetching data:', error));
}, []);

return (
<div>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
</div>
);
}

export default AxiosData;

处理异步数据

使用 async/await 简化异步数据处理：

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

function AxiosData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default AxiosData;

数据展示与错误处理

处理请求失败和展示错误信息：

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

function AxiosData() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        setError('Error fetching data');
      }
    }

    fetchData();
  }, []);

  return (
    <div>
      {error ? <p>{error}</p> : data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default AxiosData;

项目部署与调试技巧

项目打包与部署

打包项目：
- 运行 npm run build 命令，将项目打包成静态文件：
```
npm run build
```
  打包完成后，所有文件将被放置在 build 目录下。
部署到服务器：
- 将 build 目录的内容部署到你的服务器。例如，如果你使用 AWS S3，可以使用 aws s3 cp 命令：
```
aws s3 cp build s3://your-bucket-name --recursive
```

常见问题及调试技巧

常见的错误：
- ReferenceError: 确保所有引用的模块都正确引入。
- TypeError: 检查类型是否正确，如 null 或 undefined。
- SyntaxError: 检查语法错误，通常是括号或引号不匹配。
调试技巧：
- console.log：使用 console.log 输出变量值，检查变量的状态。
- React DevTools：使用 Chrome 或 Firefox 的 React DevTools 插件，可以方便地查看组件树和状态。
- 断点调试：在开发工具中设置断点，逐步执行代码，观察每一步的状态变化。

实战案例分享

一个完整的案例，包含路由、数据获取和错误处理的示例：

App.js

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

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/data" component={Data} />
      </Switch>
    </Router>
  );
}

export default App;

Header.js

import React from 'react';
import { Link } from 'react-router-dom';

function Header() {
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/data">Data</Link>
      </nav>
    </header>
  );
}

export default Header;

Home.js

import React from 'react';

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

export default Home;

About.js

import React from 'react';

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

export default About;

Data.js

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

function Data() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        setError('Error fetching data');
      }
    }

    fetchData();
  }, []);

  return (
    <div>
      {error ? <p>{error}</p> : data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default Data;

通过以上步骤，你可以从零开始构建一个完整的 React 应用，并了解如何使用 React18 的新特性、处理路由和数据，以及进行项目部署和调试。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

月关宝盒

手记
篇

粉丝

105

获赞与收藏

673

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18493 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空