ReactJS学习系列课程(JSX语法)
来源:互联网 发布:grub命令行引导ubuntu 编辑:程序博客网 时间:2024/06/10 08:19
JSX语法很多人也不是第一次遇见,类似的语法在Java 的Jsp, .net等平台中都有出现,那么到底什么才是JSX语法呢?
其实,HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:
var names = ['red', 'yellow', 'blue'];React.render( <div> { names.map(function (color) { return <div>Hello, {color}!</div> }) } </div>, document.getElementById('container'));
在浏览器中我们会看到:
Hello, red!
Hello, yellow!
Hello, blue!
类似我们也可以像如下这么写,
var arr = [ <h1>Hello world!</h1>, <h2>React is perfect!</h2>, ]; React.render( <div>*{arr}*</div>, document.getElementById('container') );
以上就是JSX语法的简单介绍,你是不是清楚了呢!
0 0
- ReactJS学习系列课程(JSX语法)
- ReactJS学习系列课程(React ES6语法使用)
- ReactJS学习系列课程
- ReactJS学习系列课程1(ReactJS简介)
- ReactJS学习系列课程(React学习总结)
- ReactJS学习系列课程附加(Flux应用架构)
- ReactJS学习系列课程2(React环境搭建)
- ReactJS学习系列课程3(React State状态)
- ReactJS学习系列课程(props 组件属性)
- ReactJS学习系列课程(组件的生命周期)
- ReactJS学习系列课程(React Router 使用)
- ReactJS学习系列课程(React Http网络数据读取)
- ReactJS学习系列课程(React ref的使用)
- ReactJS学习系列课程(React mixin的使用)
- ReactJS学习系列课程(React 组件的组合使用)
- ReactJS学习系列课程(React 表单应用)
- ReactJS学习系列课程(React 动画使用)
- ReactJS学习系列课程(React 调试工具集)
- 经典的Java基础面试题集锦
- C++ 实验四
- 高性能网站开发
- Java序列化的作用和反序列化
- 《leetCode》:Binary Search Tree Iterator
- ReactJS学习系列课程(JSX语法)
- android:screenOrientation属性
- hdu3527(STL)
- Linux与Windows 在软件开发能力上的较量
- C++ 实验五
- 前端常见图片格式整理
- C++拷贝构造函数(深拷贝,浅拷贝)
- 仿UC的菜单弹出,布局半透明,控件不受影响。
- C++类构造函数初始化列表