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非常相似. ...

随机推荐

Redis~Linux环境下的部署
回到目录 Redis的生产环境建议部署到linux上,而在开发时可以连接windows版本,下面介绍如何在linux上部署redis. $ wget http://download.redis.io/ ...
springboot项目容器化
创建一个简单的springboot项目,依赖中加入: 编写一个Restfull接口: 编写启动类: 启动项目,浏览器访问该接口,得到想要的结果.下面,就将这个项目进行Docker容器化(applica ...
【面试】吃透了这些Redis知识点，面试官一定觉得你很NB（干货 | 建议珍藏）
万字长文,干货满满. 是数据结构而非类型很多文章都会说,redis支持5种常用的数据类型,这其实是存在很大的歧义.redis里存的都是二进制数据,其实就是字节数组(byte[]),这些字节数据是没有 ...
Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用
Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用目录概要知识点完整示例图代码与资源文件流程步骤概要基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
jQuery里面的DOM操作（查找，创建，添加，删除节点）
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素用法:$("id").append("定义的节点& ...
Java运行时环境---内存划分
背景:听说Java运行时环境的内存划分是挺进BAT的必经之路. 内存划分: Java程序内存的划分是交由JVM执行的,而不像C语言那样需要程序员自己买单(C语言需要程序员为每一个new操作去配对del ...
从零讲解搭建一个NIO消息服务端
本文首发于本博客,如需转载,请申明出处. 假设假设你已经了解并实现过了一些OIO消息服务端,并对异步消息服务端更有兴趣,那么本文或许能带你更好的入门,并了解JDK部分源码的关系流程,正如题目所说,笔 ...
《JavaScript高级程序设计》笔记：表单脚本（十四）
表单的基础知识在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...
安装odoo小程序商城模块报错 KeyError: u'oejia_weshop'
错误截图如下检查模块目录名是否不是 oejia_weshop,比如 oejia_weshop-master,注意odoo的模块名不能随便更改,odoo小程序商城模块目录名必须是oejia_wesho ...
[20190423]那个更快的疑问3.txt
[20190423]那个更快的疑问3.txt --//前一阵子,做了11g在单表单条记录唯一索引扫描的测试,摘要如下:--//参考链接:http://blog.itpub.net/267265/vie ...

React笔记：React基础（2）