react的学习之路之一(1)-------jsx语法;
来源:互联网 发布:linux安装mysql数据库 编辑:程序博客网 时间:2024/06/07 20:12
学习资料中:菜鸟教程,react官网文档;
一:jsx语法在菜鸟中,解释的挺清晰的;它的优势总结两点吧:1.执行快,编译成js代码,并能进行优化,有利于开发速度;2.在编译时就能发现类型错,比angular更加好使;
缺点呢,就是不利于seo-----搜索引擎优化;它不是一个的框架,需要加一个flux才能完成一个完整的大型项目;react并不算一个完整的MVVM框架,他要结合FLUX和redux构成一个完整的MVVM框架,就他本身只属于V而已;虚拟dom无法进行dom节点操作,这也是弊端;
二:jsx语法呢,说白了就是能js代码中写html代码,不需要加引号进行引用,html中完整在js中进行裸奔;这也是它比较优势的地方;下面很好的展示了js中展现了html代码;
import React from "react"; // 引入react库文件import ReactDOM from "react-dom";render(){ return( <div> <span >我是刘倒运</span> </div> ) }}ReactDOM.render(<Index />,document.getElementById("root"))注意点:1.必须得有一个根元素包裹,出现多个根元素,会报错;只有一个元素没有关系;多个元素必须一个根元素包裹;
2.注释不能是html代码注释,用html代码注释方式会报错,必须是js代码注释,js代码注释必须要用{}进行包裹,不用不生效,也不报错;
见代码:
{ // <span>shi我的水呀</span> } {/*<span>shijianwenti</span>*/}
三:1.可以是data属性进行自定义属性,id名直接写,但是类名必须写ClassName,直接写class直接报错;
代码:
<span data-a='my' id='span' className='span'>我是刘倒运</span>2.在html代码中,可以写{},在{}中可以写简单的函数表达式(短路语法,三元运算符等),函数调用;
代码:
<span >{1+1}</span> <p>{false?'liudaoyu':'1'}</p> <p>{this.time('23:40:50')}</p>
3.可以写内联样式:注意1.必须是双花括号{{}},属性之间的样式必须用逗号隔开;值必须是字符串,样式属性不能用‘-’进行连接,必须采用驼峰法则,第二个字母大写;有关描述大小高低的可以是纯数字,因为内部会自动翻译添加‘px’;
<p style={{color:'red',fontSize:'13px'}}>{this.time('23:40:50')}</p>也可以采用表现与数据分离的方式,调用变量,赋值样式;
render(){ var myStyle={ color:'red', fontSize:15 } return( <div> <p style={myStyle}>{this.time('23:40:50')}</p> </div> ) }
函数的调用以及样式的设置:
dom(){ return( <ul> <li>运气好</li> <li>运气好</li> <li>运气好</li> <li>运气好</li> <li>运气好</li> </ul> ) } render(){ var myStyle={ color:'red', fontSize:15 } return( <div> <p style={myStyle}>{this.time('23:40:50')}</p> {this.dom()} </div> ) }}
在内联样式中,数字可以进行四则运算;
4.数组的运用;
render(){ let arr=['1',2,3,'liuyy']; return( <div> <ul> { arr.map(function(item,index){ return <li key={index}>{item}</li> }) } </ul> </div> ) }必须通过map进行遍历,才可以完成;
以上就是关于jsx语法的理解;总结:jsx语法中,html的裸奔,html可以通过{}进行函数调用简单运算判断,html代码中属性的设置,及内联样式的设置规范;
阅读全文
0 0
- react的学习之路之一(1)-------jsx语法;
- React学习之进阶JSX语法(十一)
- React学习之JSX语法讲解(一)
- React之JSX语法
- React之JSX语法
- React之JSX语法
- React学习(二)JSX语法
- React学习之- (React-JSX-Style)
- 浅谈React的JSX语法(一)
- 浅谈React的JSX语法(二)
- React基础之JSX语法
- React语法基础之JSX
- 03、react之 JSX语法
- React Native学习笔记(2)--React与JSX语法
- React学习之进阶非JSX的痛处(十七)
- React Native学习笔记(二)JSX 语法学习
- React学习笔记(3)-- JSX语法及特点介绍
- React Native入门学习笔记三(JSX语法)
- WIN7如何搭建Java+eclipse+maven的测试环境
- A+B for Input-Output Practice (III)
- logistics回归多样本算法
- 为什么搜索结果只能显示10篇文章?
- git简单使用
- react的学习之路之一(1)-------jsx语法;
- http状态码
- linux使用open无法打开驱动解决方式
- 织梦dede调用文章第一张原图地址
- simulink中的if action 模块
- Activiti实践笔记
- 测试菜鸟学习网站汇总
- 图的创建和深度优先遍历
- 使用openssl的md5库