编写方式:
-
脚本引入方式 script标签 入门学习使用
-
react.js react库 组件 虚拟DOM对象
-
react-dom.js 操作DOM渲染 render
-
babel.min.js 语法转义 JSX语法
-
-
脚手架方式 类vue-cli 工程化方式 企业中开发使用
JSX语法 javascript中拥有写html的体验 xml
JSX代码中使用JS代码部分需要通过{}
包裹
组件:组成页面的零部件 封装 复用
封装组件方式:
-
rfc 函数组件 function 方法名 大驼峰
-
rcc 类组件 class render方法返回JSX语法标签
props 外部传参给组件内部使用 函数传参 类方式 实例化时传参
组件调用:
-
函数方式 函数调用
-
类方式
{new App({name:'hello'})}
事件 事件触发
的方式时,this指向的问题?
默认情况,浏览器执行的window
严格模式 undefined React默认严格模式
<button onClick={this.show}>点击</button>
解决方案:
方法一: 通过bind绑定this下传
<button onClick={this.show.bind(this)}>点击</button>
方法二: 普通函数方法 事件触发丢失this指向 箭头函数定义的方法不会丢失
show = ()=>{} <button onClick={this.show}>点击</button>
方法三: 定义还是使用普通函数方法 箭头函数调用不会丢失this.
中转一下
-
事件触发箭头函数 箭头函数的内部this 是正常的 没有丢失
-
箭头函数 调用普通函数方法 由于不是事件直接触发普通函数方法,所有this指向也正常
<button onClick={()=>this.show()}>点击</button>
脚手架
环境准备
①node环境 检测node环境 npm包管理工具
通过以下命令检测环境是否正常,如果提示非命令找不到等信息.说明环境坏了,重装
# 查看node版本 node -v # npm 版本 npm -v
②镜像源
npm包的仓库地址 在国外的 国内下载很慢 一般会配置到国内源
# 查看当前源地址 如果为国内的就不用修改了 npm config get registry # 设置源地址 npm config set registry https://registry.npm.taobao.org/
生成项目包
包下载过程中会有多依赖,这些依赖实际在包使用过程中不需要.下载下来存在本地又占用空间.npx临时解决依赖问题,
用完即走,比npm安装更为清洁一些.
需要在哪儿创建项目包,以下命令就在哪儿执行
npx create-react-app reactpro
在生成项目包执行过程中,如果cmd命令行卡主不动了,敲击回车继续执行就可以了
生成项目完成后,注意查看提示信息.关键信息看success
等
进入目录,启动服务
cd reactpro npm start
运行以上命令之后,会开启一个端口,记得防火墙等安全软件一定要通过
.
启动之后可能的问题
正常启动图示
浏览器查看的效果
访问流程
-
浏览器输入地址
localhost:3000
:localhost代表本地域名,在本地[本机,本电脑] 监听在3000端口的服务 -
react自带了一个开发服务器,运行在3000端口
-
服务器默认返回index.html 根挂载点
<div id="root"></div>
-
隐藏操作 脚手架工具帮我们把
/src/index.js
引入到/public/index.html
-
index.js文件中,引入了
App.js
组件并插入渲染到div为id的容器中