1. JSX

　　JSX是一种拥有描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。

1.1 基本语法

　　JSX可以嵌套多个HTML标签，可以使用大部分符号HTML规范的属性。

　　TodoList.js：

import React, { Component } from 'react'

class TodoList extends Component {

    render(){

        return (

            <ul>

                <li>To Do</li>

                <li>In Progress</li>

                <li>Done</li>

            </ul>

        );

    }

}

export default TodoList;

　　index.js：

import React from 'react';

import ReactDOM from 'react-dom';

import TodoList from './components/TodoList'

ReactDOM.render(<TodoList />, document.getElementById('root'));

　　index.html：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>React App</title>

  </head>

  <body>

    <div id="root"></div>

  </body>

</html>

　　JSX中的HTML标签属性绝大多数与HTML规范一致，但是class和for这两个属性在JSX中需要写为className何htmlFor。

　　class和for是JavaScript中的保留字。

1.2 标签类型

　　在JSX语法中，使用的标签类型有两种：DOM类型标签和React组件类型标签。

　　使用DOM类型标签时，标签的首字母必须小写。

　　使用React类型标签时，组件名称的首字母必须大写。

　　React通过首字母的大小写判断渲染的是DOM类型标签，还是React组件类型标签。

// DOM类型标签

const element = <h1>Hello World</h1>;

// React组件类型标签

const element =  <TodoList />;

// 嵌套使用

const element = {

    <div>

        <TodoList />

    </div>

}

1.3 JavaScript表达式

　　在JSX中使用JavaScript表达式需要将表达式用大括号 {} 包括起来。

　　在JSX中使用表达式的两个场景：（1）通过表达式给标签属性赋值（2）通过表达式定义组件。

import React, { Component } from 'react'

class TodoList extends Component {

    render() {

        const todos = ['To Do', 'In Progress', 'Done'];

        return (

            <ul>

            {

                todos.map((item, index) =>

                    <li key = { index }> { item } </li>

                )

            }

            </ul>

        );

    }

}

export default TodoList;

1.4 条件判断

　　JavaScript表达式要求必须有返回值，因此无法直接使用if else语句，解决方法：

　　◊ 使用三元运算符

　　◊ 设置变量并在属性中引用

　　◊ 将逻辑转化到函数中

　　◊ 使用&&运算符

1.4.1 三元运算符

import React, { Component } from "react"

class HelloWorld extends Component {

    constructor(props) {

        super(props);

        this.state = {

            isComplete: true

        }

    }

    render() {

        return (

            <div className={ this.state.isComplete ? 'is-complete' : '' }> Hello { this.props.name }! </div>

        );

    }

}

export default HelloWorld;

1.4.2 使用变量

import React, { Component } from "react"

class HelloWorld extends Component {

    constructor(props) {

        super(props);

        this.state = {

            isComplete: true

        }

    }

    getIsComplete() {

        return this.state.isComplete ? 'is-complete' : '';

    }

    render() {

        let isComplete = this.getIsComplete();

        return (

            <div className={ isComplete }> Hello { this.props.name }! </div>

        );

    }

}

export default HelloWorld;

1.4.3 使用函数

import React, { Component } from "react"

class HelloWorld extends Component {

    constructor(props) {

        super(props);

        this.state = {

            isComplete: true

        }

    }

    getIsComplete() {

        return this.state.isComplete ? 'is-complete' : '';

    }

    render() {

        return (

            <div className={ this.getIsComplete() }> Hello { this.props.name }! </div>

        );

    }

}

export default HelloWorld;

1.4.4 使用逻辑与（&&）运算符

import React, { Component } from "react"

class HelloWorld extends Component {

    constructor(props) {

        super(props);

        this.state = {

            isComplete: true

        }

    }

    render() {

        return (

            <div className={ this.state.isComplete && 'is-complete' }> Hello { this.props.name }! </div>

        );

    }

}

export default HelloWorld;

1.5 标签属性

　　（1）当JSX标签属性是DOM类型的标签时，JSX支持对于DOM标签的属性。

　　JSX中的内联样式通过style属性来定义，但属性值必须为对象，且对象中的属性名需要使用camelCase（驼峰命名法）。

　　例：font-size改为fontSize。

import React, { Component } from 'react'

class TodoList extends Component {

    render() {

        const todos = ['To Do', 'In Progress', 'Done'];

        return (

            <ul style={{color: 'red', fontSize: '14px'}}>

            {

                todos.map((item, index) =>

                    <li key = { index }> { item } </li>

                )

            }

            </ul>

        );

    }

}

export default TodoList;

　　（2）当JSX标签是React组件类型时，可以任意自定义标签的属性名。

　　HelloWorld.js

import React, { Component } from "react"

class HelloWorld extends Component {

    render() {

        return (

            <div> Hello { this.props.name }! </div>

        );

    }

}

export default HelloWorld;

　　index.js：

import React from 'react';

import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld name='World' />, document.getElementById('root'));

1.6 注释

　　JSX中，在标签子节点内的注释写在{}中。

import React, { Component } from 'react'

class TodoList extends Component {

    render() {

        const todos = ['To Do', 'In Progress', 'Done'];

        return (

            <ul style={{color: 'red', fontSize: '14px'}}>

            {/* 注释 */}

            {

                todos.map((item, index) =>

                    <li key = { index }> { item } </li>

                )

            }

            </ul>

        );

    }

}

export default TodoList;

　　JSX语法只是 React.createElement(component, props, ...children)的语法糖，所有的JSX语法最终都会被转换成该方法调用。

　　在项目智勇首选使用JSX语法。

React笔记：React基础（2）的更多相关文章

React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意: 家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组件修修改改拿来 ...
React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
React笔记：组件（3）
1. 组件定义组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数使用class定义组件的 ...
【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
react笔记汇总
1.什么是React? a.React 是一个用于构建用户界面的 JAVASCRIPT 库. b.React主要用于构建UI,很多人认为 React 是 MVC 中的 V. c.React 起源于 F ...
React笔记1
目录 1.react基础:类组件.函数式组件.ES5/ES6继承 2.生命周期钩子函数 3.什么是JSX 4.props和state有什么区别 5.路由配置 6.自定义封住组件 7.React 状态管 ...
React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

随机推荐

[转]使用nodejs-koa2-mysql-sequelize-jwt 实现项目api接口
本文转自:https://blog.csdn.net/yibowanbo/article/details/80521849 nodejs-koa2-mysql-sequelize-jwt技术栈:nod ...
80后程序员降薪6K，预感中年危机来袭，准备跳槽却碰壁
一提及程序员,很多人想到的都是“工资高”“技术好”诸如此类的,可见程序员是个非常赚钱的职业,所以每年都会有很多毕业生来选择这个行业. 但是社会是公平的,不要只看程序员表面上的光鲜亮丽,其背后也有很多的 ...
Java笔记(day9~day10)
继承: 好处:1.提高代码复用性: 2.让类之间产生关系,给多态提供了前提: 父类.子类 Java中支持单继承,不直接支持多继承,但对C++的多继承进行了改良单继承:一个子类只能有一个直接复类 ...
2019/1.7 js面向对象笔记
面向对象 1.构造函数里的属性怎么看?看this,谁前面有this谁就是属性. num不是属性,是私有作用域下的私有变量. 2.如何查找面向对象中的this 1.构造函数的this指向实例对象 2.如 ...
用mapreduce 处理气象数据集
用mapreduce 处理气象数据集编写程序求每日最高最低气温,区间最高最低气温气象数据集下载地址为:ftp://ftp.ncdc.noaa.gov/pub/data/noaa 按学号后三位下载不 ...
Eclipse常用快捷键速记
补充 15 个 Eclipse 常用开发快捷键使用技巧 1.alt+? 或 alt+/:自动补全代码或者提示代码 2.ctrl+o:快速outline视图 3.ctrl+shift+r:打开资源列表 ...
vue click事件 v-on:click
v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
ArcGIS API for JavaScript 入门教程[7] 再讲视图——View的基本属性
[回顾]上篇花大篇幅讲了ArcGIS Server上的数据服务与部分常用可操作图层的创建关系,还讲了OGC的几个规范. 本篇回到JsAPI 4.x的新特性——视图类中来. 在第3篇讲过,4.x将视图从 ...
基于mapnik做切片服务器的几点总结
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景在地图服务器的整体方案中,移动端采用矢量切片,样式解析采用th ...
【设计模式】工厂方法模式 Factory Method Pattern
在简单工厂模式中产品的创建统一在工厂类的静态工厂方法中创建,体现了面形对象的封装性,客户程序不需要知道产品产生的细节,也体现了面向对象的单一职责原则(SRP),这样在产品很少的情况下使用起来还是很方便 ...

React笔记：React基础（2）