React是一个用于构建用户界面的JavaScript库，由Facebook开发并开源。
React核心概念
- 组件化：React应用由可复用的组件构成
- 声明式：描述UI应该是什么样子，而不是如何更新
- 虚拟DOM：高效的DOM更新机制
- 单向数据流：数据从父组件流向子组件
创建React项目
使用Create React App创建新的React项目：
npx create-react-app my-react-app
cd my-react-app
npm start
JSX语法基础
// App.js
import React from "react";
function App() {
const name = "React学习者";
const isLoggedIn = true;
const items = ["项目1", "项目2", "项目3"];
return (
欢迎学习{name}!
{/* 条件渲染 */}
{isLoggedIn ? (
您已登录系统
) : (
请先登录
)}
{/* 列表渲染 */}
{items.map((item, index) => (
- {item}
))}
{/* 样式应用 */}
这是一个带样式的容器
);
}
export default App;
注意：JSX中必须使用className而不是class，style属性接受一个对象而不是字符串。
项目结构说明
- src/ - 源代码文件夹
- public/ - 静态资源文件夹
- node_modules/ - 依赖包文件夹
- package.json - 项目配置文件
- App.js - 主应用组件
- index.js - 应用入口文件
运行React应用
# 启动开发服务器
npm start
# 运行测试
npm test
# 构建生产版本
npm run build
# 安装依赖
npm install package-name
# 使用yarn（替代npm）
yarn start
yarn add package-name
完整学习路径
- 安装Node.js和npm
- 创建React项目：
npx create-react-app my-app
- 进入项目目录：
cd my-app
- 启动开发服务器：
npm start
- 打开浏览器访问：
http://localhost:3000
- 学习JSX语法和组件基础
- 掌握状态管理和事件处理
- 学习React Hooks
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。
评论
请 登录 后发表评论