金山老师的笔记React脚手架
react提供了一个用于创建react项目的脚手架库：create-react-app
创建项目并启动
1.全局安装：npm i -g create-react-app
2.创建项目：create-react-app 项目名
在这一步，有可能会出现：
这样可以直接使用：npx create-react-app 项目名
3.等待下载完成，进入项目文件夹，运行一下
比如，我这的项目名称是hello,就先进入hello文件夹
cd hello
npm start //启动这个项目
这个时会自动的打开浏览器，展现这个项目：
项目的目录结构
我们先来看一下public这个目录下面的结构：
这里面最主要的还是这个Index.html文件：
<!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"
/>
<!--用于指定网页添加到手机主屏幕后的图标（仅仅支持ios）-->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--应用加壳时候的配置文件 -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- 浏览器不支持JS的运行的时候展现 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>src文件：
这里面其实最主要的就是App.js以及index.js，一个是组件，一个是将组件渲染到页面中的。
第一个脚手架应用
1.我们保持public中的Index.html不变
2.修改src下面的APP.js以及index.js文件
App.js: 【注意：创建好的组件一定要暴露出去】
//创建外壳组件APP
import React from 'react'
class App extends React.Component{
render(){
return (
<div>Hello word</div>
)
}
}
export default Appindex.js: 【主要的作用其实就是将App这个组件渲染到页面上】
//引入核心库
import React from 'react'
import ReactDOM from 'react-dom'
//引入组件
import App from './App'
ReactDOM.render(<App />,document.getElementById("root"))这样在重新启动应用，就成功了。
我们也不建议这样直接将内容放入App组件中，尽量还是用内部组件。
我们在顶一个Hello组件：
import React,{Componet} from 'react'
export default class Hello extends Componet{
render() {
return (
<h1>Hello</h1>
)
}
}在App组件中，进行使用
class App extends Component{
render(){
return (
<div>
<Hello />
</div>
)
}
}这样的结果和前面是一样的。
但是由于普通的Js和组件都是js，所一最好组件使用jsx去展示。
样式冲突
当组件逐渐增多起来的时候，我们发现，组件的样式也是越来越丰富，这样就很有可能产生两个组件中样式名称有可能会冲突，这样会根据引入App这个组件的先后顺序，后面的会覆盖前面的，
为了避免这样的样式冲突，我们采用下面的形式：
1.将css文件名修改： hello.css --- >hello.module.css
2.引入并使用的时候改变方式：
import React,{Component}from 'react'
import hello from './hello.module.css' //引入的时候给一个名称
export default class Hello extends Component{
render() {
return (
<h1 className={hello.title}>Hello</h1> //通过大括号进行调用
)
}
}功能界面的组件化编码流程
1.拆分组件:拆分界面，抽取组件
2.实现静态组件
3.实现动态组件
- 动态的显示初始化数据
- 数据类型
- 数据名称
- 保存在哪个组件
- 交互
注意事项：
1.拆分组件、实现静态组件。注意className、style的写法
2.动态初始化列表，如何确定将数据放在哪个组件的state中？
- 某个组件使用：放在自身的state中
- 某些组件使用：放在他们共同的父组件中【状态提升】
3.关于父子组件之间的通信
- 父组件给子组件传递数据：通过props传递
- 子组件给父组件传递数据：通过props传递，要求父组件提前给子组件传递一个函数
4.注意defaultChecked 和checked区别，defalutChecked只是在初始化的时候执行一次，checked没有这个限制，但是必须添加onChange方法类似的还有：defaultValue 和value
5.状态在哪里，操作状态的方法就在哪里