React框架详解：从入门到精通（详细版）

布兰妮甜

已于 2024-11-08 11:24:38 修改

阅读量8.3k

点赞数 40

分类专栏： # React 文章标签： react.js 前端前端框架

于 2024-11-08 11:21:24 首次发布

本文链接：https://blog.csdn.net/chaosweet/article/details/143615250

版权

前言

React 是由 Facebook 开发并维护的一个用于构建用户界面的 JavaScript 库。自2013年5月首次发布以来，React 因其高效性、灵活性和强大的生态系统而广受欢迎。React 不仅可以用于构建 Web 应用程序，还可以通过 React Native 构建移动应用程序。本文将详细介绍 React 的核心概念、生命周期方法、最新特性以及最佳实践，帮助读者全面掌握这一强大的前端工具。

一、官方网站

React 的官方网站是 https://react.docschina.org/。在这里，你可以找到官方文档、教程、API 参考以及社区资源。

二、安装React

使用 Create React App

Create React App 是一个官方支持的脚手架工具，可以帮助你快速搭建一个 React 应用程序。以下是安装步骤：

确保已安装 Node.js：首先确保你的机器上已经安装了 Node.js。你可以通过运行以下命令来检查：
```
node -v
npm -v
```
安装 Create React App：打开终端或命令行工具，运行以下命令来全局安装 Create React App：
```
npx create-react-app my-app
```
进入项目目录：
```
cd my-app
```
启动开发服务器：
```
npm start
```
这将启动一个本地开发服务器，并在浏览器中打开 http://localhost:3000，你将看到一个默认的 React 应用程序。

手动安装

如果你不想使用 Create React App，也可以手动安装 React 和相关依赖。以下是步骤：

初始化项目：
```
mkdir my-app
cd my-app
npm init -y
```
安装 React 和 React DOM：
```
npm install react react-dom
```

创建入口文件：在项目根目录下创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
 <div id="root"></div>
 <script src="./index.js"></script>
</body>
</html>

创建主 JavaScript 文件：在项目根目录下创建一个 index.js 文件：

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

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

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

启动开发服务器：你可以使用 webpack 或其他模块打包工具来启动开发服务器。这里以 webpack 为例：
```
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
```

配置 Webpack：在项目根目录下创建一个 webpack.config.js 文件：

const path = require('path');

module.exports = {
     
  entry: './index.js',
  output: {
     
	filename: 'bundle.js',
	path: path.resolve(__dirname, 'dist')
  },
  module: {
     
	rules: [
  	  {
     
    	test: /\.js$/,
    	exclude: /node_modules/,
    	use: {
     
      	  loader: 'babel-loader'
        }
  	  }
	]
  }
};

配置 Babel：在项目根目录下创建一个 .babelrc 文件：

{
     
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

添加启动脚本：在 package.json 中添加一个启动脚本：

"scripts": {
     
  "start": "webpack serve --open"
}

启动开发服务器：
```
npm start
```

三、React 核心概念

1. 组件化

React 的核心理念之一是组件化。组件化意味着将复杂的用户界面分解为多个小的、可重用的组件。每个组件负责渲染一部分 UI，并且可以拥有自己的逻辑和状态。组件之间通过属性（Props）进行通信，形成树状结构。

函数组件：使用简单的函数定义，接收输入参数（Props），返回要渲染的元素。从 React 16.8 开始，函数组件可以通过 Hooks 使用状态和其他功能。
```
function Welcome(props) {
     
  return <h1>Hello, {
     props.name}</h1>;
}
```
类组件：继承自 React.Component 类，可以通过 this.state 和this.props 访问状态和属性。
```
class 
```