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 ...
随机推荐
- Linux进程作业常用命令
从鸟哥的私房菜书里摘抄的部分,方便查阅 一.作业管理 1.直接将命令放到后台执行的& 如想将/etc 备份为/tmp/ect.tar.gz时不想等待,可以这样做: ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- Angular @HostBinding()和@HostListener()用法
@HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...
- 关于Spring事务的原理,以及在事务内开启线程,连接池耗尽问题.
主要以结果为导向解释Spring 事务原理,连接池的消耗,以及事务内开启事务线程要注意的问题. Spring 事务原理这里不多说,网上一搜一大堆,也就是基于AOP配合ThreadLocal实现. 这里 ...
- Jmeter简单介绍与搭配Jenkins实现自动化
Jmeter简介 Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web应用测试,但后来扩展到其他测试领域. 它可以用于 ...
- Docker系列二:Docker的基本结构
Docker的基本结构 Docker 的三大基础组件 Docker有三个重要的概念:仓库 , 镜像 和 容器 ,它们是Docker的三大基出组件 Docker的组织结构 Docker处于操作系统和虚拟 ...
- shell 脚本——判断条件
在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...
- c#获取文件MD5算法
//获取文件MD5算法 private static string GetMD5FromFile(string fileName) { try { FileStream file = new File ...
- linux远程控制
linux远程控制 SSH协议:为客户机提供安全的shell环境,默认端口22OpenSSH服务服务名称:sshd主程序:/usr/sbin/sshd ,/usr/bin/ssh配置文件:/etc/s ...
- 深度拾遗(06) - 1X1卷积/global average pooling
什么是1X1卷积 11的卷积就是对上一层的多个feature channels线性叠加,channel加权平均. 只不过这个组合系数恰好可以看成是一个11的卷积.这种表示的好处是,完全可以回到模型中其 ...