前言
React 是一种由 Facebook 开发的流行的 JavaScript 库，用于构建现代的用户界面。它采用了组件化的方式，使得 UI 开发更加模块化、可复用和高效。本文将为您介绍 React 的基本概念和用法，帮助您入门 React 开发。
React技能树
React 技能树
├── JSX
│ ├── 语法
│ ├── 元素渲染
│ ├── 组件
│ ├── Props
│ ├── State
│ └── 生命周期
├── 组件通信
│ ├── 父子组件通信
│ ├── 兄弟组件通信
│ ├── 跨级组件通信
│ ├── Context
│ └── Redux
├── 样式
│ ├── 内联样式
│ ├── CSS Modules
│ └── Styled Components
├── 路由
│ ├── React Router
│ ├── 动态路由
│ └── 嵌套路由
├── 数据请求
│ ├── Axios
│ ├── Fetch
│ └── GraphQL
├── 状态管理
│ ├── Redux
│ ├── MobX
│ └── Recoil
├── 常用库和框架
│ ├── Ant Design
│ ├── Material UI
│ ├── Bootstrap
│ ├── Semantic UI
│ └── Tailwind CSS
├── 测试
│ ├── Jest
│ ├── Enzyme
│ └── React Testing Library
├── 构建工具
│ ├── Webpack
│ └── Parcel
└── 服务端渲染
├── Next.js
└── Gatsby
什么是 React？
React 是一种用于构建用户界面的 JavaScript 库，它可以帮助您创建交互性的用户界面。React 的核心思想是组件化，将 UI 拆分为小的、可复用的组件，通过组合这些组件构建复杂的用户界面。
安装和配置 React
要开始使用 React，您需要在项目中安装 React 相关的 npm 包。可以使用 npm 或 yarn 进行安装，并在项目中引入 React 相关的库。例如，您可以通过以下命令安装 React：
npm install react react-dom
安装完毕后，您可以在项目中引入 React：
import React from 'react';
import ReactDOM from 'react-dom';
创建 React 组件
React 组件是构建用户界面的基本单元。您可以通过创建类组件或函数组件来定义一个 React 组件。类组件使用 ES6 类语法，而函数组件则是一个简单的 JavaScript 函数。
下面是一个简单的函数组件的例子：
import React from 'react';
const Hello = () => {
return <div>Hello, React!</div>;
};
export default Hello;
渲染 React 组件
要在页面上渲染 React 组件，您需要使用 ReactDOM.render() 函数将组件渲染到目标 DOM 元素上。例如：
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
ReactDOM.render(<Hello />, document.getElementById('root'));
这将把 Hello 组件渲染到具有 id 为 root 的 DOM 元素上。
使用 JSX
JSX 是一种类似 HTML 的语法，用于在 JavaScript 中描述 UI 组件。它允许您在 JavaScript 代码中直接编写 HTML 标签和组件，使得创建 UI 更加直观和简洁。例如：
import React from 'react';
const Hello = () => {
return <div>Hello, <strong>React</strong>!</div>;
};
export default Hello;
传递属性（Props）
React 组件可以通过属性（Props）来接收外部传递的数据。您可以将属性传递给组件，使组件能够根据传递的属性值渲染不同的内容。例如：
import React from 'react';
const Greeting = (props) => {
return <div>Hello, {
props.name}!</div>;
};
export default Greeting;
在这个例子中，Greeting 组件接收一个 name 属性，并在组件内部通过 {props.name} 将其渲染为文本内容。您可以在使用组件时通过传递不同的 name 属性值来定制欢迎语的内容。
处理组件状态（State）
React 组件可以拥有内部状态（State），用于存储和管理组件的数据。您可以通过使用 useState 钩子或类组件的 state 属性来创建和管理组件的状态。
例如，下面是一个使用 useState 钩子的函数组件，实现了一个简单的计数器：
import React, {
useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {
count}</p>
<button onClick={
increment}>Increment</button>
</div>
);
};
export default Counter;
在这个例子中，count 是组件的状态值，setCount 是用于更新状态值的函数。通过使用 useState 钩子，我们可以在函数组件中使用内部状态。
处理用户输入（事件处理）
React 组件可以响应用户的操作，例如点击按钮、输入文本等。您可以通过在组件中定义事件处理函数来处理这些用户输入。例如：
import React, {
useState } from 'react';
const InputForm = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<input
type="text"
value={
inputValue}
onChange={
handleChange}
/>
<p>Input value: {
inputValue}</p>
</div>
);
};
export default InputForm;
在这个例子中，我们定义了一个 handleChange 函数来处理输入框的变化事件，并通过 onChange 属性将其绑定到输入框上。每当用户输入文本时，handleChange 函数会被调用，从而更新组件的状态值。
组合和嵌套组件
React 允许您将多个组件组合在一起，形成复杂的 UI。您可以在一个组件中嵌套另一个组件，从而实现更高级的 UI 功能。
例如，下面是一个简单的组合例子，包含一个 Header 组件和一个 Footer 组件：
import React from 'react';
const Header = () => {
return <h1>Header</h1>;
};
const Footer = () => {
return <h3>Footer</h3>;
};
const App = () => {
return (
<div>
<Header />
<p>Content</p>
<Footer />
</div>
)
}
✍创作不易，求关注😄，点赞👍，收藏⭐️
