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 学习笔记的更多相关文章

  1. React.js学习笔记（一）：组件协同与mixin

    组件协同: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  2. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  3. Node.js学习笔记（3）：NPM简明教程

    Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...

  4. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  5. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  9. React.js学习

    React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...

随机推荐

  1. 2019-04-16-day033-锁与队列

    内容回顾 几个问题 概念多,练习少 不问问题 概念?代码? Process类 并发并行 并发 是同一时间段内多个任务交替使用同一个cpu 并行 是在同一个时刻多个任务在不同的cpu上同时执行 同步异步 ...

  2. SVG的用法

    三种添加方式 <iframe src="图的地址" frameborder="0"></iframe> <object width ...

  3. ubuntu16.04 配置双网卡机器

    本文介绍一台具有双有线网卡的机器在Linux下如何配置双网卡 系统平台:Ubuntu16.04 1:查看机器网卡信息,是否双网卡都能正确被机器pci识别 可以通过以下命令查看设备网卡,若果看到两条网卡 ...

  4. C#读写三菱PLC和西门子PLC数据 使用TCP/IP 协议

    本文将使用一个Github开源的组件库技术来读写三菱PLC和西门子plc数据,使用的是基于以太网的TCP/IP实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能 ...

  5. IOS Block代码块的定义与使用

    代码块的本质是和其他的变量类似,不同的是,代码块存储的数据是一个函数体.使用代码块,你可以像调用其他标准函数一样的调用,可以传入参数,并得到返回值.     脱字符是代码块的语法标记.下图表示代码块的 ...

  6. [cf1038E][欧拉路]

    http://codeforces.com/contest/1038/problem/E E. Maximum Matching time limit per test 2 seconds memor ...

  7. Angular + Websocket

    Angular使用RxJS,它本质上是一个反应式扩展的javascript实现.这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets. 简而言之,RxJS允许我们从we ...

  8. 登录ssh提示：ssh_exchange_identification: read: Connection reset by peer error

    vim /etc/hosts.allow 添加 sshd : ALL

  9. java_初始化器

    1. 执行的顺序 package java20180129_1; public class Demo { // instance variable initializer 实例变量初始化器 Strin ...

  10. MySQL：System.Data.Entity ，MySqlCommand, MySqlParameter and "LIKE" %

    Introduction Using GetSqlStringCommand with a text comparative, with LIKE, in ADO.NET and the MySQLP ...