01-React安装(CRA)、概念、组件创建-嵌套-组合-样式-数据挂载的两种方式

一、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,