烟台市政府网站集约化建设方案百度快照手机版网页版
一、项目创建与运行【手动】
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.在子组件中接收实参
