React.js入门实例教程之创建hello world 的5种方式

一、ReactJS簡介

React 是近期非常熱門的一個前端開發框架。 React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月就開源了。由於 React 的設計想法極為獨特，屬於革命性創新，因此性能出眾，但程式碼邏輯卻非常簡單。所以，越來越多人開始關注和使用，認為它可能是未來的 Web 開發的主流工具。

ReactJS官網網址：http://facebook.github.io/react/

Github網址：https://github.com/facebook/react

ReactJS中文地址：http://reactjs. /react/docs/getting-started.html

React是什麼？

React是由工作在Facebook的優秀程式設計師開發出來的用於開發使用者互動介面的JS函式庫。其原始碼由Facebook和社群優秀的程式設計師維護，因此背後有著非常強大的技術團隊給予技術支援。 React帶來了很多新的東西，例如元件化、JSX、虛擬DOM等。其提供的虛擬DOM使得我們渲染元件呈現非常之快，讓我們從頻繁操作DOM的繁重工作之中解脫。了解React的人都知道，它做的工作更多偏重於MVC中的V層，結合其它如Flux等一起，你可以非常容易構建強大的應用。

二、ReactJS特點

1，虛擬DOM

透過DOM diff演算法，只會更新差異化的部分，不用渲染整個頁面，從而提高效率

2，組件化
頁面分成若干個元件，元件中包含邏輯結構和樣式

元件只包含自身邏輯，更新元件的時候可以預測，利於維護

頁拆分多個元件，可以做到重複使用

3，頁拆分多個元件，可以做到重複使用

3，單向資料流

資料是從頂層元件傳遞到子元件中

資料可控制

三、入門React 編寫Hello，world 首先了解下什麼是JSX

React的核心機制之一就是虛擬DOM：可以在記憶體中建立的虛擬DOM元素。 React利用虛擬DOM來減少對實際DOM的操作從而提升效能。類似於真實的原生DOM，虛擬DOM也可以透過JavaScript來創建，例如：

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2);
React.render(
<div>{root2}</div>,
document.getElementById(&#39;container5&#39;)
);

使用這樣的機制，我們完全可以用JavaScript建立完整的介面DOM樹，正如我們可以用JavaScript創建真實DOM。但這樣的程式碼可讀性並不好，於是React發明了JSX，利用我們熟悉的HTML語法來創建虛擬DOM：

var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
React.render(
<div>{root}</div>,
document.getElementById(&#39;container6&#39;)
);

四、React 編寫Hello，world 入門的5種方式

第1種方式

<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>,
document.getElementById(&#39;example1&#39;)
);
</script>

   

第2種方式 

<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement(&#39;h1&#39;, {className:&#39;classN2&#39;}, &#39;2 Hello, 直接创建元素 world!&#39;),
document.getElementById(&#39;example2&#39;)
);
</script>

   

第3種方式

rr

   

第5種方式 

<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可
return (<h1 className=&#39;classN3&#39; >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>,
//或者双括号 <CreateEl></CreateEl>
document.getElementById(&#39;example3&#39;)
);
</script>

   

五、上結果圖

附上程式碼：

<div id="example4"></div>
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement(&#39;h1&#39;, {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null),
document.getElementById(&#39;example4&#39;)
);
</script>

下面給大家補充點知識：

React 術語

React Elements

React 術語

React Elements

React 元素的JavaScript 物件。 這些 JavaScript 物件最後被編譯成對應的 HTML 元素。

Components

封裝 React Elements， 包含一個或多個 React Elements。 Components 用於建立可以重複使用的 UI 模組，例如 分頁，側邊欄導航等。

JSX

JSX 是 React 定義的一種 JavaScript 語法擴展，類似於 XML 。 JSX 是可選的， 我們完全可以用 JavaScript 來寫 React 應用， 不過 JSX 提供了一套更簡單的方式來寫 React 應用。

Virtual DOM

Virtual DOM 是一個模擬 DOM 樹的 JavaScript 物件。 React 使用 Virtual DOM 來渲染 UI， 同時監聽 Virtual DOM 上資料的變更並自動移轉這些變更到 UI 上。

更多React.js入門實例教程之創建hello world 的5種方式相關文章請關注PHP中文網！