Reactjs 入門基礎(一)

時間 2019-11-18

標籤 reactjs 入門基礎简体版

原文原文鏈接

實例中咱們引入了三個庫： react.min.js 、react-dom.min.js 和 browser.min.js：
　　1，react.min.js -React 的核心庫
　　2，react-dome.min.js - 提供與DOM 相關的功能。
　　3，browser.min.js 用於將JSX 語法轉化爲JavaScript 語法。react

　ReactDOM.render(
　　　　　　<h1>Hello, world!</h1>,
　　　　　　document.getElementById('example')
　　);

　　注意：若是咱們須要使用 JSX，則 <script> 標籤的 type 屬性須要設置爲 text/babel。數組

　　React 使用 JSX 來替代常規的 JavaScript。
　　JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
　　咱們不須要必定使用 JSX，但它有如下優勢：
　　JSX 執行更快，由於它在編譯爲 JavaScript 代碼後進行了優化。
　　它是類型安全的，在編譯過程當中就能發現錯誤。
　　使用 JSX 編寫模板更加簡單快速。瀏覽器

使用 JSX
　　JSX 看起來相似 HTML ，咱們能夠看下實例:安全

　　　ReactDOM.render(
　　　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　　　document.getElementById('example')
　　　);

咱們能夠在以上代碼中嵌套多個 HTML 標籤，須要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，
添加自定義屬性須要使用 data- 前綴。babel

　　　ReactDOM.render(
　　　　　　<div>
　　　　　　　　<h1>檸檬先生</h1>
　　　　　　　　<h2>歡迎學習 React</h2>
　　　　　　　　<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
　　　　　　</div>,
　　　　　　document.getElementById('example')
　　　　);

獨立文件dom

　　　　你的 React JSX 代碼能夠放在一個獨立文件上，例如咱們建立一個 helloworld_react.js 文件，代碼以下：學習

　　　　　ReactDOM.render(
　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　document.getElementById('example')
　　　　　　);

　　　　而後在 HTML 文件中引入該 JS 文件：優化

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel" src="helloworld_react.js"></script>
　　　　　　</body>

　　　　咱們能夠在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例以下：spa

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　<h1>{1+1}</h1>
　　　　　　　　　　　　</div>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

在 JSX 中不能使用 if else 語句，單可使用 conditional (三元運算) 表達式來替代。如下實例中若是變量 i 等於 1 瀏覽器將輸出 true, 若是修改 i 的值，則會輸出 false.code

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　　　var i = 1;
　　　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　<h1>{i == 1 ? 'True!' : 'False'}</h1>
　　　　　　　　　　　　　　　　</div>,
　　　　　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

樣式
React 推薦使用內聯樣式。咱們可使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px 。如下實例演示了爲 h1 元素添加 myStyle 內聯樣式：

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　var myStyle = {
　　　　　　　　　　　　fontSize: 100,
　　　　　　　　　　　　color: '#FF0000'
　　　　　　　　　　};
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<h1 style = {myStyle}>檸檬先生</h1>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

註釋
註釋須要寫在花括號中，實例以下：

　　　ReactDOM.render(
　　　　　　　　<div>
　　　　　　　　　　<h1>檸檬先生</h1>
　　　　　　　　　　{/*註釋...*/}
　　　　　　　　</div>,
　　　　　　　　document.getElementById('example')
　　　　);

數組
JSX 容許在模板中插入數組，數組會自動展開全部成員：

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　var arr = [
　　　　　　　　　　　　<h1>檸檬先生</h1>,
　　　　　　　　　　　　<h2>學的不只是技術，更是夢想！</h2>,
　　　　　　　　　　　　];
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<div>{arr}</div>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

React 組件
接下來咱們封住一個輸出 "Hello World！" 的組件，組件名爲 HelloMessage：

　var HelloMessage = React.createClass({
　　　　　　　　render: function() {
　　　　　　　　　　　　return <h1>Hello World！</h1>;
　　　　　　　　}
　　　　});

　　　　ReactDOM.render(
　　　　　　　　<HelloMessage />,
　　　　　　　　document.getElementById('example')
　　　　);

注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，好比 HelloMessage 不能寫成 helloMessage。
除此以外還須要注意組件類只能包含一個頂層標籤，不然也會報錯。

1. ReactJS入門基礎
2. Reactjs系列一reactjs基礎知識
3. ReactJS入門之ReactJS簡介
4. reactJs 基礎
5. 【JavaScript】ReactJS基礎
6. ReactJS基礎(續)
7. ReactJS 快速入門
8. ReactJS入門指南
9. ReactJS入門教程
10. ReactJs入門教程
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Kotlin 基礎語法 - Kotlin 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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