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的优点如下 ...
随机推荐
- pip3 install mysqlclient 报错 “/bin/sh: 1: mysql_config: not found”的解决方法
执行 sudo apt-get install libmysqlclient-dev, 然后执行 pip3 install mysqlclient 成功.
- poj 3694 无向图求桥+lca
题意抽象为: 给一个无向图和一些询问 对于每一次询问: 每次询问都会在图上增加一条边 对于每一次询问输出此时图上桥的个数. 桥的定义:删除该边后原图变为多个连通块. 数据规模:点数N(1 ≤ N ≤ ...
- Markdown最常用的几个语法
更多语法请参考:Markdown语法说明 http://wowubuntu.com/markdown/
- 解决插值表达式闪烁问题 - v-cloak
v-cloak页面在js没有加载出来的时候,不显示该部分 linux可以通过响应式设计模式,来模拟2,3G网络 <!DOCTYPE html><html><head> ...
- Java+opencv实现人脸检测
版本 Java1.8 opencv3.4 代码: import java.awt.Graphics; import java.awt.image.BufferedImage; import javax ...
- Centos7 firewall开放3306端口
目录 Centos7 firewall开放3306端口 1. 查看防火墙状态 2. 关闭防火墙firewall 3. 关闭防火墙firewall后开启 4. 开启端口 5. 重启防火墙 6. 常用命令 ...
- tomcat8.5配置redis实现session共享(tomcat-redis-session-manager-master)
1.将下面几个jar包依赖放到tomcat的lib目录下: 2.修改tomcat/conf下context.xml文件,在<Context>节点添加如下代码: <Valve clas ...
- struts2 自定义异常拦截器配log4j
log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...
- git 从分支上创建一个分支
相关连接: 创建于合并分支:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00 ...
- MQTT研究之mosquitto：【环境搭建】
环境信息: 1. Linux Centos7.2 环境,CPU 2核,内存8G. 2. mosquitto版本:mosquitto-1.5.4 官网:http://mosquitto.org/down ...