3_React应用（基于脚手架）

文章目录

1、使用create-react-app创建react应用
 2、样式模块化
 3、vsCode的react插件的安装
 4、功能界面的组件化编码流程

一、使用create-react-app创建react应用

1、react脚手架

就类似于按照官方的规定，先定义好一个房子的框架模板。需要建一个新房子时，只需要把房子的框架模板拿过来搭好框架，打好基础，再根据客户的各种各样的个性要求进行开发，造出适合不同客户所需要所喜欢的房子。

用来帮助程序员快速创建一个基于XXX库的模板项目
1. 包含所需要的配置（语法检查、jsx编译…）
2. 下载好所有相关依赖
3. 直接运行一个简单的效果
react提供了一个用于创建react项目的脚手架库：create-react-app
项目的整体技术框架为：react+webpack+es6+eslint
使用脚手架开发项目的特点：模块化、组件化、工程化

2、创建项目并启动

创建前需先安装node.js

// 进入到命令行面板中，全局安装 
npm i -g create-react-app
// 切换到要创建项目的目录下，创建项目test-app
create-react-app test-app
// 进入到项目文件夹
cd test-app
// 启动项目
npm start

在这里插入图片描述

可安装开发软件VSCode，打开项目文件夹test-app，直接进入操作

3、react脚手架项目结构

├─node-modules ------依赖包下载

├─public ------静态资源文件夹

│ ├─favicon.ico ------网站页签图标

│ ├─index.html ------主页面（只有一个html文件，SPA单页应用程序）

│ ├─logo192.png ------logo图

│ ├─logo512.png ------logo图

│ └─manifest.json ------应用加壳的配置文件

│

├─src ------源文件夹

│ ├─App.css ------App组件样式

│ ├─App.js ------App组件（组件外壳，容器）

│ ├─App.test.js ------用于给App做测试

│ ├─index.css ------样式

│ ├─index.js ------入口文件（引入react核心库、react-dom库、样式、App组件，渲染组件到网页）

│ ├─logo.svg ------logo图

│ ├─reportWebVitals.js ------页面性能分析文件（需要web-vitals库的支持）

│ └─setupTests.js ------组件单元测试的文件（需要jest-dom库的支持）

│

├─package.json ------包的说明文件

├─README.md ------项目的说明文件

└─.gitignore ------git源码管理忽略的文件夹

以下是index.html文件
在这里插入图片描述

以下是index.js文件

在这里插入图片描述

二、样式模块化

// 1、index.css的文件名称改为 index.module.css
// 2、jsx文件引入
import React, {
    
    Component} from 'react'
import hello from 'index.module.css'
export default class hello extends Component {
    
    
  render(){
    
    
    return <h2 className={
    
    hello.title}>hello</h2>
  }
}

三、vsCode的react插件的安装

名称：ES7 React/Redux/GraphQL/React-Native snippets

四、功能界面的组件化编码流程

拆分组件：拆分界面，抽离组件
实现静态组件：使用静态组件实现静态页面效果
实现动态组件：动态展示初始化数据（数据类型、数据名称、存在哪个组件），交互（从绑定事件监听开始）