Webpack + React 开发 02 JSX 语法
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 语法的更多相关文章
- 搭建 webpack + React 开发环境
说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
- 从零开始搭建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 ...
- react入门-----(jsx语法,在react中获取真实的dom节点)
1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...
- 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制
****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...
- Webpack + React 开发 01 HelloWorld
1.项目依赖 安装所需要依赖的其它第三方开源库,项目依赖如下: "dependencies": { "babel-core": "^6.21.0&qu ...
- Webpack + React 开发 03 props
React中组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloWorld name="John"> ,就是 HelloWorld 组件加入 ...
- 前端React开发入门笔记
什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...
- React开发入门
目录: 一.前言 二.什么是React 三.开发环境搭建 四.预备知识 五.最简单的React小程序 六.基础语法介绍 七.总结 八.参考资料 一.前言 近段时间看到学长公司招聘React Nat ...
- React笔记02——React中的组件
一个网页可以被拆分成若干小部分,每个部分都可以称为组件,即组件是网页中的一部分.组件中还可以有多个组件. 上一节中的App.js就是一个组件(继承了React.Component类的类). 一个组件的 ...
随机推荐
- 查看、生成 SSH 密钥用于安全登陆
SSH 可以用来登陆服务器,远程执行命令,并用强加密算法编码保护通信安全,目前广泛应用于远程命令控制.文件加密传输等方面.SSH 登陆服务器的方法一般有两种:密码登陆和密钥登陆. 在受信任的设备上使用 ...
- 比较语义分割的几种结构:FCN,UNET,SegNet,PSPNet和Deeplab
简介 语义分割:给图像的每个像素点标注类别.通常认为这个类别与邻近像素类别有关,同时也和这个像素点归属的整体类别有关.利用图像分类的网络结构,可以利用不同层次的特征向量来满足判定需求.现有算法的主要区 ...
- [zabbix] zabbix检测mysql主从状态
环境说明: zabbix-proxy 172.16.2.95(zabbix-server同理) zabbix-agent111 172.16.2.111 mysql从机 1.mysql从机添加用户权限 ...
- MathExam第二次作业
第二次作业:MathExam 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 20 30 • ...
- 计算器简单封装和ASP.net
封装: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...
- BETA随笔6/7
前言 我们居然又冲刺了·六 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 过去两天完成了哪些任务 新方案代码比之前的更简单,但是对场景的要求相应变高了,已经实现,误差感人 代码 ...
- Leetcode题库——21.合并两个有序链表
@author: ZZQ @software: PyCharm @file: mergeTwoLists.py @time: 2018/9/16 20:49 要求:将两个有序链表合并为一个新的有序链表 ...
- 剑指offer:矩形覆盖
题目描述: 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 解题思路: 和跳台阶那道题差不多.分别以矩形的两条边长做拓 ...
- KEIL C51 printf格式化输出特殊用法
作者:dragoniye 发布:2014-02-15 12:44 分类:硬件 抢沙发 /*******************************************KEI ...
- 用户数以及psp
小组名称:好好学习 小组成员:林莉 王东涵 胡丽娜 宫丽君 项目名称: 记账本 alpha发布48小时以后用户数如何,是否达到预期目标,为什么,是否需要改进,如何改进(或理性估算). 首先我 ...