React.js 学习笔记
React.js
React.js 是时下最流行的前端 JavaScript 框架之一。
创建工程
# 安装 CLI
$ npm install -g create-react-app
# 创建新的应用程序
$ create-react-app my-app --scripts-version=react-scripts-ts
# 进入程序所在路径
$ cd my-app
# 编译并运行
$ npm start
# http://localhost:3000 打开主页
组件
- 使用 ReactDOM.render 方法渲染组件。
该方法带有两个参数：一个React元素（组件）和一个DOM元素。 - 使用 JSX（类似 XML的标签）描述组件。
- 顶层标签只能有一个。
- 使用 {} 在 JSX 中插入表达式。
- JSX 本身是一个表达式。
- JSX 中属性的值可以用 ""，也可以用 {}。
函数形式组件
- 组件分为函数形式组件和类形式组件。函数形式组件相当于只有 render 方法的类形式组件。
- 函数形式组件接收唯一一个参数（props），返回 React 元素。
- 父标签通过属性向子标签传递参数。子标签的属性名对应于组件参数 props 的属性。
类形式组件
- 组件的类型为 React.Component。
- 类形式组件的构造器接收唯一一个参数（props）。
类形式组件的其他方法通过 this.props 引用这个参数。 - 类形式组件的 render 方法返回 React 元素。
- 类形式组件的 lifecycle 方法：
componentDidMount
componentWillUnmount - 类形式组件在构造器中初始化状态属性 this.state（或者在类当中不使用构造器直接初始化属性 state）。
类形式组件的其他方法通过 this.state 引用状态，通过调用 this.setState 方法来改变状态更新组件。 - 组件中事件处理器有3种写法：
使用 bind 将 this 绑定到事件处理器。
使用箭头函数初始化事件处理器。
在标签中将箭头函数作为事件属性的值。 - 组件模板中没有 if 语句，需要使用 && || ?: 这些逻辑运算符来做条件渲染。
- 组件模板中没有 for 语句，需要使用 array.map 这种函数型编程手段来将数组展开成多个标签。
基本结构
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<meta charset="utf-8"/>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>
React.js 学习笔记的更多相关文章
- React.js学习笔记（一）：组件协同与mixin
组件协同: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Node.js学习笔记（3）：NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- React Native 学习笔记--进阶（二）--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- React.js学习
React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...
随机推荐
- 二,编程语言类别,和python变量基础
编程语言类别 机器语言:由二进制组成,直接控制操作硬件,执行效率高,开发效率低. 汇编语言:用英文代替二进制,直接操作控制硬件,执行效率高,开发效率低. 高级语言: 编译型,如C语言,类似谷歌翻译,先 ...
- js--变量对象总结
当 JavaScript 代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context). 对于每个执行上下文,都有三个重要属性: 变量对象( ...
- [转]Haproxy原理(1)
本文出处:https://www.cnblogs.com/skyflask/p/6970151.html 目录 一.四层和七层负载均衡的区别二.HAProxy与LVS的异同三.快速安装HAProxy集 ...
- linux下不能拼通www.baidu.com
1.打开虚拟机,通过命令修改内容如下 vi /etc/sysconfig/network-scripts/ifcfg-eth0 2.将信息修改如下: 3.ping www.baidu.com 查看是否 ...
- Install MariaDB on Ubuntu server
本文所描述的安装方法实用于一下软件环境 ,不能保证使用于其他版本,请参考自己实际情况调整安装方法及参数. 操作系统版本:Ubuntu Server 14.04 LTS 64bit 欲安装MariaDB ...
- 阻塞I/O、非阻塞I/O和I/O多路复用
一.阻塞I/O 首先,要从你常用的IO操作谈起,比如read和write,通常IO操作都是阻塞I/O的,也就是说当你调用read时,如果没有数据收到,那么线程或者进程就会被挂起,直到收到数据.阻塞的意 ...
- Firebug 没死，活在 Firefox DevTools 中
伯乐在线转注:2016年12月7日有一条<Firebug 宣布停止开发更新>的资讯,不少朋友误认为以后用不到 Firebug 了.其实在 2015 年 Firebug 已经在着手整合到 F ...
- [综] meanshift算法
Meanshift,聚类算法 http://www.cnblogs.com/liqizhou/archive/2012/05/12/2497220.html 记得刚读研究生的时候,学习的第一个算法就是 ...
- 织梦Dedecms文件目录结构
Dedecms文件目录结构 /根目录 ../a 默认生成文件存放目录 ../data 系统缓存或其他可写入数据存放目录 ../dede 默认后台登录管理(可任意改名) ../images 系统默认的部 ...
- flutter环境配置
java环境安装 做基于android的原生app,首先需要安装java环境,需要到官网https://www.oracle.com/technetwork/java/javase/downloads ...