JSX语法:

  • HTML 语言直接写在 JavaScript 语言之中,不加任何引号 ,
  • JSX语法中不能使用js中的关键字,例如:class 需要改为className
  • JSX语法中要写表达式的话,需要用{}包起来,
  • 如果JSX语法中的表达式是一个数组,react会展开数组
  • JSX语法中增加自定义属性需要用data-前缀( data-index='1')

ReactDOM.render( <div className='aaa' style={ { backgroundColor:'pink',color:'#333' } } >
这是jsx语法练习
{/* 这是JSX中的注释 */}
</div>, document.getElementById('root')
);

react元素:

  • React元素是不可变的。一旦创建了一个元素,就不能更改其子元素或属性 ,更新UI的唯一方法是创建一个新元素,并将其传递给ReactDOM.render(),

下面的例子中,ReactDOM.render()每秒从setInterval()回调中调用。

React DOM将元素及其子元素与前一元素进行比较,并仅执行必要的DOM更新以使DOM达到所需的状态,提升性能。

function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
} setInterval(tick, 1000);

react组件:

react组件分两种:

  1. 类式组件;
  2. 函数式组件;

类式组件:

1.必须是class定义的类,必须继承自React.Component,组件名首字母必须大写;

2.组件必须有 constructor 方法 和 render 方法;

3.constructor() 方法里面必须有 super() ;

4.render()方法必须return 唯一一个 JSX dom元素

函数式组件:

就是一个普通函数,必须return一个JSX dom元素

//类式组件:
class Test extends React.Component{
constructor(...args){
super(...args)
} render(){ return <div data-index='1' > 我叫{ this.props.name } </div>
}
} //函数式组件,利用函数返回JSX语法:
function Welcome(props) {
return <h3> { props.name } </h3>;
}

react入门(一)的更多相关文章

  1. react入门(3)

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  2. react入门(1)

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  3. react入门(2)

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  4. react入门(4)

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  5. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  6. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  8. React入门简单实践

    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...

  9. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  10. React入门资源整理

    另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...

随机推荐

  1. Linux进程作业常用命令

    从鸟哥的私房菜书里摘抄的部分,方便查阅 一.作业管理     1.直接将命令放到后台执行的&         如想将/etc 备份为/tmp/ect.tar.gz时不想等待,可以这样做:    ...

  2. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  3. Angular @HostBinding()和@HostListener()用法

    @HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...

  4. 关于Spring事务的原理,以及在事务内开启线程,连接池耗尽问题.

    主要以结果为导向解释Spring 事务原理,连接池的消耗,以及事务内开启事务线程要注意的问题. Spring 事务原理这里不多说,网上一搜一大堆,也就是基于AOP配合ThreadLocal实现. 这里 ...

  5. Jmeter简单介绍与搭配Jenkins实现自动化

    Jmeter简介 Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web应用测试,但后来扩展到其他测试领域. 它可以用于 ...

  6. Docker系列二:Docker的基本结构

    Docker的基本结构 Docker 的三大基础组件 Docker有三个重要的概念:仓库 , 镜像 和 容器 ,它们是Docker的三大基出组件 Docker的组织结构 Docker处于操作系统和虚拟 ...

  7. shell 脚本——判断条件

    在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...

  8. c#获取文件MD5算法

    //获取文件MD5算法 private static string GetMD5FromFile(string fileName) { try { FileStream file = new File ...

  9. linux远程控制

    linux远程控制 SSH协议:为客户机提供安全的shell环境,默认端口22OpenSSH服务服务名称:sshd主程序:/usr/sbin/sshd ,/usr/bin/ssh配置文件:/etc/s ...

  10. 深度拾遗(06) - 1X1卷积/global average pooling

    什么是1X1卷积 11的卷积就是对上一层的多个feature channels线性叠加,channel加权平均. 只不过这个组合系数恰好可以看成是一个11的卷积.这种表示的好处是,完全可以回到模型中其 ...