2. 程式人生 > >React 入門例項教程 12個demo

React 入門例項教程 12個demo

阿新 • • 發佈：2019-02-11

原文連結：http://www.ruanyifeng.com/blog/2015/03/react.html

下面要講解的12個例子在各個 Demo 子目錄，每個目錄都有一個 index.html 檔案，在瀏覽器開啟這個檔案（大多數情況下雙擊即可），就能立刻看到效果。

需要說明的是，React 可以在瀏覽器執行，也可以在伺服器執行，但是本教程只涉及瀏覽器。一方面是為了儘量保持簡單，另一方面 React 的語法是一致的，伺服器的用法與瀏覽器差別不大。Demo13 是伺服器首屏渲染的例子，有興趣的朋友可以自己去看原始碼。

一、HTML 模板

使用 React 的網頁原始碼，結構大致如下。


<!DOCTYPE html>
<html>
  <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="example"></div>
    <
 
script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

上面程式碼有兩個地方需要注意。首先，最後一個 <script> 標籤的 type 屬性為 text/babel 。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不相容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面程式碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js

 ，它們必須首先載入。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。


$ babel src --out-dir build

上面命令可以將 src 子目錄的 js 檔案進行語法轉換，轉碼後的檔案全部放在 build 子目錄。

二、ReactDOM.render()

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


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

上面程式碼將一個 h1 標題，插入 example 節點（檢視 demo01），執行結果如下。

三、JSX 語法

上一節的程式碼， HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫（檢視 Demo02 ）。


var names = ['Alice', 'Emily', 'Kate'];

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

上面程式碼體現了 JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到程式碼塊（以 { 開頭），就用 JavaScript 規則解析。上面程式碼的執行結果如下。

JSX 允許直接在模板插入 JavaScript 變數。如果這個變數是一個數組，則會展開這個陣列的所有成員（檢視 demo03 ）。


var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面程式碼的arr變數是一個數組，結果 JSX 會把它的所有成員，新增到模板，執行結果如下。

四、元件

React 允許將程式碼封裝成元件（component），然後像插入普通 HTML 標籤一樣，在網頁中插入這個元件。React.createClass 方法就用於生成一個元件類（檢視 demo04）。


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。另外，元件類只能包含一個頂層標籤，否則也會報錯。


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

上面程式碼會報錯，因為HelloMessage元件包含了兩個頂層標籤：h1和p。

元件的用法與原生的 HTML 標籤完全一致，可以任意加入屬性，比如 <HelloMessage name="John"> ，就是 HelloMessage 元件加入一個 name 屬性，值為 John。元件的屬性可以在元件類的 this.props 物件上獲取，比如 name 屬性就可以通過 this.props.name 讀取。上面程式碼的執行結果如下。

新增元件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

五、this.props.children

this.props 物件的屬性與元件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示元件的所有子節點（檢視 demo05）。


var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
React 入門例項教程 12個demo

     
 
                

原文連結：http://www.ruanyifeng.com/blog/2015/03/react.html

下面要講解的12個例子在各個 Demo 子目錄，每個目錄都有一個 index.html 檔案，在瀏覽器開啟這個檔案（大多數情況下雙擊即可），就能立刻看到 



  
 

    


    
    
React 入門例項教程

     
 下面要講解的12個例子在各個 Demo 子目錄，每個目錄都有一個 index.html 檔案，在瀏覽器開啟這個檔案（大多數情況下雙擊即可），就能立刻看到效果。需要說明的是，React 可以在瀏覽器執行，也可以在伺服器執行，但是本教程只涉及瀏覽器。一方面是為了儘量保持簡單，另一方面 React 的語法是一致的， 



  
 

    


    
    
WebService入門例項教程 （兩個網址）

     
  
 
 https://www.cnblogs.com/AlanLee/archive/2017/06/02/6933073.html 
   
 http://www.iteye.com/topic/1135747 
   
   
 前言：朋友們開始以下教程前，請先看第五大 



  
 

    


    
    
MVC5+EF6 入門完整教程12--靈活控制Action權限

     
 全局   基本功   -1   str   條件   context   tac   完整   suse   大家久等了。
本篇專題主要講述MVC中的權限方案。
權限控制是每個系統都必須解決的問題，也是園子裏討論最多的專題之一。
前面的系列文章中我們用到了 SysUser, SysRole, SysUserR 



  
 

    


    
    
SpringBoot-整合JSP入門例項教程

     
  
 
  
  
 一、前言 
 JSP在SpringBoot中雖然變得不再倡導使用，但是也經歷了歷史的驗證，在公司大多數人員都使用jsp的情況下，還是繼續使用比較穩妥，操作起來也比較方便，技術沒有好與壞，能解決實際需求才是真理 
 二、實踐 
 1. 匯入pom檔案 
         <depen 



  
 

    


    
    
Netty入門例項教程

     
 
                



因為接下來的專案要用到netty,所以就瞭解一下這個程式，奈何網上的教程都是稍微有點基礎的，所以，就寫一篇對於netty零基礎的，順便也記錄一下。



先扔幾個參考學習的網頁： 







關於NIO基礎的知識：https://my.oschina.net/an 



  
 

    


    
    
RabbitMQ學習總結（3）——入門例項教程詳解

     
 
                

一、起航
       本章節，柯南君將從幾個層面，用官網例子講解一下RabbitMQ的實操經典程式案例，讓大家重新回到經典“Hello world！”（The simplest thing that does something ）時代，RabbitMQ 支援N多種客戶 



  
 

    


    
    
十分詳細的React入門例項

     
 
							
							
							學習React不是一蹴而就的事情，入門似乎也沒那麼簡單。但一切都是值得的。

今天給大家帶來一個詳細的React的例項，例項並不難，但對於初學者而言，足夠認清React的思考和編寫過程。認真完成這個例項的每一個細節會讓你受益匪淺。接下來我們開始吧！

程式碼下載 



  
 

    


    
    
MVC5+EF6 入門完整教程12--靈活控制Action許可權

     
 
                
大家久等了。 
本篇專題主要講述MVC中的許可權方案。 
許可權控制是每個系統都必須解決的問題，也是園子裡討論最多的專題之一。

前面的系列文章中我們用到了 SysUser, SysRole, SysUserRole 這幾個示例表。

我們以此為基礎，完成RBAC (基於角 



  
 

    


    
    
12個最佳的響應式網頁設計教程，輕鬆帶你入門！

     
  
 
 如何讓你的網站在其出現的任何裝置和螢幕尺寸上能夠完美的呈現？響應式設計完美的解決了這一難題，作為現在的網頁設計師都應該瞭解響應式網頁設計的原則。而對於剛步入網頁設計的新手設計師，如果你還不瞭解什麼是響應式設計？如何製作響應式頁面？這篇文章為大家提供了12個基礎的響應式網頁設計的教程，結尾還附上了個人 



  
 

    


    
    
React 入門，5個常用DEMO展示

     
 
							
							
							
  閱讀前請看這裡： 
   * 瞭解js及jQuery的使用 
   * 對react有一定的瞭解，知道jsx的語法 
   * 這裡只講述如何使用react，並不介紹react的優缺點
  
  如果不滿足這些，建議先了解下，然後再看這篇文章


下面會講 



  
 

    


    
    
Vue2.0--14.小白入門教程--例項化多個vue物件,可初始化操作幾種方法

     
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VueJS Tutorials</title>
    <link href="styles.c 



  
 

    


    
    
React 入門 Demo 例項總結

     
 
                

學習一門語言，貌似最基礎的demo練習就是實現CRUD操作。所以決定做一個react入門總結。

首先，在實現crud操作前我們需要了解，React是如何操作修改資料，先看一個簡單的demon，react是如何實現資料雙向繫結（我理解的資料雙向繫結）


一、簡單的雙向繫 



  
 

    


    
    
Kivy crash 中文教程 例項入門 1. 第1個應用 Kivy App (Making a simple App)

     
 
                
1.  空白視窗
在 PyCharm 中建立一個名為 TutorialApp 的專案，然後在該專案中新建了個名為 tutorial_app.py 的 Python 原始檔，在 PyCharm 的程式碼編輯器中，輸入下面的程式碼：
from kivy.app import A 



  
 

    


    
    
React 入門-寫個 TodoList 例項

     
 React 是一個用於構建使用者介面的 JavaScript 庫，主要特點有：

 - **宣告式渲染**：設計好資料和檢視的關係，資料變化 React 自動渲染，不必親自操作DOM
 - **元件化**：頁面切分成多個小部件，通過組裝拼成整體頁面，利於程式碼複用

本文通過寫個簡單的 `TodoList`  



  
 

    


    
    
JPA入門到精通教程 109個視頻

     
 jpa入門https://ke.qq.com/course/199224#tuin=337f5ff2隨著Spring Boot微服務框架的逐漸流行，使用註解的方式寫代碼會越來越多，源碼時代順應企業需求，即時更新了原Hibernate內容，使用JPA代替，後續還會逐漸推出Spring Data JPA、Spri 



  
 

    


    
    
Expression Blend實例中文教程(12) - 樣式和模板快速入門Style,Template

     
 lap   gin   ger   快速   style   分享   所有   mar   相同屬性   在上一篇，介紹了Visual State Manager視覺狀態管理器，其中涉及到控件的樣式（Style）和模板（Template），本篇將詳細介紹樣式（Style）和模板（Template）在Silv 



  
 

    


    
    
TensorFlow入門之一：第一個機器學習Demo

     
  
  
  
 版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/geyunfei_/article/details/78782804 
 本文主要通過一個簡單的 Demo 介紹 TensorFlow 初級 API 的使用方法，因為自己也是初學者，因此本文的目 



  
 

    


    
    
Python爬蟲入門級別的三個案例教程

     
  
 
 貼吧爬取 
 寫程式碼前，構思需要的功能塊；寫程式碼時，把各個功能模組名提前寫好 
  
 初始化 
 初始化必要引數，完成基礎設定 爬取百度貼吧lol吧：爬取地址中的get引數須傳遞(可以指定不同主題的貼吧和頁碼) 
 
  主題名 
  初始網址 
  請求頭 
 
 生成網址 
 生成每一頁的 



  
 

    


    
    
React入門教程（一）

     
  
  
  
 一、HTML 模板 
 使用 React 的網頁原始碼，結構大致如下。 
 <!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>