前言
一、初始化react脚手架
- 1.react脚手架：
- 2.创建项目并启动
二、脚手架文件介绍
- 1.public
- 2.src
三、一个简单的Hello组件
四、样式的模块化
五、vscode中react插件的安装
六、组件化编码流程
七、组件的组合使用-TodoList案例
- 1.静态组件
- 2.动态初始化列表
- 3.添加todo
- 4.鼠标移入效果
- 3.添加一个todo
- 4.对props进行限制
- 5.删除一个todo
- 6.实现底部功能--Footer
- 7.总结TodoList案例
写在后面

前言

上一篇：React面向组件编程（下）
本篇内容：React应用（基于react脚手架）

一、初始化react脚手架

1.react脚手架：

1.xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

a.包含了所有需要的配置（语法检查、jsx编译、devServer…）
b.下载好了所有相关的依赖
c.可以直接运行一个简单效果

2.react提供了一个用于创建react项目的脚手架库: create-react-app
3.项目的整体技术架构为: react + webpack + es6 + eslint
4.使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2.创建项目并启动

全局安装：npm i -g create-react-app
切换到你想创建项目的目录下，使用命令：create-react-app xxx(项目名，比如，hello-react)
进入项目文件夹：cd hello-react
启动项目：yarn start或npm start
注：若create-react-app安装失败，可以尝试更换npm源，更换成淘宝的，参考

安装成功后：
启动项目：
会让你选择用哪个浏览器打开，成功的页面（即成功运行了react官方给的模板项目）：

二、脚手架文件介绍

1.public

public文件一般存静态资源，比如页面、样式、公共的图片

以后写项目时，只有一个.html文件，也就是单页面应用(SPA)

favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件

2.src

App.js：定义了一个组件App
App.css：组件App的样式文件
App.test.js：测试App的，我们几乎不用
index.css：通用的样式
index.js：入口文件
logo.svg：logo图片
reportWebVitals.js：记录页面性能，里面用了web-vitals库
aetupTest.js：用于组件测试，里面用了第三方库web-vitals

三、一个简单的Hello组件

后缀同为.js，区分组件文件和普通js文件：
1.组件文件首字母大写，普通js文件首字母小写
2.把组件文件后缀改为.jsx

上图中的写法在App.js中引入组件时略显臃肿，下图中是另一种写法：

四、样式的模块化

当两个组件样式中有相同的className时，后引入的组件样式会覆盖掉之前的样式

把文件名改为index.module.css
引入css文件时：import hello from './index.module.css'
使用样式时：className={hello.title}

样式的模块化用的不是很多，一般用less的嵌套写法即可

五、vscode中react插件的安装

在vscode的插件市场中搜索react

b站React禹哥版视频笔记-React应用（基于react脚手架）相关推荐

b站React禹哥版视频笔记-React面向组件编程（上）
目录前言一.开发者工具的安装二.函数式组件三.复习类相关知识四.类式组件五.组件实例的三大核心属性1:state 1.对state的理解 2.初始化state 3.react中的事件绑定 ...
b站React禹哥版视频笔记-React入门
目录前言一.React简介 1. React是什么 2. 谁开发的 3. 为什么要学 4. React的特点 5. 学习React之前你要掌握的JS基础知识二.hello_react 案例三. ...
vue2+vue3天禹老师版复习笔记
文章目录 1.Vue2基础 1.1.初始Vue 1.2.模板语法 1.3.数据绑定 1.4.MVVM模型 1.5.el和data的两种写法 1.6.回顾defineProperty方法 1.7.数据代 ...
第一天学习b站比特鹏哥的视频
前段时间听中国大学慕课翁凯老师的c语言,感觉讲的很少,而且我已经大三了,因为专升本的原因,比人家本科生要基础差得多,专科与本科差的绝对不是一张毕业证,更多的是基础,计算机的思想,我要补的东西还有很多, ...
mybatis绑定参数 sql调用参数、关联查询各种方式（B站雷丰阳的视频笔记切图、为了复习用。）
想看视频的请跳转 https://www.bilibili.com/video/BV1d4411g7tv mybatis会把传参封装成一个map,key是递增的数字 #{}和${}的区别 #{}属于预 ...
B站左程云算法视频笔记(01
1.位运算异或 ^ ,可理解为不进为相加,满足结合律和交换律 a^a=0: a^0=a: 交换a和b a=a^b: b=a^b: a=a^b: 但必须满足是位置不同的(同一内存位置自己异或结果为0) ...
B站左程云算法视频笔记05
大数据有一个包含100亿个URL的大文件,假设每个URL占用64B,请找出其中所有重复的URL (布隆过滤器或者哈希函数分流) [补充]某搜索公司一天的用户搜索词汇是海量的(百亿数据量),请设计一种 ...
绿茶影视内容站群-明王优化版吸粉视频站群-轻量级CMS站群
简介: 绿茶内容站群-明王优化版视频站群-轻量级CMS站群,视频电影等行业专用精品站群,绿茶站群为独立站群系统(无需依托CMS),独立的整篇电影内容优化内容库(拒绝句子拼凑),模板自适应PC端和移动端 ...
基于React开发范式的思考：写在Lesx发布之际
例子:lesx-example webpack loader: lesx-loader 一些背景现在前端框架已经呈现出React.Angular.Vue三足鼎立的局势,对于三者的对比以及技术选型的思 ...

b站React禹哥版视频笔记-React应用（基于react脚手架）

目录

前言