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)事件的向上传播(冒泡)
相关推荐
你真的可爱呀33 分钟前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
爱因斯坦乐2 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
学好statistics和DS2 小时前
【CV】神经网络中哪些参数需要被学习?
人工智能·神经网络·学习
Ro Jace2 小时前
模式识别与机器学习课程笔记(4):线性判决函数
人工智能·笔记·机器学习
Rousson3 小时前
硬件学习笔记--82 连接器的选用原则与流程
笔记·单片机·学习
Larry_Yanan5 小时前
QML学习笔记(四十)QML的ApplicationWindow和StackView
c++·笔记·qt·学习·ui
开开心心loky7 小时前
[iOS] KVC 学习
学习·ios·objective-c·cocoa
哲Zheᗜe༘8 小时前
了解学习Python编程之python基础
开发语言·python·学习
youliroam8 小时前
成语接龙学习
学习·golang·uniapp·成语接龙
摇滚侠10 小时前
Spring Boot 3零基础教程,Spring Boot 日志的归档与切割,笔记22
spring boot·redis·笔记