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 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
汇能感知3 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun3 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao4 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾4 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT5 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa5 小时前
HTML和CSS学习
前端·css·学习·html
ST.J5 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin5 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
看海天一色听风起雨落6 小时前
Python学习之装饰器
开发语言·python·学习