2. 程式人生 > >【React-2】元件開發初步探索

【React-2】元件開發初步探索

阿新 • • 發佈：2018-12-12

得強調的是，在React 16之後，React.createClass語法就沒了，取代的是class Welcome extends React.Component{}，在後面的專案中會用最新版本的寫。

這裡暫時以0.14.7作為學習版本，核心邏輯沒有大的不同，細節之處需要額外注意。

另外，browser的版本，也沒有用最新的6.xx版本，用的是5.8.25.

<!DOCTYPE html>
<html>
<head>
	<title>
		Learning React.js
	</title>
	<link
 
 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

	<script type="text/javascript"
 
 src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>

</head>
<body>
	<div class="container">
		<div clas="row">
			<div class="col-md-12">
				<div id="jumbotron">	
				</div>	
			</div>	
		</div>
	</div>

	<!-- 注意在React16以後，createClass已經棄用了 -->
 


	<script type="text/babel">
		var Jumbotron = React.createClass({
			render: function() {
				return(
					<div>
						<div className="jumbotron">
							<h1 class="display-4">Hello, world!</h1>
							<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  							<a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
						</div>
					</div>	
				)
			}
		});

		// 將元件渲染到id為jumbotron的div中
		ReactDOM.render(
		<Jumbotron />, 
		document.getElementById('jumbotron'));
	</script>
</body>
</html>

END.

參考：

https://www.youtube.com/watch?v=CVigtRUxj2I&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO&index=4

相關推薦

【React-2】元件開發初步探索

得強調的是，在React 16之後，React.createClass語法就沒了，取代的是class Welcome extends React.Component{}，在後面的專案中會用最新版本的寫。 這裡暫時以0.14.7作為學習版本，核心邏輯沒有大的不同，細節之處需要額外注意。

【外掛分享】簡訊開發，簡訊實現，簡訊外掛小京東V4.2外掛

找到了一家不錯的簡訊外掛，有需要對接的可以檢視學習，在這邊分享一下，有需要的可以詳細看看，瞭解一下。http://www.ihuyi.com/ 外掛說明安裝前請詳細閱讀該說明。本外掛基於 小京東V4.2單倉 分銷版本,使用的頁面模板是小京東。如果您的小京東不是v4.2版本或者是二次開發過的，建議手動修改程式

【React-native】側滑元件 React-native-side-menu 的使用

本教程使用【側滑元件】 + 【模態層】 實現側滑顯示訊息列表並且點選顯示訊息詳情。 廢話不多說，先來效果圖 【側滑的元件效果比較簡陋，當然亦可是酷炫的頁面（類似qq側滑等）】： 元件介紹

【Swift 2.2】iOS開發筆記（三）

　　1、UITableView 中呼叫 UIButton 的 setTitle 會閃 　　　　滾動列表時比較明顯，解決辦法： buttonType 改成 custom 即可，但是這樣一來 UIButton 的高亮效果也沒了，但可以自己手動配置 State Config  　　　　2018-

【React Native】React Native 的開發路(Windows 開發環境配置)

開發平臺環境（Windows）    1 必備的軟體  包括 vscode  jdk  python nodejs  andriodstudio五個軟體 ，下載找度娘 安裝C++環境 編譯node.js的C++模組需要用到Windows SDK、mingw  cygwin

【React Native 安卓開發】----側邊欄的實現DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

前言 做過安卓原生開發的童鞋們應該都做過側邊欄這個東西，而且對於開源框架SlidingMenu和android官方側滑選單DrawerLayout應該都不陌生。 那麼今天也在這裡給大家介紹一下React-Native中的側滑選單DrawerLayoutAnd

【react學習】關於react框架使用的一些細節要點的思考

through 私有變量 col 層級 -1 turn ech react 子函數 （ _(:3 」∠)_給園友們提個建議，無論是API文檔還是書籍，一定要多看幾遍！特別是隔一段時間後，會有意想不到的收獲的） 這篇文章主要是寫關於學習react中的一些自己的思考： 1.se

UOJ#31 【UR #2】豬豬俠再戰括號序列

以及 turn ive bond ext 保持 class 仙人掌 d+ 傳送門http://uoj.ac/problem/31 大家好我是來自百度貼吧的_叫我豬豬俠，英文名叫_CallMeGGBond。 我不曾上過大學，但這不影響我對離散數學、復雜性分析等領域的興趣；

【入門篇】ANDROID開發之BUG專講

world 自然 執行 類型 效率 str 積累 全部 href 話說諸葛亮是一個優秀的程序員，每個錦囊都是應對不同的case而編寫的。可是優秀的程序員也敵只是更優秀的bug。六出祈山。七進中原，鞠躬盡瘁，死而後已的諸葛亮僅僅由於有一

【EasyUI總結】EasyUI開發中遇到的坑

spa columns .com 字段名 html mil span 個數字 style 普遍：1.easyui在書寫鍵值對的時候要註意是否要加引號，在需要加引號的地方不加則無法渲染；datagrid數據網格：1.datagrid默認請求方式是post，如果要使用分頁功能p

【轉2】Appium 1.6.3 在Xcode 8 (真機）測試環境搭建 經驗總結

原因 ftl 關於 經驗 結束 views 報錯 catch live Appium 1.6.3 在Xcode 8 (真機）測試環境搭建經驗總結 關於 Appium 1.6.3 在Xcode 8, 1真機上環境搭建問題更多，寫此文章，供大家參考，讓大家少走彎路。

【樹2】二叉樹

填充 通過 nbsp 速度 消元 理解 .com 我們 rdquo 二叉樹簡介 ---------------------------註：本文所用的術語定義均來自國外大學和計算機文獻使用的定義，非國內教材。------------------------------ 二

python 【練習2】字典打印三級菜單

python 字典 三級菜單 #!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/10/21 0021 16:19 # @Author : ming Northeast = { "吉林省": { "

【TP3.2】詳解_initialize() 和 __construct() 的區別和聯系

instance ins 執行 構造方法 ces 實例化 direct control 初始化 1、假設 一個AdminController.class.php 集成至 \Think\Controller 類， 我們來看看Controller.class.php的構造方法源

【TP3.2】TP3.2下實現ajax分頁（原創+親測可用）

條件 func edit syn model 多條 ade ges var 一，寫在最開始：ajax分頁的原理，是利用了js的ajax執行請求，獲取分頁list和分頁page 【代碼塊】，去替換頁面顯示數據的【代碼塊】 技術：js的ajax + TP3.2的fet

【TP3.2.*】解決session過期不失效 和 設置不成功問題

lifetime runtime isset 清除 不成功 use 問題 func true 1、背景：本來我想設置session有效期1800秒即30分鐘 失效的，可是實際使用TP3.2.0的時候發現，登錄了幾天用戶竟然沒有失效，一直都可以登錄。 2、解決： 2.1

【TP3.2】模板 select選項采坑

sel bsp item code selected 圖片 http sele 模板 1、TP3.2 模板 select 下拉框采坑 <div class="form-item"> <label class="item-labe

【USACO1.2】解題報告

前言 以後將會不定期刷USACO的題目。每做完一小章會寫一份解題報告。這一小章裡面較簡單或者並不是很重要的題目就會直接放在裡面。而比較重要的題目就會單獨寫部落格，在這裡面放連結。 這一章很簡單，全部都是很基礎的題目。就直接在這裡面一筆帶過。 USACO:http://train.us

【React Vuex】----store的建立方式

React: 　　flux:  從events模組引入 emit on 方法 import EventEmitter from 'events' 合併物件 const Store = Object.assign({},EventEmitter.prototype,{ state:

【USACO2.2】解題報告

前言 然而只有一道動態規劃的題目。。。 其他三道題都是模擬。。。 難度還是有所增加的。至少在洛谷中又有一道藍題了。 USACO：http://train.usaco.org USACO2.2.3.Preface Numbering 思路： 我們會發現羅馬數字中每一位都