一、create-react-app（CRA）
1、安装create-react-app
$ npm install -g create-react-app
如果不想全局安装，可以使用npx安装
npx create-react-app appName
1、如果npm安装失败，可切换为npm淘宝镜像，
2、或者使用yarn
yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源
yarn config list // 查看yarn 镜像列表
3、或删除node_modules及yarn-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令
2、创建一个项目
$ create-react-app appName
这个过程会安装react（react的顶级库）、react-dom（要在web上运行就使用react-dom）、react-script（包含运行和打包react应用程序的所有脚本及配置）
3、目录结构
├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── yarn-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json 项目依赖配置记录文件 、 记录项目脚本命令
├── public 静态公共目录（ 生产环境 ） 不会被webpack编译
|-- config 项目webpack配置文件
|-- scripts 项目wepback脚本命令执行文件
└── src 开发用的源代码目录
- index.js 项目入口文件
- index.css 项目全局样式
- App.js 构建了一个App组件，是项目最大的组件 【 类似根组件 】
- App.css 是App组件的样式文件
- App.test.js 是App组件测试文件
- logo.svg 初始项目的界面logo
- serverWorker 内部文件，我们不操作
4、关于React
React 起源于 Facebook 的内部项目
react是团队项目
react是第一个使用虚拟DOM前端框架
React最为重要的一个部分就是： 组件
React这个框架最初的目的是为了： 实现文件上传
React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并(这也是与vue的区别之一，因为vue没有合并)
优点：
虚拟DOM
组件系统（组件指的就是同时包含了html、css、js、image元素的聚合体）
单项数据流
JSX语法
5、开始第一个React程序
把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js
import React from 'react'
import ReactDOM from 'react-dom'
//或const app = '<h3>你好世界</h3>'
ReactDOM.render(
<h1>Hello World</h1>,
//在这使用 app,
document.getElementById('root')
)
6、组件创建
组件名必须大写！！
函数式组件（无状态组件）
import React from 'react'
import ReactDOM from 'react-dom'
const App = (props) => <h1>欢迎进入{props.name}的世界</h1>
ReactDOM.render(
// React组件的调用方式
<App name="react" />,
document.getElementById('root')
)
class组件
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
// 注意必须用this.props
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
ReactDOM.render(
<App name="react" />,
document.getElementById('root')
)
在16以前的版本还支持这样创建组件, 但现在的项目基本上不用
// react 15.x
React.createClass({
render () {
return (
<div>{this.props.xxx}</div>
)
}
})
7、组件的组合、嵌套
组件的嵌套: 将子组件在父组件的jsx中以标签的形式使用
组件的组合：将一个组件写在另一个组件的内容中，然后在外层组件中通过 this.props.children来接收内容中的组件
推荐使用嵌套
组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>Hello World</h1>
)
}
}
/** 由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom**/
// 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹
class App extends Component {
render () {
return (
<Fragment>
<Title />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:
使用react构造组件，babel进行编译—> JavaScript对象 — ReactDOM.render()—>DOM元素 —>插入页面
8、组件的样式
行内样式
使用calssName
Hello world
不同条件加不同样式
推荐使用classname/classnames
在js中写css
styled-componentsnpm链接
9、组件的数据挂载
<1>属性props
props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置
属性是描述性质、特点的，组件自己不能随意更改;但可以通过父组件主动重新渲染的方式来传入新的 props
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>您好，我是{this.props.name}</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.name}是一个构建UI的库</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title name="React" />
<Content name="React.js" />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
//------------设置组件默认的props---------------
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
// 使用类创建的组件，直接用static创建defaultProps
static defaultProps = {
name: 'React'
}
render () {
return (
<h1>您好，我是{this.props.name}</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.name}是一个构建UI的库</p>
)
}
// 使用箭头函数创建的组件，需要在这个组件上直接写defaultProps属性
Content.defaultProps = {
name: 'React.js'
}
class App extends Component {
render () {
return (
<Fragment>
{/* 由于设置了defaultProps， 不传props也能正常运行，如果传递了就会覆盖defaultProps的值 */}
<Title />
<Content />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
//-----------使用props.children来嵌套组件------------------
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>您好，我是{this.props.children}</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.children}</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title>React</Title>
<Content><i>React.js</i>是一个构建UI的库</Content>
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types
$ npm i prop-types -S
<2>状态state
状态就是组件描述某种显示情况的数据，由组件自己设置和更改
使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
定义state的两种方式：
方法1：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
state = {
name: 'React',
flag: false
}
render () {
return (
<div>
<h1>您好，我是{this.state.name}</h1>
<button>
{
this.state.flag ? '开启' : '关闭'
}
</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
方法2(推荐使用)：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
constructor() {
super()
this.state = {
name: 'React',
flag: false
}
}
render () {
return (
<div>
<h1>您好，我是{this.state.name}</h1>
<button>
{
this.state.flag? '开启' : '关闭'
}
</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
更改状态setState
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
constructor() {
super()
this.state = {
name: 'React',
flag: false
}
}
handleBtnClick = () => {
this.setState({
flag: !this.state.flag
})
}
render () {
return (
<div>
<h1>您好，我是{this.state.name}</h1>
<button onClick={this.handleBtnClick}>
{
this.state.flag? '开启' : '关闭'
}
</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
注意：setState的两个参数
(1)参数是对象：
this.setState({ flag: !this.state.flag })
(2)参数是方法
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
})
注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props
setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
}, () => {
console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)
<3>属性和状态的异同
相同点：
都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同)
不同点：
属性能从父组件获取，状态不能
属性可以由父组件修改，状态不能
属性能在内部设置默认值，状态也可以
属性不在组件内部修改，状态要改
属性能设置子组件初始值，状态不可以
属性可以修改子组件的值，状态不可以
尽量多用props，少用state
尽量多写无状态组件，少写有状态组件
如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
