React學習（第一個實例）
Vue學的差不多了，談不上精通，但是單人搭建、開發、組件、路由、vuex什麼的都基本沒問題了，所以不能閒着，打算邊寫項目溫習Vue，邊學習下Reac。
因爲是剛開始學習熟悉下寫法，所以並沒有上來就開始搭建腳手架什麼的。需要注意下面三個地方。
- 引入文件 一共有三個 分別是 babel , react-dom , react.development ，點擊即可下載，下載後引入頁面即可
- 在寫script標籤時 要注意 <script type="text/babel"> 注意type的類型了
- 個人感覺在寫的時候很少用雙引號或者單引號了，{}大括號用的比較多了
創建dom的幾種寫法代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
.imgInfo{
width: 300px;
}
</style>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<div id="root4"></div>
<div id="root5"></div>
<div id="root6"></div>
<div id="root7"></div>
</body>
<script type="text/babel">
//1
var str=(<h3>Hello, world! 寫法1</h3>);
ReactDOM.render(
str,
document.getElementById('example')
);
//2 創建對象函數
const user={
name:"夏天到了，寫法2"
};
function formatName(user){
return user.name
};
const element=(<h1 className="baiyafei">{formatName(user)}</h1>);
ReactDOM.render(
element,
document.getElementById('root')
);
//3 創建圖片
var imageUrl="http://attach.bbs.miui.com/forum/201208/29/232300kednk6zwdwl8nq6i.jpg";
const imgInfo=(<img src={imageUrl} className="imgInfo"/>);
ReactDOM.render(
imgInfo,
document.getElementById('root2')
);
//4 創建嵌套
var a1=(
<div>
<h3>11111 寫法4</h3>
<h3>22222</h3>
</div>
);
ReactDOM.render(
a1,
document.getElementById("root3")
)
//5 元素更新
function time(){
var date=new Date().toLocaleTimeString();
var d = (<div>{date}，寫法5</div>);
ReactDOM.render(d,document.getElementById("root4"));
};
setInterval(time,1000);
//6 函數定義組件 傳參了
function Welcome(props){ //寫法1
return <h1>函數組件,{props.name}，寫法6</h1>;
}
// class Welcome extends React.Component{ //寫法2
// render(){
// return <h1>函數組件,{this.props.name}</h1>;
// }
// }
const element2 = (<Welcome name="sara"/>);
ReactDOM.render( //或者<Welcome/>
element2,
document.getElementById('root5')
);
//7 組合組件
function Bai(opt){
return <h3>{opt.name}，寫法7</h3>;
}
function Qs(){
return(
<div>
<Bai name="小明1"/>
<Bai name="小明2"/>
<Bai name="小明3"/>
</div>
);
}
ReactDOM.render(
<Qs />,
document.getElementById("root6")
)
//使用類創建組件
class Baiyafei extends React.Component{
render(){
return <h1>我是類組件，寫法8</h1>
}
}
ReactDOM.render(
<Baiyafei />,
document.getElementById("root7")
)
</script>
</html>