從零開始學React(2)——React語法

時間 2019-11-17

標籤開始 react 語法欄目 React 简体版

原文原文鏈接

前一章內容是從零開始學React(1)—— http://my.oschina.net/u/2608629/blog/675631javascript

第一章，咱們會使用render()方法了，這裏。咱們作更深刻的研究。html

先上demojava

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="hello_name"></div>
<script type="text/babel">
	var names=["Joey","Harry","Roxie"];
	ReactDOM.render(
		<div>
			{names.map(function (name){
				return <div>Hello {name}!</div>
			})}
		</div>,
		document.getElementById("hello_name")
		)
</script>
</body>
</html>

上圖運行結果以下:react

在JXS語句中，有2個標籤咱們要熟練掌握。<>和{}。<>這個符號是html中最常常遇到的，表明標籤。在JXS中，全部被<>括起來的內容。都會被解析爲HTML內容。數組

相對的{},這個符號被javascript解析，{}這個符號也挺好玩的，EL表達式，Jquery，angular等須要替換變量的地方使用的都是這個。babel

就像HTML中，內容嵌套同樣，在JXS語句中，<>和{}也是相互嵌套。而後生成了咱們想要的HTML頁面。dom

map():是一個遍歷方法，在React中，能夠把數組的一個個元素取出來。ui

接下來的一章是從零開始學React(3)——數組 http://my.oschina.net/u/2608629/blog/675799.net

相關文章

相關標籤/搜索

從零開始學

Kettle從零開始

從零開始學Swift

《從零開始學Swift

Python3.5從零開始學

從零開始學Go

從零開始學BPM，Day1

從零開始學BPM，Day3

從零開始學BPM，Day2

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<