react入门(一)
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.必须是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入门(一)的更多相关文章
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门(1)
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门(2)
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门(4)
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- Java并发系列[6]----Semaphore源码分析
Semaphore(信号量)是JUC包中比较常用到的一个类,它是AQS共享模式的一个应用,可以允许多个线程同时对共享资源进行操作,并且可以有效的控制并发数,利用它可以很好的实现流量控制.Semapho ...
- 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 ...
- ubuntu17.10 python3.6 install plugins for AI
install order: tensorflow-gpu scikit-learn numpy scipy matplotlib tkinter tensorflow-gpu : pip insta ...
- 关于FFMPeg-PHP你必须要知道的
#PHP FFmpeg [![Build Status](https://secure.travis-ci.org/PHP-FFMpeg/PHP-FFMpeg.png?branch=master)]( ...
- linux下安装git提示”无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)“
如图所示,输入命令:apt-get install git后提示权限不够 解决方法,在命令前加 sudo即可 sudo apt-get install git sudo是linux系统管理指令,是允许 ...
- Storm实践
1.Storm命令 在Linux中观直接输入Storm,不带任何参数信息,可以查看Storm命令. 参考这里 1. activate 激活指定的拓扑Spout.语法:storm activate t ...
- 实时Web与WebSocket实践
引言:实时Web越来越被重视,Google.Facebook等大公司也逐渐开始提供实时性服务.实时Web将是未来最热门的话题之一. 本文选自<基于MVC的JavaScript Web富应用开发 ...
- JAVA的helloworld
java环境设置------------- 在环境变量中设置以下三个变量:JAVA_HOME=C:\j2sdk1.4.1 //可以改为相应的目录CLASSPATH=%JAVA_HOME%\lib\to ...
- 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 – ...
- V4L2驱动的移植与应用(三)
三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...