JSX使用


一、为什么使用JSX?
React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。但是用js创建虚拟dom可读性差,于是创建了JSX,继续使用HTML代码创建dom,增加可读性

二、如何使用JSX?
JSX变量:用{ }包括起来,如

 const title='hello';
const elem=<h1>{title}</h1>;

JSX表达式:用{ }包括起来
JSX事件:
onClick={this.function_name.bind(this)}
对比html:<button onclick="function_name(this)">submit</button>
对比jquery:$('#btn').on('click',this.function_name.bind(this))

组件创建


底层组件

import React, { Component } from 'react'//import necessary react and component

class Comment extends Component {
render () {
return (
<div>...</div>
)
}
}
export default Comment //导出组件Comment

包装组件

import React, { Component } from 'react'
import Comment from './Comment' //导入comment组件 class CommentList extends Component {
render() {
return (
<Comment />
    <Comment />
) } } export default CommentList //导出包装组件CommentList

根组件

 import React from 'react';
import ReactDOM from 'react-dom';//导入reactdom
import './index.css';//导入css
import CommentApp from './CommentApp'; ReactDOM.render(
<CommentApp />,
document.getElementById('root')
);

ReactJS-1-基本使用的更多相关文章

  1. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  2. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  3. reactjs 接入数据模型以及markdown语法的支持

    页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:  

  4. 初探ReactJS.NET 开发

    ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...

  5. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  6. redux的中间层 --reactjs学习

    React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux 负责Model 一开始学习Redux的中间层 有点 摸不到头, 其实只要你注意 ...

  7. 初识ReactJs(一)

    React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...

  8. D2.Reactjs 操作事件、状态改变、路由

    下面内容代码使用ES6语法 一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...

  9. D1.1.利用npm(webpack)构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

  10. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

随机推荐

  1. 再理解HDFS的存储机制

    再理解HDFS的存储机制 1. HDFS开创性地设计出一套文件存储方式.即对文件切割后分别存放: 2. HDFS将要存储的大文件进行切割,切割后存放在既定的存储块(Block)中,并通过预先设定的优化 ...

  2. Android 常用Shell命令

    1.查询模拟器/设备实例 adb devices 2.从模拟器/设备中拷入或拷出文件(默认拷贝在执行目录) 从模拟器或者设备中复制文件或目录,使用(如下命): adb pull <remote& ...

  3. Apache Karaf配置远程调试

    软件环境 apache-karaf-4.0.0 配置方法: 在 bin/karaf.bat 文件里,顶部增加 set KARAF_DEBUG=true 然后.重新启动karaf 启动之后.就可以看到例 ...

  4. Windows 7旗舰版安装Visual Studio 2013 Ultimate的系统必备及注意事项

    系统必备: 1.Windows7 SP1 2.IE 10

  5. 密码过期导致Oracle process耗尽问题

    oracle忽然连不上! 大致是报这样的错: ORA-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程序 ORA-12520: TNS: 监听程序无法为请求的服务器类型找到可用的处理 ...

  6. SRM691 Sunnygraphs2

    Problem Statement Hero has just constructed a very specific graph. He started with n isolated vertic ...

  7. POJ3164 Command Network —— 最小树形图

    题目链接:https://vjudge.net/problem/POJ-3164 Command Network Time Limit: 1000MS   Memory Limit: 131072K ...

  8. html页面缓存问题

    若IIS没有设置,html页面一旦缓存,则永远缓存. Chrome如下 火狐如下 一种方法:我们一般通过xxx.html?20151010这样URL欺骗浏览器. 另一种方法:设置IIS,让永远客户端不 ...

  9. YTU 2801: 用数字造数字(II)

    2801: 用数字造数字(II) 时间限制: 1 Sec  内存限制: 128 MB 提交: 244  解决: 168 题目描述 输入一个3位以上的整数,求其中最大的两个数字之和与最小的数字之和之间的 ...

  10. asp.net Identity2 角色(Role)的使用(三)用户管理,用户控制器和视图

    修改用户控制器AccountController,增加角色管理器. public class AccountController : Controller { public AccountContro ...