Reac入门

Reac入门

react私人学习笔记，内容来自网络搜索，js和react官网，仅供学习使用

JS复习

历史

JS历史
• 1995年网景公司的Brendan Eich10天开发的
• ECMAScript： ECMAScript是一种语言标准。
• JavaScript是网景公司对ECMAScript标准的一
种实现
• JS版本：
• JavaScript的版本，实际上就是说它实现了
ECMAScript标准的哪个版本。

基础语法

JavaScript每个语句以;结束，语句块用{…}。但是， JavaScript并不
强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的
结尾补上;

•以//开头直到行末的字符被视为行注释，注释是给开发人员看到， JavaScript引擎会自动忽
略：
• 另一种块注释是用/…/把多行字符包裹起来，把一大“块”视为一个注释

数据类型和变量

Number

JavaScript不区分整数和浮点数，统一用Number表示

字符串

字符串是以单引号’或双引号"括起来的任意文本
eg:“qqq”,‘ddd’

boolean

布尔值和布尔代数的表示完全一致，一个布尔值只有true、 false两种值，可以进行布尔&&，
||， !运算

比较运算符

对Number做比较时，可以通过比较运算符得到一个布尔值

第一种是= =比较，它会自动转换数据类型再比较
第二种是===比较，不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较(推荐使用 = = =)
NaN这个特殊的Number与所有其他值都不相等，包括它自己

null和undefined

null表示一个“空”的值
0是一个数值
’ '表示长度为0的字符串
undefined表示值未定义
事实证明，区分两者的意义不大。 大多数情况下，我们都应该用null。 undefined仅仅
在判断函数参数是否传递的情况下有用

数组

数组是一组按顺序排列的集合，集合的每个值称为元素。 JavaScript的数组可以包括任意数据
类型。
数组的元素可以通过索引来访问，起始值为0：

对象

avaScript的对象是一组由键-值组成的无序集合
要获取一个对象的属性，我们用对象变量.属性名的方式

变量和字符串

变量

变量在JavaScript中就是用一个变量名
表示，变量名是大小写英文、数字、 $
和_的组合，且不能用数字开头。变量
名也不能是JavaScript的关键字，如if、
while等。
在JavaScript中，使用等号=对变量进
行赋值。可以把任意数据类型赋值给变
量，同一个变量可以反复赋值，而且可
以是不同类型的变量，但是要注意只能
用var申明一次
JS是变量本身类型不固定的动态语言

模板字符串

表示方法和上面的多行字符串一样，但是
它会自动替换字符串中的变量

条件判断和循环

if else

for / while循环

函数的定义与调用

函数定义

•function指出这是一个函数定义；
• foo是函数的名称；
• (a,b)括号内列出函数的参数，多个参数以,分隔；
• { … }之间的代码是函数体，可以包含若干语句，甚至
可以没有任何语句

调用函数

调用函数时，按顺序传入参数即可
由于JavaScript允许传入任意个参数而不影响调用，
因此传入的参数比定义的参数多也没有问题，虽然函
数内部并不需要这些参数

安装React

Create React App

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应
用的最佳方式。
它会配置你的开发环境，，并为生产环境优化你的应用程序。需要安装 Node >= 8.10 和 npm
= 5.6
它创建一个前端构建流水线（build pipeline），内部使用 Babel 和 webpack，但你无需了解它们的任何细节。
当你准备好部署到生产环境时，执行 npm run build 会在 build 文件夹内生成你应用的优化版本

//三选一
• npx create-react-app my-app
• npm init react-app my-app
• yarn create react-app my-app
//进入目录
• cd my-app
• npm/yarn start

npx是执行Node软件包的工具，它从 npm5.2版本开始，就与npm捆绑在一起。

1. 默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；
2. 如果存在，它将执行；
3. 若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它

react 特性

内容来自官网

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月
开源

1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活-React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。 React 开发不一定使用 JSX但我们建议使 用它。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大 项目的开发中。
6. 单向响应的数据流− React 实现了单向响应的数据流，从而减少了重复代码，这也 是它为什么比传统数据绑定更简单

Hello World

eg1:

JSX，是一个 JavaScript 的语法扩展。具有 JavaScript 的全部功能。React 当中的元素事实上是普通的对象， React DOM 可以
确保 浏览器 DOM 的数据内容与 React 元素保持一致

eg2:

JSX优点

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

DOM

eg:

•首先我们在一个 HTML 页面中添加一个 id=“example” 的 div
• 在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM
节点。
• 我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当
中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。
• 要将React元素渲染到根DOM节点中，我们通过把它们都传递给
ReactDOM.render() 的方法来将其渲染到页面上