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 存放组件并导出

在webstorm中写rsc，再按Tab键，可自动写出框架

可以在另一个JS中调用此组件，格式<组件名/>

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

2.基于类的组件

必须要继承React.Component

3.组件的创建

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

组件名

三、事件

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

（1）利用回调函数绑定事件

（2）利用组件绑定事件

注意在调用的时候，clickHandler不能加（）

（3）事件的向上传播（冒泡）

四、props

实现组件也能传递参数，从而保证组件的复用/动态设置，避免数据的写死

在组件之间，父组件可以通过props(属性)向子组件传递数据

1.在父组件中传入数据

可以传字符串、对象、函数.....

也可以指定日期

2.在子组件中接收实参