React 教程
React 教程
React 是一个用于构建用户界面的 JavaScript 库,它由 Facebook 开发并维护。React 采用组件化的思想,可以被用来构建单页应用或大型 Web 应用。
1. 环境搭建
在开始使用 React 之前,我们需要先搭建好开发环境。下面是一些搭建 React 开发环境的方式:
1.1 使用 Create React App
Create React App 是一个官方的脚手架工具,它可以帮助我们快速创建一个新的 React 项目,同时也为我们的项目提供了一些开箱即用的配置。
要使用 Create React App,我们需要在终端中输入以下命令:
npx create-react-app my-app
cd my-app
npm start
然后我们就可以在浏览器中通过 http://localhost:3000 访问我们的应用了。
1.2 手动搭建环境
如果你不想使用 Create React App,也可以手动搭建 React 开发环境。下面是搭建 React 开发环境的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React!</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.development.js"></script>
<script>
function App() {
return React.createElement('h1', null, 'Hello, React!');
}
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
);
</script>
</body>
</html>
2. JSX
在 React 中,我们可以使用 JSX 来描述我们的用户界面。JSX 是一种类似 HTML 的语法,在 React 中被编译成 JavaScript 代码。
下面是一个使用 JSX 的示例:
function App() {
return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));
3. 组件
在 React 中,一个组件是由状态(state)和属性(props)组成的。状态是组件内部的数据,可以通过 setState
方法进行修改;属性是从外部传入的数据,不能被修改。
下面是一个示例组件:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
incrementCount() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.incrementCount()}>Increase Count</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('root'));
4. 生命周期
在 React 中,组件有几个生命周期方法,可以在不同的阶段执行特定的代码。下面是 React 组件的一些生命周期方法:
constructor(props)
:组件被创建时执行。componentDidMount()
:组件被插入到页面中时执行。shouldComponentUpdate(nextProps, nextState)
:组件的状态或属性发生变化时执行。componentWillUnmount()
:组件被从页面中删除时执行。
5. React Hooks
React Hooks 是 React 16.8 中引入的新特性,它使得在函数式组件中使用状态和其他 React 特性成为可能。
下面是一个使用 React Hooks 的示例:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function incrementCount() {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increase Count</button>
</div>
);
}
ReactDOM.render(<Counter />, document.getElementById('root'));
结语
到这里,我们已经了解了 React 的基础知识。React 具有很多强大的特性和功能,我们可以根据实际需求进行选择和使用。我们欢迎你深入了解 React 的更多内容和功能,以及用 React 创建自己的项目。