React学习笔记03-----手动创建和运行

一、项目创建与运行【手动】

react-scripts集成了webpack、bable、提供测试服务器

1.目录结构

public是静态目录,提供可以供外部直接访问的文件,存放不需要webpack打包的文件,比如静态图片、CSS、JS

src存放源码

(1)index.html

是首页的模板

(2)index.js

是js的入口文件,webpack打包时会以此文件为入口,JS编译后,再关联到index.html中

主要写引入文件以及渲染,核心代码写在后续的App.js中

(3)初始化

也可以用npm,生成package.json文件

(4)安装项目依赖

package.json文件中添加了对应的依赖

2.运行

在index.js中写完内容之后

需要执行npx react-scripts build,会自动调用webpack,对项目打包,生成build文件夹,打开build文件夹下的index.html,即可看到页面。

当修改内容时,需要重新打包,效率低,所以【适合整个项目开发完成后】

执行npx react-scripts start,会自动调用webpack,启动内置的测试服务器,会实时的编译代码,修改后页面会跟着刷新。ctrl+c结束服务器

可以在package.json中写以下命令,这样就可以简化执行命令: npx start和npx run build

3.添加样式

创建一个css文件,文件名最好和关联的js结构的文件名一致,需要在js文件中引入

但是传统写法虽然可以复用样式,但操作仍很复杂

二、组件

1.基于函数的组件(简单常用)

新建一个App,js 存放组件并导出

在index.js中导入,便可渲染组件<APP/>

2.基于类的组件

必须要继承React.Component

3.组件的创建

在src文件夹下新建一个Components文件夹,存放所有组件的js文件,每个组件要对应一个css文件

三、事件

传统定义事件:通过原生DOM的方法进行操作,在React中不行

(1)利用回调函数绑定事件
(2)利用组件绑定事件

注意在调用的时候,clickHandler不能加()

(3)事件的向上传播(冒泡)
相关推荐
_落纸1 小时前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE2 小时前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 小时前
SpringBoot
笔记·学习
萘柰奈2 小时前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 小时前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 小时前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie3 小时前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿3 小时前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng3 小时前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed10 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件