React 前端框架入门
React 前端框架入门什么是 React？
React 是由 Facebook 开辟并开源的一个用于构建用户界面的 JavaScript 库。
它的核心特点是组件化和响应式更新，实用于单页应用 (SPA) 和复杂前端界面的开辟。
核心特性
[*] 组件化开辟
[*]UI 被拆分为独立、可复用的组件。
[*]每个组件有自己的状态和生命周期。
[*] 声明式编程
[*]使用简单的代码形貌 UI。
[*]React 会根据状态更新自动处置惩罚 DOM 变更。
[*] 虚拟 DOM
[*]进步性能：通过比力虚拟 DOM 和真实 DOM 的差异，只更新须要的部门。
[*] 单向数据流
[*]数据从父组件流向子组件，便于管理。
[*] React Hooks
[*]使函数组件也能拥有状态和生命周期特性。
基本概念
1. JSX
JSX 是一种在 JavaScript 中嵌入 HTML 的语法，雷同模板语言。
const element = <h1>Hello, React!</h1>;
2. 组件
组件是 React 的底子单元，可以分为 函数组件 和 类组件。
[*]函数组件
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
[*]类组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
3. State 和 Props
[*]Props: 用于从父组件向子组件转达数据，组件是只读的。
[*]State: 每个组件的内部状态，可随事件或操作动态变革。
4. 生命周期
React 提供了一系列生命周期方法，用于控制组件的渲染和更新过程。
生命周期阶段方法形貌挂载componentDidMount初始化后运行，如数据请求。更新componentDidUpdate状态或属性更新后运行。卸载componentWillUnmount清理工作，如取消订阅。 5. React Hooks
Hooks 是函数组件的新特性，用于处置惩罚状态和生命周期。
[*]使用 useState 管理状态
import React, { useState } from "react";
function Counter() {
const = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
[*]使用 useEffect 管理副作用
import React, { useEffect } from "react";
function Example() {
useEffect(() => {
console.log("组件已挂载");
return () => {
console.log("组件已卸载");
};
}, []);
return <div>Hello, Hooks!</div>;
}
React 应用示例
以下是一个简单的计数器应用：
import React, { useState } from "react";
import ReactDOM from "react-dom";
function Counter() {
const = useState(0);
return (
<div>
<h1>计数器</h1>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
<button onClick={() => setCount(count - 1)}>减少</button>
</div>
);
}
ReactDOM.render(<Counter />, document.getElementById("root"));
项目结构
React 项目通常使用 Create React App 创建，其默认结构如下：
my-app/
├── src/
│ ├── App.js # 主组件文件
│ ├── index.js # 入口文件
│ ├── components/ # 自定义组件目录
│ └── styles/ # 样式文件
├── public/
│ └── index.html # HTML 模板
├── package.json # 项目依赖和配置
如何启动 React 项目
[*]安装 Node.js 和 npm。
[*]创建 React 项目：npx create-react-app my-app
cd my-app
[*]启动项目：npm start
参考资料
[*]React 官方文档
[*]React 中文文档
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]