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)事件的向上传播(冒泡)
相关推荐
rui锐rui5 分钟前
大数据学习6:Sqoop数据迁移工具
大数据·学习·sqoop
psybrain13 分钟前
脑科学圈| 利用眼动追踪评估演讲情境下焦虑障碍儿童的注视行为
学习·心理学·脑科学·课堂·焦虑·儿童青少年·眼动
笑衬人心。38 分钟前
Java 17 新特性笔记
java·开发语言·笔记
序属秋秋秋2 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
B1nna3 小时前
Docker学习
学习·docker·容器
quant_19864 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
promising-w8 小时前
【运算放大器专题】基础篇
嵌入式硬件·学习
宝山哥哥8 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
前端开发与ui设计的老司机9 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui