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的优点如下 ...
随机推荐
- asp.net button控件 使用JS的 disabled
今天想用JS禁用asp.net的button控件,查了好久,都是一行代码.... document.getElementById("Button1").disabled ...
- python实现算术表达式的词法语法语义分析（编译原理应用）
本学期编译原理的一个大作业,我的选题是算术表达式的词法语法语义分析,当时由于学得比较渣,只用了递归下降的方法进行了分析. 首先,用户输入算术表达式,其中算术表达式可以包含基本运算符,括号,数字,以及用 ...
- 周强201771010141《面向对象程序设计（java）》第六周学习总结
枚举是一种特殊的数据类型,之所以特殊是因为它既是一种类(class)类型却又比类型多了些特殊的约束,但是这些约束的存在也造就了枚举类型的简洁,安全性以及便捷性.创建枚举类型要使用enum关键字,隐含了 ...
- IO流技术
IO流常用基类 字节流的抽象基类:InputStream,OutputStream 字符流的抽象基类:Reader,Writer Writer类 子类:BufferedWriter,CharArray ...
- WEBBASE篇： 第七篇， JavaScript知识1
JavaScript 1 一.JavaScript 概述什么是JavaScript: JavaScript 简称 JS,是一种专门运行于JS解释器/引擎中的解释型脚本语言JS发展史: 1.1992年N ...
- Python全栈之路----函数----匿名函数
用lambda声明匿名函数,对lambda定义名字,才能被调用.下面的calc和func功能一致. def calc(x,y): return x*y func = lambda x,y: x*y # ...
- echarts画饼环状饼图相关参数配置
今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋 ...
- html（二）常见符号
HTML当中的常见实体内容:
- 三、tcp、ip协议详细
1. 什么是 TCP/IP? TCP/IP 是一类协议系统,它是用于网络通信的一套协议集合． 传统上来说 TCP/IP 被认为是一个四层协议 1) 网络接口层: 主要是指物理层次的一些接口,比如电缆等 ...
- flex 布局压缩问题
在 flex 布局中,当有一个元素宽度过长时,另一个元素宽度会被压缩, 如下图: 解决办法:在不想被压缩的元素上加上样式 flex-shrink: 0; 效果图: