資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究獨立 React.js 基本示例
讓我們首先從編寫簡單的 HTML 程式碼開始，看看如何使用 React
基本 React 示例 - 建立一個簡單的 div 如下所示：
<div class="player"> <h1>Steve</h1> <p>My hobby: Cricket</p> </div>
新增一些樣式元素
.player{
border:1px solid #eee;
width:200px;
box-shadow:0 2px 2px #ccc;
padding: 22px;
display:inline-block;
margin:10px;
}這就像 Web 應用中的普通 html 資料一樣。現在，我們可能有許多相同的播放器，然後我們必須像下面這樣複製相同的 div
<div class="player"> <h1>David</h1> <p>My hobby: Cricket</p> </div>
這些 div 在結構上相同，但內部包含不同的資料。在這裡，React 非常有用，它可以為我們建立可重用的元件，以避免重複的 html 結構並對元件執行邏輯操作。
讓我們新增 React
對於基本用法，我們將使用獨立的 React 庫。
我們將必須使用兩個主要的庫指令碼：
注意 - 部署時，將“development.js”替換為“production.min.js”
以下指令碼用於建立元件並在其上執行操作。
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
react-dom 指令碼用於將實際元件渲染到 html dom
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
我們還將使用獨立的 babel 預處理器來編譯最新的 JavaScript
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
React 使用 JavaScript 的一種特殊語法，稱為 jsx，它看起來非常類似於 html 本身。所以讓我們建立一個 React 函式元件。
函式元件的名稱以大寫字母開頭以使其正常工作。
function Player(){
return(
<div class="player">
<h1>Steve</h1>
<p>My hobby: Cricket</p>
</div>
);
}所以在實際的 html 檔案中，我們可以用下面的 div 替換第一個 div 播放器：
<div id="first"></div>
現在，我們必須使用 ReactDOM 將元件渲染到 html，如下所示：
渲染方法需要 React 元件作為引數以及它需要在 html 上渲染的位置。
ReactDOM.render(<Player/>,document.querySelector('#first'));函式元件用作第一個引數，就像 html 標籤一樣。渲染方法的第二個引數可以是 html 元素選擇器。
如果我們將所有這些部分放在一起，我們可以擁有以下 html 檔案進行測試：
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<style>
.player{
border:1px solid #eee;
width:200px;
box-shadow:0 2px 2px #ccc;
padding: 22px;
display:inline-block;
margin:10px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="first"></div>
<div class="player">
<h1>David</h1>
<p>My hobby: Cricket</p>
</div>
<script type="text/babel">
function Player(){
return(
<div className="player">
<h1>Steve</h1>
<p>My hobby: Cricket</p>
</div>
);
}
ReactDOM.render(<Player/>,document.querySelector('#first'));
</script>
</body>
</html>它實際上不可重用，因為我們使用的第二個播放器 div 仍然不是來自 React 元件。為了使其可重用，我們必須使用帶有名為 props 的引數的動態函式，如下所示：
function Player(props){
<div className="player">
<h1>{props.name}</h1>
<p>My hobby: {props.hobby}</p>
</div>
}引數 props 包含播放器的屬性。現在，我們可以為第二個播放器建立較小的替換 div，如下所示：
<div id="second"></div>
我們將像下面這樣在渲染方法中傳遞播放器屬性：
ReactDOM.render(
<Player name="Steve" hobbey="Cricket"/>,
document.querySelector('#first')
);
ReactDOM.render(
<Player name="David" hobbey="Cricket"/>,
document.querySelector('#second')
);現在，您已經觀察到可重用 React 元件的潛力。
而不是有兩個單獨的 ReactDOM.render，我們可以將它們組合在一起
//we can have only one div in html
<div id="app"></div>
//and in react script we can have:
var app= (
<div>
<Player name="Steve" hobbey="Cricket"/>
<Player name="David" hobbey="Cricket"/>
</div>
);
//Now, we will map our app component using ReactDOM:
ReactDOM.render(app,document.querySelector('#app'));基本 React 示例 - 最終 HTML 將如下所示
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<style>
.player{
border:1px solid #eee;
width:200px;
box-shadow:0 2px 2px #ccc;
padding: 22px;
display:inline-block;
margin:10px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="app"></div>
<script type="text/babel">
function Player(props){
//it returns the reusable code that
//we want to render on actual html page
return(
//we are adding the first player div info
<div className="player">
<h1>{props.name}</h1>
<p>My hobby: {props.hobby}</p>
</div>
);
}
var app= (
<div>
<Player name="Steve" hobbey="Cricket"/>
<Player name="David" hobbey="Cricket"/>
</div>
);
ReactDOM.render(app,document.querySelector('#app'));
</script>
</body>
</html>
2K+ 閱讀量
