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的优点如下 ...
随机推荐
- VS Code 工具配置和格式化
{ "onSave": true, "javascript": { "indent_size": 2, "indent_char& ...
- 周强 201771010141 《面向对象程序设计（java）》 第二周学习总结
第一部分:理论知识学习部分 第三章 java的基本程序设计结构 本章主要学习数据类型.变量.运算符.类型转换.字符串.输入输出.控制流程.大数值.数组等内容. 1.基本知识 (1)标识符:由字母.下划 ...
- C# 日志记录分级功能使用 按照日期，大小，或是单文件存储
本文将使用一个Nuget的一个组件库来实现一个简单强大的日志记录功能,包采用线程安全实现,所有的记录在后台完成,即使您在前台调用100万次方法,耗时也不过1000ms(具体时间依照电脑性能决定),支持 ...
- 面试题 -AR VR MR以及CR的简单介绍
AR 增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互 ...
- Python全栈之路----类型转换
显式转换 int(x [,base]) ⇒ 将x转换为一个十进制的整数 long(x [,base]) ⇒ 将x转换为一个十进制的长整数 float(x) ⇒ 将x转换为一个浮点数 str(objec ...
- 面向对象+JAVA基础
泛泛的研究了面向对象的前五章,感觉没有代码的参照理解的知识看过就忘,所以又在推荐下开始了JAVA基础,希望不会鄙视我目前么有一本书能完整看完的记录... public class LeapYear { ...
- activiti学习第一天
公司项目组在考虑工作流,首选了activiti,首先我们要明确为什么要使用activiti,有什么好处. 在工作中有些项目会用到工作流,如果简单的项目,我们就无需使用类似activiti.jbpm等工 ...
- 记一次Chrome冒充QQ浏览器领取奖励之行
DNF游戏十周年活动,但是看到活动页面竟然是QQ浏览器专属活动,可是对于QQ浏览器,我内心是拒绝的,所以本着能不下载就不下载的原则,当然是选择放弃它了..... 开玩笑,看到这一活动,虽然奖励不高 ...
- Ubuntu 16.04出现：Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/cache/app-info -a -e /usr/bin/appstreamcli; then appstreamcli refresh > /dev/null; fi'
错误: Reading package lists... Done E: Problem executing scripts APT::Update::Post-Invoke-Success 'if ...
- Hanlp自然语言处理中的词典格式说明
使用过hanlp的都知道hanlp中有许多词典,它们的格式都是非常相似的,形式都是文本文档,随时可以修改.本篇文章详细介绍了hanlp中的词典格式,以满足用户自定义的需要. 基本格式 词典分为词频词性 ...