🔥博主:程序员不想YY啊🔥
💫CSDN优质创作者,CSDN实力新星,CSDN博客专家💫
🤗点赞🎈收藏⭐再看💫养成习惯
🌈希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步!🌈
React
- [0. 前言](#0. 前言)
- [1. 环境准备](#1. 环境准备)
- [2. 创建一个新的 React 应用](#2. 创建一个新的 React 应用)
- [3. 了解项目结构](#3. 了解项目结构)
- [4. 编辑 App 组件](#4. 编辑 App 组件)
- [5. JSX 语法](#5. JSX 语法)
- [6. 组件和 Props](#6. 组件和 Props)
- [7. State 和生命周期](#7. State 和生命周期)
- [8. 使用 Hooks](#8. 使用 Hooks)
- [9. 测试你的组件](#9. 测试你的组件)
- [10. 部署你的应用](#10. 部署你的应用)
0. 前言
React
是一个用于构建用户界面的 JavaScript 库,由 Facebook 发起并开源,下面是一个简要的 React 快速入门教程,帮助你开始使用这个强大工具:
1. 环境准备
在开始之前,请确保你已经安装了 Node.js
和 npm (Node.js 的包管理器)。你可以在 nodejs.org
上下载安装最新版的 Node.js
,它通常包含 npm。
2. 创建一个新的 React 应用
使用 create-react-app 可以快速生成一个新的 React 应用。打开你的终端(命令行工具),然后输入:
bash
npx create-react-app my-react-app
cd my-react-app
npm start
这会创建一个名为 my-react-app
的新目录,其中包含所有的初始文件,并启动一个开发服务器,然后在浏览器中打开你的新应用。
3. 了解项目结构
在 my-react-app
文件夹中,你会看到以下重要的文件和文件夹:
- 💫
public/index.html
: 这是你的应用的主 HTML 文件。 - 💫
src/index.js
: 这是 React 应用的入口文件。 - 💫
src/App.js
: 这是一个基本的组件文件,包含了应用的初始内容。
4. 编辑 App 组件
接下来,打开 src/App.js
文件。这里定义了一个名为 App
的React 组件,它返回一段能够被渲染的 JSX 代码。
jsx
function App() {
return (
<div className="App">
<header className="App-header">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
</header>
</div>
);
}
export default App;
可以修改上面的 App
组件,例如,更改段落 <p>
中的文字并保存文件,你的浏览器会自动刷新并显示新的内容。
5. JSX 语法
JSX 是一种看起来很像 HTML 的 JavaScript 语法扩展。与 React 一起使用时,JSX 可以让你更方便地描述 UI 应该呈现出什么样子。
6. 组件和 Props
组件是 React 应用的核心概念之一,它们让你能够拆分 UI 成独立的、可复用的部分,并且可以独立地考虑每个部分。
Props 是组件的参数。你可以这样创建一个带有 props 的组件:
jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
并在其他组件中使用它:
jsx
<Welcome name="Sara" />
7. State 和生命周期
State 是 React 组件的另一个重要概念,State 允许 React 组件在不需要重新加载页面的情况下,响应用户输入、网络响应和其他事件。
使用 State,你需要将函数组件转换为类组件或使用 Hooks。一个类组件例子:
jsx
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>
);
}
}
8. 使用 Hooks
从 React 16.8 开始,你可以在不编写类的情况下使用 state 和其他 React 特性,这得益于引入了 Hooks。
jsx
import React, { useState, useEffect } from 'react';
function Clock() {
const [date, setDate] = useState(new Date());
useEffect(() => {
const timerID = setInterval(() => tick(), 1000);
return () => {
clearInterval(timerID);
};
}, []);
function tick() {
setDate(new Date());
}
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
9. 测试你的组件
你的 React 应用可以通过各种方式来测试,一种流行的方法是使用 Jest 框架进行测试,它通常与 React 应用一起安装。
10. 部署你的应用
一旦你的应用做好了发布的准备,你可以运行 npm run build
来构建一个用于生产的版本,这会在你的项目目录下创建一个 build
文件夹,其中包含了用于部署的文件。
进一步学习 React,建议阅读 React 官方文档,用以深入理解这个库以及它的高级功能。