ReactJS入門基礎

時間 2019-12-13

標籤 reactjs 入門基礎简体版

原文原文鏈接

渲染這倆字可能在不少地方都見過。但可能不太理解是啥意思。css

那麼首先咱們來理解一下渲染。渲染我以爲這樣理解比較通俗。咱們作一個汽車，開始是沒有噴漆的（沒有css）只是些框框架架（HTML標籤）。那麼網頁加載就是首先加載完HTML元素，其次是css，css去遍歷渲染每一個對應元素的樣式讓其看起來就是咱們所想看到的效果同樣。不一樣瀏覽器的渲染方式不同，渲染機制也不同。簡單來將一個完整的HTML頁面渲染完成是有2個東西的。一個HTML元素加載完成，一個是CSS樣式加載完成。其次纔是JS，若是JS寫在頁面頂部在css元素加載以前那就會在其執行完後在執行後面的渲染，會讓頁面的加載斷斷續續。因此如今不少JS都是建議放在頁面以前而不是在header裏。更不能放在樣式加載以前。react

爲何要說渲染呢，我認爲ReactJS就是渲染器。git

下面咱們來講一下如何入門。首先要作的是下載文件。你能夠去官網下載最新版本github

http://facebook.github.io/react/數組

首先咱們要導入三個庫（實際路徑以本身文件爲準）瀏覽器

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>

react.min.js 是 React 的核心庫。安全

react-dom.js提供與 DOM 相關的功能。babel

browser.js 的做用是將 JSX 語法轉爲 JavaScript 語法。框架

React JSX

React 使用 JSX 來替代常規的 JavaScript。dom

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。

咱們不須要必定使用 JSX，但它有如下優勢：

JSX 執行更快，由於它在編譯爲 JavaScript 代碼後進行了優化。
它是類型安全的，在編譯過程當中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。

使用JSX

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

ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

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

上面代碼將一個 h1 標題，插入id爲example中.

運行結果：

獨立文件

咱們也能夠將React JSX 代碼寫在一個獨立文件裏，例如咱們建立一個 helloworld_react.js 文件，代碼以下：

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

而後能夠在HTML中引入

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

JSX 語法

JSX的語法，它容許 HTML 與 JavaScript 的混寫。

遇到 HTML 標籤（以 < 開頭的），就用 HTML 規則解析；遇到代碼塊（以 { 開頭的），就用 JavaScript 規則解析。

    var names = ['lisi', 'wanger', 'zhangsan'];

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

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員。上面程序運行結果以下

組件

React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類

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

    ReactDOM.render(
      <HelloMessage name="John" />,
      document.getElementById('example')
    );

以上代碼中，變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例。全部組件類都必須有本身的 render 方法，用於輸出組件。

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

組件的用法與原生的 HTML 標籤徹底一致，若是咱們須要向組件傳遞參數，能夠使用 this.props 對象。以上實例中 name 屬性經過 this.props.name 來獲取。

複合組件

咱們能夠經過建立多個組件來合成一個組件，即把組件的不一樣功能點進行分離。

如下實例咱們實現了輸出網站名字和網址的組件：

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite name="博客園" site=" http://www.cnblogs.com" />,
  document.getElementById('example')
);

實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應的信息，能夠理解爲 WebSite 擁有 Name 和 Link 的實例。

以上就是RejectJS入門基礎，看懂就能夠繼續深銳學習了。

其實學習ReactJS的要求並不高。有HTML5，CSS和JavaScript的基礎就能夠了

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

相關標籤/搜索

每日一句

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