React 快速构建用户界面的JavaScript库

编写方式:

• 脚本引入方式 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的容器中