没有合适的资源?快使用搜索试试~ 我知道了~
知识点 01-面向对象 后续在 React 过程中大量用到面向对象编程思想 重点讲解 ES6 的面向对象 类的概念 ES6 提出的 class 类的概念。在 ES5 中 function 构造函数来实现面向对象 类是对象的抽象,对象是类的具有表现 编写类的时候,将对象的公共属性和行为提取出来 class Student{ }将 ES6 面向对象代码编译为 ES5 代码过后,默认生成一个 IIFE,目的就算为了隔离作用 域 ES5 里没有模块化编程,全局作用域和函数作用域,模块作用域我们使用 IIFE 来实现
资源详情
资源评论
资源推荐

知识点 01-面向对象
后续在 React 过程中大量用到面向对象编程思想
重点讲解 ES6 的面向对象
类的概念
ES6 提出的 class 类的概念。在 ES5 中 function 构造函数来实现面向对象
类是对象的抽象,对象是类的具有表现
编写类的时候,将对象的公共属性和行为提取出来
class Student{
}
将 ES6 面向对象代码编译为 ES5 代码过后,默认生成一个 IIFE,目的就算为了隔离作用
域
ES5 里没有模块化编程,全局作用域和函数作用域,模块作用域我们使用 IIFE 来实现
属性和行为
class Police{
constructor(name,type){
this.name = name
this.type = type
this.job = function(){
console.log(this.name);
}
}
// 将行为写在构造函数外面
show(){
console.log("名字为"+this.name);
}
}

行为可以在构造器里面定义,也可以在类里面定义。
实例化对象,构造器里内容都会被当前属性,在产生对象上面动态创建。
类里定义的行为,默认放在原型对象身上
静态属性和静态行为
静态属性在属性前面增加一个 static 关键字。通过类名来绑定的属性称为静态属性
类属性和静态属性指的是一个意思
静态方法(行为)在方法之前增加了 static 关键字。调用的时候类名来调用
知识点 02-Yarn 包管理器
包管理器:npm
新的包管理器:yarn 在 react 编程过程中,文档里很多时候推荐我们用 yarn 包管理器来
管理项目的依赖包
npm 的缺陷
1. npm 包下载内容非常慢,需要配置国内淘宝镜像。
2. 同一个项目,安装依赖的时候,版本可能不统一。经常会看到包~5.0.3 表示安装
的 5.xx 的版本。
3. 下载报错的问题,中途如果出现某一个包下载报错,不会影响你其他继续下载
yarn 包管理器
1. 快速性:yarn 命令来下载过的每一个包都会被缓存起来。下载本地项目在执行这
个命令的时候,从缓存获取包
2. 安全性:在执行代码之前。yarn 通过算法验证你的包是否合法
3. 可靠性:你下载的每个包,都会将版本进行锁定。,lock 文件。以后在更新项目,
版本一般是统一的
4. 并行安装:npm 按照队列一个一个的执行 package.json 文件依赖,yarn 包管理
器并行
使用 yarn 包管理器
通过 npm 来安装 yarn。

npm install -g yarn
yarn --version
查看 yarn 的配置信息
yarn config list
配置国内镜像
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dis
t/node-sass -g
使用 Yarn 命令
1. 初始化项目
2. yarn init -y
-y 忽略填写的信息
3. 下载包
4. yarn add vue@2.6.10
5. yarn add vue
6. 删除包
7. yarn remove vue
8. 更新项目所有的包
9. yarn install
常用命令对比
npm 命令
yarn 命令
npm install
yarn add
npm install [package] —save
yarn add [package]
npm install [package] —save-dev
yarn add [package] —dev
npm install [package]@1.1.1 —save
yarn add [package]@1.1.1
npm uninstall [package] —save(-dev)
yarn remove [package]
npm update —save
yarn upgrade
npm init
yarn init

知识点 03-React 入门概念
访问官网:https://react.docschina.org/
英文网站:https://reactjs.org
React 起源于 Facebook 内部,Instagram 这个网站。2013 年 5 月开源这个框架。
这个项目最早在国外非常的流行,后来引入到国内。和 Vue 框架作为两大核心框架。
angular
随着使用的用户越来越多,React 分一个分支出来。React-Native,专门做移动端开发
React 特点:
1. 组件化开发,符合现代 web 的开发模式
2. 技术成熟,社区完善。资源丰富
3. facebook 开发的框架,值得信赖,技术支持
4. 使用方式比较简单,开发起来比较方便
5. React 目前比较火,市场占有率比较高,适合重大型项目
React 和 DOM
React 这个框架,我们可以在已经开发完成的中使用,也可以从 0 开始搭建脚手架工具来
使用
react 需要的依赖包
yarn add react
yarn add react-dom
yarn add babel-standalone
react:react 核心包,里面包含 react 基础部分
react-dom:提供与 DOM 相关的一些操作
babel-standalone:使用 babel 编译器将代码转义,才能被浏览器识别,react 中写的
代码 jsx 代码。浏览器无法直接识别,运行代码就必须将写代码同 babel 进行版本转化,
比如 JSX-JS ES2020—ES5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial
-scale=1.0">
<title>Document</title>

<script src="./node_modules/react/umd/react.development.js
"></script>
<script src="./node_modules/react-dom/umd/react-dom.develo
pment.js"></script>
<script src="./node_modules/babel-standalone/babel.js"></s
cript>
</head>
<body>
<div id="root">
</div>
<script>
// 新创建一个节点
const template1 = React.createElement("h1",null,"hello
React")
const template2 = React.createElement("h1",null,"hello
React2")
const temp = React.createElement("div",null,[template
1,template2])
ReactDOM.render(temp,document.getElementById("root"))
// const odiv = document.createElement("div")
// odiv.innerHTML = "<h1></h1>"
// document.body.appendChild(odiv)
</script>
</body>
</html>
使用 JSX 的方式来开发项目
<!DOCTYPE html>
<html lang="en">
剩余125页未读,继续阅读















asdfgh12484
- 粉丝: 0
- 资源: 5
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


安全验证
文档复制为VIP权益,开通VIP直接复制

评论0