React快速入门实战
·
3 min read
一. 创建项目
命令行创建项目
# 创建react的全局脚手架工具
npm install -g create-react-app
# 创建自己的项目 react_hello
cd ~/programs
create-react-app react_hello
# 启动项目
cd react_hello
yarn start
项目目录结构
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js --- 页面性能分析文件(需要web-vitals库的支持)
setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
二. 快速开始
使用 idea 打开刚刚创建的 react_hello 目录，删除掉无用的一下文件，最终值保留如下内容
public 静态文件
- favicon.ico
- index.html 主html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
<link rel="icon" href="./favicon.ico" />
<meta
name="description"
content="Web site created using create-react-app"
/>
</head>
<body>
<div id="root"></div>
</body>
</html>
src React代码
- components/Hello/index.jsx 自定义模块路径
import React, {Component} from "react";
import hello from './index.module.css'
class Hello extends Component {
render() {
return <h2 className={hello.title}>hello world!</h2>
}
}
export default Hello
- components/Hello/index.module.css 自定义样式路径
.title {
background: orange;
}
- App.js App组件
import React, {Component} from "react";
import Hello from "./components/Hello";
class App extends Component {
render() {
return (
<div>
<Hello/>
</div>
)
}
}
export default App;
- index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
三. 组件化编码流程
- 拆分组件: 拆分界面,抽取组件
- 实现静态组件: 使用组件实现静态页面效果
- 实现动态组件
3.1 动态显示初始化数据：数据类型、数据名称、保存在哪个组件?
3.2 交互(从绑定事件监听开始)
- 参考文档
教程：井字棋游戏 – React
用于构建 Web 和原生交互界面的库
