react-脚手架

react-脚手架

何为脚手架

• 脚手架：工地中建造建筑时，搭建的架子模板，就叫做脚手架
• xxx脚手架：就是用来帮助程序员快速创建一个基于xxx库的模板项目，包含：
  • 所有需要的配置(语法检查、jsx编译、devServer)
  • 下载好了所有相关的依赖
  • 可以直接运行一个简单的效果
• react提供了一个创建react项目的脚手架库：create-react-app
• 项目整体技术架构为：react+webpack+es6+eslint
• 使用脚手架开发的特点：模块化、组件化、工程化

如何创建并启用

**第一步：**全局安装：npm install -g create-react-app

**第二步：**切换到想要创建项目的目录，执行命令：create-react-app hello-react

**第三步：**进入项目文件夹：cd hello-react

**第四步：**启动项目：npm start

• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUMLiLcg-1649205459608)(…/…/AppData/Roaming/Typora/typora-user-images/image-20220405142128828.png)]

yarn eject

• 用这个命令，会把被隐藏的webpack文件暴露出来，而且不可逆
• 

VSCODE中启动

按ctrl+`可打开命令行终端

react脚手架项目目录详解

整体项目目录：

丨-- node_modules//node模型仓库
丨-- public      //静态资源库，html、ico、png等一些静态文件放在这里
	丨--favicon.ico //标题栏的图标文件
	丨--index.html //整个项目的唯一出口，一个项目中只能有一个html页面
	丨--manifest.json //应用加壳时的配置文件
	丨--robots.txt //搜索引擎优化时的文件，爬虫
丨-- src			//源文件夹，我们要编写的内容在这里
	丨--APP.css	//APP组件的样式
	丨--APP.js	//APP组件的js文件
	丨--index.css //公共的样式文件
	丨--index.js  //项目的入口文件*****，就是webpack执行的第一个文件

index.html

• index.html是整个项目的唯一出口，一个项目中只能有一个html页面，就是index.html
• **SPA(Single Page Application)😗*单页面应用，react的项目一般都是单页面应用项目
• 内容：
  • 
    • manifest:做移动端加壳时用到的
    • noscript：当浏览器不支持加载script是展示的

APP.js

• 只有APP.js能够作为index.html中root下面的子组件，如果想添加子组件，就在APP.js下添加
• 

index.js*

• index.js十分重要，是webpack的入口文件，它的作用：
  • 引入各种各种全局下想要使用的文件，如：React、ReactDOM、babel等等

import React from 'react';//react包
import ReactDOM from react 'react-dom';//reactDOM包
import APP from './App';//APP组件
import reportWebVitals from './reportWebVitals';//做性能分析的


//用react渲染组件
ReactDOM.render(
    <React.StringMode>//校验你写的React语法是否合规
    <APP/>
    </React.StringMode>
    ,document.getElememtById("root"));


reportWebVitals();//做性能分析的

创建第一个helloworld

index.js

//引入react核心库
import React from 'react'
//引入reactDOM
import ReactDOM from 'react-dom'
//引入APP组件
import APP from './APP.vue'



//渲染APP到页面
ReactDOM.render(<APP/>,document.getElementById("root"))

APP.js

//创建“外壳”组件APP
import React from 'react'

class APP extends React.Component{
	render(){
		return(
			<h1>hello React</h1>
		)
	}
}


//导出APP
export default APP

样式模块化(私有化)

index.css//普通样式表
index.module.css //模块化样式表


//index.js中引入
import hello from './index.module.css'

react插件下载

第一步：在vscode中搜索react，安装Es7.。。

**第二步：**创建一个xxx.js文件

• 在空白文件中输入：

  • rcc：创建react class component类式组件

  • import React, { Component } from 'react'
    
    export default class Hello extends Component {
      render() {
        return (
          <div>Hello</div>
        )
      }
    }
    
    

  • rfc：创建react function component函数式组件

  • import React from 'react'
    
    export default function Hello() {
      return (
        <div>Hello</div>
      )
    }
    
    

功能性界面组件编码流程

1.拆分组件：拆分界面，抽取组件

2.实现静态界面：使用组件实现静态页面效果

3.实现动态组件：

• 动态显示初始化数据

  • 数据类型
  • 数据名称
  • 保存哪个组件

• 交互(从绑定事件监听开始)