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)事件的向上传播(冒泡)
相关推荐
IMPYLH3 小时前
Python 的内置函数 reversed
笔记·python
码荼5 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
武昌库里写JAVA6 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
ysa0510306 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
祁思妙想7 小时前
八股学习(三)---MySQL
数据库·学习·mysql
今天背单词了吗9807 小时前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
mitt_7 小时前
《人生顶层设计》读书笔记7
笔记
智者知已应修善业8 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
amazinging8 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十一天
python·学习·appium
Jyywww1218 小时前
微信小程序学习笔记
笔记·学习·微信小程序