React项目创建以及结构

react是什么

• React是一个声明式，高效且灵活的用于构建用户界面的JavaScript组件库，使用react可以将一些简短，独立的代码片段合成复杂的UI界面，这些代码片段被称作组件

react介绍

• facebook公司的开源项目 2013年5月 开源（Angar2012年开源，vue2016年开源）
• js框架（MVC框架，专注于V）
• 能够构建大型应用
• vue面向中小型应用
• 市场项目（饿了吗）

react特点

• 声明式 （虚拟DOM，数据改变，更新视图）
• 组件化 （component使用js编写，而不是template–使传递数据更轻松，状态与DOM分离）
• 一次学习，随处编写

当前版本

16.x

脚手架create-react-app

• react使用到了jsx语法（浏览器不支持，需使用webpack编译成js语法）

创建项目

• 全局安装create-react-app
  • npm install -g create-react-app
  • 创建项目
    • create-react-app 项目名
• 非全局安装创建项目
  • npx create-react-app 项目名（临时安装react脚手架）

安装的内容

• react：react的顶级库
• react-dom：将jsx编辑的react编译成浏览器能识别的js和标签（jsx:js+xml; react有很多的运行环境，比如app端的react-native）
• react-script：react应用程序的运行脚本（webpack等）

react的脚本命令

• yarn start 运行开发环境
• yarn bulid 运行生产环境
• yarn test 运行测试环境
• yarn eject react配置的抽离（不可逆）
  • 从node_modules的react-script文件中抽离配置文件，项目中会多出两个文件 config（脚手架等配置文件）和 scripts（运行环境的配置）

npm安装失败解决

• 切换npm镜像为淘宝镜像
• 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
• 如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行npm install命令
• 再不能解决就删除node_modules及package-lock.json的同时清除npm缓存npm cache clean --force 之后再执行npm install 命令

项目文件分析

build

• 生产环境文件

public

• 静态资源文件

• public>index.html

  • #root–整个项目的容器
  • 设置icon

• public>manifest.json

  • 一些背景颜色，图标大小，字体颜色等css样式的设置

config（从node_modules抽离时生成，不可逆）

• 脚手架等配置文件

scripts（从node_modules抽离时生成，不可逆）

• 运行环境的配置

src

• 项目开发目录

src>index.js

• 相当于webpack的入口文件
• 主要的功能
  • 渲染app组件
    • ReactDOM 把虚拟dom渲染成真实dom，并把真实dom插入到一个容器（dom标签）中
    • ReactDOM.render（组件，document.getElementById(‘root’) (容器)）
  • 设置通用样式

src>index.css

• 全局样式

src>app.js

• 引入react，样式(index.js)，图片
• 函数式组件（无状态组件（PureComponent））

Function App() {
   //组件名
    return (
        组件（
            组件名必须大写， 否则报错
            jsx语法（使用jsx语法必须要引入react），
            单大括号 {
    函数表达式 }，
            根元素唯一，不渲染根元素使用Fragment嵌套
            组件不需要注册,
            注释：{
    多行注释 }，注释也是js语法
      ）
   )
}

//其他写法

const App = (props) => <h1>欢迎进入{
   props.name}的世界</h1>

使用：
1、
App({
   
    name: 'react'
})//不符合jsx语法
2、
// React组件的调用方式
<App name="react" />,

• 类组件（class）

    import React , {
    Component } from 'react'
    class App extends Component{
   
    //react之前 React.createClass
        render(){
   
            <Flagment>app</Flagment>
        }
    }
    export default App
    
    同一个js文件中class组件嵌套
    
    原理：
    被嵌套组件实例化，再在另一个组件中使用
    /*const app = new App({
        name: 'react'
    }).render()*/
    可以不写，可以直接写类名

无状态组件 vs class组件

• 函数式组件是直接调用（调用函数），类组件其实就是一个构造器，每次使用组件都相当于在实例化组件
• jsx语法中的回避，
  组件可以写html，css和js
  但会出现冲突
  css的class会被识别为js中的关键字或保留字
  解决：css的class=》className
  css的value=》defaultValue
• 导出组件（e