多个网站对比表格怎么做,微信公众平台申请注册入口,做淘宝客网站好搭建吗,寻找锦州网站建设一、项目创建与运行【手动】 react-scripts集成了webpack、bable、提供测试服务器
1.目录结构
public是静态目录#xff0c;提供可以供外部直接访问的文件#xff0c;存放不需要webpack打包的文件#xff0c;比如静态图片、CSS、JS
src存放源码 #xff08;1#xff09…
一、项目创建与运行【手动】 react-scripts集成了webpack、bable、提供测试服务器
1.目录结构
public是静态目录提供可以供外部直接访问的文件存放不需要webpack打包的文件比如静态图片、CSS、JS
src存放源码 1index.html
是首页的模板 2index.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启动内置的测试服务器会实时的编译代码修改后页面会跟着刷新。ctrlc结束服务器 可以在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.在子组件中接收实参
