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. Java并发系列[6]----Semaphore源码分析

    Semaphore(信号量)是JUC包中比较常用到的一个类,它是AQS共享模式的一个应用,可以允许多个线程同时对共享资源进行操作,并且可以有效的控制并发数,利用它可以很好的实现流量控制.Semapho ...

  2. hadoopmaster主机上传文件出错: put: File /a.txt._COPYING_ could only be replicated to 0 nodes instead of minReplication (=1). There are 3 datanode(s) running and 3 node(s) are excluded in this operation.

    刚开始装好hadoop的时候,namenode机上传文件没有错误,今天打开时突然不能上传文件,报错 put: File /a.txt._COPYING_ could only be replicate ...

  3. ubuntu17.10 python3.6 install plugins for AI

    install order: tensorflow-gpu scikit-learn numpy scipy matplotlib tkinter tensorflow-gpu : pip insta ...

  4. 关于FFMPeg-PHP你必须要知道的

    #PHP FFmpeg [![Build Status](https://secure.travis-ci.org/PHP-FFMpeg/PHP-FFMpeg.png?branch=master)]( ...

  5. linux下安装git提示”无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)“

    如图所示,输入命令:apt-get install git后提示权限不够 解决方法,在命令前加 sudo即可 sudo apt-get install git sudo是linux系统管理指令,是允许 ...

  6. Storm实践

    1.Storm命令 在Linux中观直接输入Storm,不带任何参数信息,可以查看Storm命令. 参考这里 1.  activate 激活指定的拓扑Spout.语法:storm activate t ...

  7. 实时Web与WebSocket实践

    引言:实时Web越来越被重视,Google.Facebook等大公司也逐渐开始提供实时性服务.实时Web将是未来最热门的话题之一.  本文选自<基于MVC的JavaScript Web富应用开发 ...

  8. JAVA的helloworld

    java环境设置------------- 在环境变量中设置以下三个变量:JAVA_HOME=C:\j2sdk1.4.1 //可以改为相应的目录CLASSPATH=%JAVA_HOME%\lib\to ...

  9. arm-linux-gcc: Command not found 问题解析 .

    问题: sudo tar jxvf cross-2.95.3.tar.bz2 export PATH=$PATH:/usr/local/arm/2.95.3/bin 使用arm-linux-gcc – ...

  10. V4L2驱动的移植与应用(三)

    三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...