React学习03-react脚手架
文章目录
- 工程化项目
-
-
- 脚手架简介
- 创建项目并启动
- public文件夹
- src文件夹
- 创建一个Hello组件
- 样式模块化
- VS CODE插件安装
- 组件的编码化流程
-
工程化项目
脚手架简介
脚手架用来帮助快速创建基于xxx库的模板项目，包含了所有需要的配置，下载好了所有相关依赖，可以直接运行一个简单的效果。使用脚手架的项目特点有：模块化、组件化、工程化。
react脚手架：create-react-app
项目的整体技术架构为react+webpack+es6+eslint
创建项目并启动
一、全局安装：cmd命令进入电脑终端，输入 npm i -g create-react-app
二、使用cd命令切换到创建项目的目录 cd Desktop，使用命令创建项目 create-react-app 项目名 ，会创建一个项目文件夹
三、进入项目文件夹 cd 项目名
四、启动项目 npm start ，浏览器跳转显示项目页面，默认端口号3000，关闭项目 ctrl+c
public文件夹
静态资源文件夹，存放主页面index.html，图片，静态资源配置文件manifest.json，爬虫协议文件robots.txt等。
在react项目中，只有一个index.html文件，页面元素靠组件实现。
react初始化项目public文件夹中的内含文件：
manifest.json：加壳文件，给html页面加应用的壳子，比如需要安卓应用，加安卓的壳子，生成.apk文件，变成安卓应用。细节可以单独搜课程了解。
index.html（必须）：必须包含root容器。：当浏览器不支持js展示时，显示标签内的内容。
robots.txt：包含一些爬虫协议。
src文件夹
源码文件夹，存放js, css文件。App.js为App组件，App.css为App组件的样式文件，App.test.js用于给App做测试，index.js为入口文件，
react初始化项目src文件夹中的内含文件：
App.js（必须）：App组件，主组件，往index.html的root容器里放App组件，其他组件放在App组件里。
index.js（必须）：入口文件，进行渲染App组件到index.html的root容器里。
React.StrictMode标签，用来检测App组件及其子组件的语法使用等是否正确。
reportWebVitals.js：引入性能库。
setupTests.js：用于组件测试，引入第三方库。
创建一个Hello组件
使用react脚手架在终端创建一个默认项目，删掉默认的public文件夹与src文件夹，新建空的public文件夹与src文件夹（体验搭建项目目录）。
新建必须文件，public文件夹：index.html，src文件夹：App.js和index.js。
DOCTYPE html>
<html lang="en">
<body>
<div id="root">div>
body>
html>
// App.js
// 引入react核心库
import React from 'react'
// 引入子组件
import Hello from './Hello.js'
// 创建类组件
class App extends React.Component{
render(){
return (
<Hello/>
)
}
}
// 向外默认暴露App组件
export default App
// index.js
// 引入react核心库
import React from 'react'
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'
// 将App组件渲染到页面
ReactDOM.render(<App/>,document.getElementById('root'))
// Hello.js
// 引入react核心库
import React from 'react'
// 创建Hello组件，并向外默认保留
export default class Hello extends React.Component{
render(){
return (
<div>Hello React</div>
)
}
}
简略写法
// 引入react核心库
import react,{Component} from 'react'
// {}不是对象的解构赋值，是es6模块化编程的部分暴露，React.Component使用的是部分暴露
// 创建组件时可直接使用COmponent
class App extends Component{}
export部分暴露，直接使用export暴露对象，不适用default关键字
// 举例说明{}不是对象的解构赋值，是es6模块化编程的部分暴露，React.Component使用的是部分暴露
// 新建moudle.js
// 创建一个React对象，自定义对象，与react框架的React对象无关
const React= {a:1,b:2}
// 创建一个Component类，部分暴露出去，自定义类，与react框架的Component无关
export class Component{}
// 将类挂到对象上
React.Component = Component
// 默认暴露对象
export default React
// 在App.js中，引入moudle.js中的Component类
import {component} from './moudle.js'
在实际开发中，会将子组件与App组件分开路径存放。在src目录下创建components文件夹，存放子组件。
子组件包含js文件和css样式文件，因此可以给每个子组件单独设立文件夹，文件夹中包含子组件js文件和css文件。在App组件内引入时可以按以下写法：
// 在App.js内引入
import Hello from ./components/Hello/Hello.js
一般文件后缀.js可以省略：
// 在App.js内引入
import Hello from ./components/Hello/Hello
更精简写法，可以把Hello.js和Hello.css更名为index.js和index.css，index.js文件默认为第一选择，所以省略js文件后写法可以变为：
// 在App.js内引入
import Hello from ./components/Hello
区分组件js文件和一般js文件，可以使用两种方法：1.js文件命名首字母为大写 2.将文件后缀改为jsx，jsx文件在引入时也可以省略后缀。
样式模块化
多组件的时候就会有多个样式文件，所有的样式文件最后都会汇总到App组件里，如果有相同类名的样式，会产生样式冲突。
为解决样式冲突，将样式模块化。使用关键字moudle将文件命名修改为index.moudle.css，这样引入样式文件时可以模块化使用：
// 引入react核心库
import React,{Component} from 'react'
// 在Hello.js内引入css文件
import hello from './index.moudle.css'
export defailt class Hello extends Component{
render(){
return (
<div className={hello.title}>Hello React</div>
)
} // 使用css文件中定义的title类样式
}
VS CODE插件安装
在VS CODE搜索ES7 React/Redux/GraphQL/React-Native snippets，下载安装插件，可以使用快捷键快速生成代码片段。
rcc ==> 根据文件名快速生成类组件
rfc ==> 根据文件名快速生成函数组件
更多快捷键可以查看插件介绍。
组件的编码化流程
1.拆分界面，抽取组件
2.实现静态组件，使用组件实现静态页面效果
3.实现动态组件：a. 动态显示初始化数据（数据类型、数据名称、保存在哪个组件） b. 交互（各种监听事件）