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. spring(二、bean生命周期、用到的设计模式、常用注解)

    spring(二.bean生命周期.用到的设计模式.常用注解) Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的. ...

  2. c语言笔记3运算符与表达式

    运算符与表达式 知识点一 操作数:参与运算的具体对象. 运算符:指明了对操作数进行的某项运算. 表达式:表示一个求值得规则.它由变量.常量.运算符和函数.括号按一定规则组成. 书写表达式的细节:1,运 ...

  3. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  4. MYSQL之IFNULL

    IFNULL是MYSQL中的一个判断字段值是否为null的函数,如果为null,则此查询可以变更为指定的值: 如 IFNULL(a,0)  如果a为null,则查询出0. 如果A表中没有数据 sele ...

  5. MySQL 5.7以上 root用户默认密码问题【转】

    https://www.yanning.wang/archives/379.html 废话少说一句话系列: CentOS系统用yum安装MySQL的朋友,请使用 grep "temporar ...

  6. JS 点击复制

    一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入 ...

  7. windows 2008R2系统程序运行提示无法定位程序输入点ucrtbase.terminate

    1.用python写了个脚本,打成exe程序,在一些机器上正常运行,再另外一些机器上运行提示 无法定位程序输入点ucrtbase.terminate 应该是缺少库文件支持 2.网上搜了下.https: ...

  8. java 获取键盘输入常用的两种方法

    java 获取键盘输入常用的两种方法 方法1: 通过 Scanner Scanner input = new Scanner(System.in); String s = input.nextLine ...

  9. Django2.0资料

    The Django Book 2.0 中文版:点击下载 Django课件和代码:点击下载

  10. 黄聪：C#使用Application.Restart重启程序出错解决办法

    调用 Application.Restart重启程序出错 解决办法,就是给程序的.exe文件,加上下面的设置