HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写;

render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));

JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

var names = ['Alice', 'Emily', 'Kate'];

render(
<div>
{
names.map( name => {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('helloworldDiv')
);

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员;

var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
render(<div>{arr}</div>, document.getElementById('helloworldDiv'));

上面代码的arr变量是一个数组,结果 JSX 会把它的所有成员,添加到模板;

Webpack + React 开发 02 JSX 语法的更多相关文章

  1. 搭建 webpack + React 开发环境

    说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...

  2. 从零开始搭建webpack+react开发环境

    环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...

  3. react入门-----(jsx语法,在react中获取真实的dom节点)

    1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...

  4. 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

    ****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...

  5. Webpack + React 开发 01 HelloWorld

    1.项目依赖 安装所需要依赖的其它第三方开源库,项目依赖如下: "dependencies": { "babel-core": "^6.21.0&qu ...

  6. Webpack + React 开发 03 props

    React中组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloWorld name="John"> ,就是 HelloWorld 组件加入 ...

  7. 前端React开发入门笔记

    什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...

  8. React开发入门

    目录: 一.前言 二.什么是React 三.开发环境搭建 四.预备知识 五.最简单的React小程序 六.基础语法介绍 七.总结 八.参考资料   一.前言 近段时间看到学长公司招聘React Nat ...

  9. React笔记02——React中的组件

    一个网页可以被拆分成若干小部分,每个部分都可以称为组件,即组件是网页中的一部分.组件中还可以有多个组件. 上一节中的App.js就是一个组件(继承了React.Component类的类). 一个组件的 ...

随机推荐

  1. DP使用GUI推送WIN客户端是报110:1022错误的解决办法

    在使用GUI推送WIN客户端时,输入用户名和密码后报错: [Critical 110::1022]  Cannot connect to the SCM (Service Control Manage ...

  2. FirstWebApp

    servlet规范中定义了web应用程序的目录层次:http://localhost:8080/docs/appdev/deployment.html 第一个web应用程序 开发,并部署到tomcat ...

  3. python-模拟掷骰子,两个筛子数据可视化

    """ 作者:zxj 功能:模拟掷骰子,两个筛子数据可视化 版本:3.0 日期:19/3/24 """ import random impo ...

  4. "重力锁屏"Beta版使用说明

    一.产品介绍 重力锁屏是基于android系统的一款锁屏软件.它利用重力感应器来判断用户的动作从而自动锁屏亮屏,是锁屏软件的一大创新.相比传统的锁屏软件,“重力锁屏”从可操作性.方便性.功能全面性都有 ...

  5. C#中周,月,第几周,周开始结束时间de方法总结

    1.c#获取当前时间是本年的第几周,本月的第几周 private static int getWeekNumInMonth(DateTime daytime) { int dayInMonth = d ...

  6. thinkphp学习3-模板与视图

    1.模板赋值 如果要在模板中输出变量,必须在在控制器中把变量传递给模板,系统提供了assign方法对模板变量赋值,无论何种变量类型都统一使用assign赋值. $this->assign('na ...

  7. windows下的C++ socket服务器(2)

    int main(int ac, char *av[]) { ); ) { exit(); } thread t; ) { int socket_fd = accept(tcp_socket, nul ...

  8. es6箭头函数的注意要点

    具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 没有参数的需要用在箭头前加上小括号 var lo ...

  9. Beta阶段冲刺前准备

    第 1 篇 Scrum 冲刺博客 1.新成员 暂无新成员,等一个有缘人 团队成员: 刘阳航(captain) 陈文俊 林庭亦 郑子熙 2.讨论是否需要更换团队的PM 经过团队讨论,我们决定不更换团队P ...

  10. PHP导出sql文件

    发现自己之前写的php导出sql数据为Excel文件在导出一些数据的时候出现了精度的问题,比如导出身份证号的时候会把后面变成0000.暂时先把这个问题留下,有空去看看到底是什么问题. 写了一个导出sq ...