目录
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捆绑在一起。
- 默认情况下,首先检查路径中是否存在要执行的包(即在项目中);
- 如果存在,它将执行;
- 若不存在,意味着尚未安装该软件包,npx将安装其最新版本,然后执行它
react 特性
内容来自官网
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月
开源
- 声明式设计 −React采用声明范式,可以轻松描述应用。
- 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
- 灵活-React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。 React 开发不一定使用 JSX但我们建议使 用它。
- 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大 项目的开发中。
- 单向响应的数据流− 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() 的方法来将其渲染到页面上