Advantage

简单
快
type safe

Basic JSX

const element = <h1>Hello, world!</h1>;

const element = <img src={user.avatarUrl} />;

const element = (<div><h1>Hello!</h1><h2>Good to see you here.</h2></div>
);

JSX with attribute

const element = <a href="https://www.reactjs.org"> link </a>;

const element = <img src={user.avatarUrl}></img>;

JSX with embedded JS

Include js code in between '{ }'

embed variable

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

embed function

function formatName(user) {return user.firstName + ' ' + user.lastName;
}const element = (<h1>Hello, {formatName(user)}!</h1>
);

JSX as an expression

you can use JSX inside of if statements and for loops

assign it to variables,

accept it as arguments, and

return it from functions

function getGreeting(user) {if (user) {return <h1>Hello, {formatName(user)}!</h1>;}return <h1>Hello, Stranger.</h1>;
}

React.js -- JSX相关推荐

sublime67linter-php,Sublime Text 3 搭建 React.js 开发环境
Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQue ...
Sublime Text 3 搭建 React.js 开发环境
Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel-sublime 支持ES6, React.js, jsx代码高亮,对 ...
React.js加载组件以及JSX脚本处理代码
React.js是一个组件化的JS界面开发库,可以结合XML格式的脚本语法JSX. 如果你的页面中包含了这样的代码,需要将JSX代码预编译为Raw JavaScript,不然会提示有语法错误" ...
模糊选择器 js_5个很棒的 React.js 库，值得你亲手试试！
React在过去几年变得越来越受欢迎.随之而来的是越来越多的库的发布,给我们带来了新的可能性,但最重要的是让开发这工作变得越来越简单. 在本文中,介绍 5 个 React 库,希望能给你带来一些帮助. ...
React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番关于webpack2.0和1.x的区别概括起来就是tree shaki ...
React.js再探（四）
不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...

React.js -- JSX

Advantage

Basic JSX

JSX with attribute

JSX with embedded JS

JSX as an expression

React.js -- JSX相关推荐

最新文章

热门文章