create-react-app
项目的整体架构技术为:react+webpack+es6+eslint
使用脚手架开发的项目特点:模块化,组件化,工程化
创建项目并启动
1.npm install -g create-react-app
2.create-react-app comedyReact
3.cd comedyReact
4.npm start
目录
SPA应用:singal page application单页面应用
public
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- %PUBLIC_URL%代表public文件夹的路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 开启理想视口,用于做移动端网页的适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 用于配置浏览器页签+地址栏的颜色,仅支持android,兼容性不好 -->
<meta name="theme-color" content="#000000" />
<!-- 描述网站信息 -->
<meta
name="description"
content="Web site created using create-react-app"
/>
<!-- Safari萨法lui添加主屏幕图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- 应用加壳配置(webview) -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- if浏览器不支持js -->
<!-- public/robots.txt 爬虫规则文件 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
src
index.js—入口文件
ReatDom.render(
<React.StrictMode> //检查
<App />
</React.StrictMode>
)
reportWebVitals.js
页面性能检测,(需要web-vitals库的支持)
setupTest.js
组件单元测试文件,(需要jest-dom库的支持)