目录
一、React脚手架概述：
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置（语法检查、jsx编译、devServer…）
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
二、React脚手架环境搭建：
第一步，全局安装：
npm i -g create-react-app第二步，切换到想创项目的目录，使用命令：
create-react-app hello-react
第三步，进入项目文件夹：
cd hello-react第四步，启动项目：
npm start
三、React脚手架项目结构解析：
SPA：（s单页Web应用ingle page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
- public ---- 静态资源文件夹
- favicon.icon ------ 网站页签图标
- index.html -------- 主页面
- logo192.png ------- logo图
- logo512.png ------- logo图
- manifest.json ----- 应用加壳的配置文件
- robots.txt -------- 爬虫协议文件
<!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"/>
<!--用于配置浏览器页签+地址栏颜色(仅支持安卓手机浏览器)-->
<meta name="theme-color" content="#000000"/>
<meta
name="description"
content="Web site created using create-react-app"
/>
<!--用于指定网页添加到主屏幕后的图标(仅支持苹果手机)-->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!---->
<!--应用加壳时的配置文件-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<!--noscript:当浏览器不支持JavaScript语言时出现标签中类容-->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
- 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库的支持)
四、简单的Hello组件：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--图标-->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
</html>APP.js：
//创建“外壳组件”APP：
import React from 'react'
//引入Hello组件：
import Hello from './components/Hello/Hello'
//从React中获取Component：
const {Component} = React
//定义并默认暴露App组件：
export default class App extends Component{
render() {
return (
<div>
<Hello/>
</div>
)
}
}
//暴露APP组件
// export default Appindex.js：
//引入React核心库：
import React from "react";
//引入ReactDom
import ReactDOM from 'react-dom'
//引入APP组件：
import APP from './APP'
//渲染APP组件到页面：
ReactDOM.render(<APP></APP>, document.getElementById("root"))Hello.css：
.title{
background-color: aqua;
}Hello.jsx：
//引入React核心库：
import React from "react";
//引入样式表：
import './Hello.css'
const {Component} = React
export default class Hello extends Component{
render(){
return (
<h1 className="title">Hello React !</h1>
)
}
}样式的模块化！！！
功能界面的组件化编码流程（通用）
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件
-
动态显示初始化数据
-
数据类型
-
数据名称
-
保存在哪个组件？
-
-
交互（从绑定事件监听开始）
-
扫一扫
2860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
