React是什么？
react官方對它的解釋，用于構建用戶界面的JavaScript庫，對于前段來說，主要任務就是構建頁面，而構建頁面離不開三個技術
HTML:構建頁面的解構
CSS：構建頁面的樣式
JavaScript:頁面動態互動
React的特點:宣告式編程
宣告式編程是目前前端的開發模式 Vue React
它允許我們只需要維護自己的狀態，當狀態發生改變時候，react可以根據最新的狀態去渲染我們的UI界面
組件化開發
組件化開發也是目前前端的流行趨勢，在開發程序中，我們可以將一個復雜的界面拆分成一個個小的組件
開發react需要添加三個依賴
三個依賴有三種方式添加
方式一：CDN引入
react依賴:https://unpkg.com/react@16/umd/react.development.js
react-dom依賴:https://unpkg.com/react-dom@16/umd/react-dom.development.js
babel依賴:https://unpkg.com/babel-standalone@6/babel.min.js
方式二：下載后添加本地依賴
方式三：通過npm包管理
這篇以CDN方式引入
在剛接觸react時候，會覺得react比較繁瑣，這里用vue來對比 想要使用vue直接cdn引入一個依賴就可以開發vue 這是因為vue講所有依賴集成到了一個
而react需要引入三個 但是呢，這三個庫各司其職，目的是為了讓每一個庫各司其職
為什么要引入三個依賴呢?原因是react-native
react包含了react和react-native所共有的核心代碼
react-dom針對web和native所完成的事情不同：
web端：react-dom會講jsx最終渲染成真實的DOM，顯示在瀏覽器中
native端：react-dom會講jsx最終渲染成原生的控制元件（比如Android中的Button，iOS中的UIButton），
babel是什么？
Babel ，又名 Babel.js，
是目前前端使用非常廣泛的編輯器、轉移器，
比如當下很多瀏覽器并不支持ES6的語法，但是確實ES6的語法非常的簡潔和方便，我們開發時希望使用它，
那么撰寫原始碼時我們就可以使用ES6來撰寫，之后通過Babel工具，將ES6轉成大多數瀏覽器都支持的ES5的語法，
Hello React
使用react語法，實作hello world
<body>
<div id="app">
</div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 將資料定義到變數中
let message = "Hello World";
// 通過ReactDom物件來渲染內容
render();
// 定義一個執行的函式
function btnClick() {
message = "Hello React";
render();
}
function render() {
ReactDOM.render((
<div>
<h2>{message}</h2>
<button onClick={btnClick}>改變文本</button>
</div>
), document.getElementById("app"));
}
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/200677.html
標籤：java
上一篇：less混合 + less計算
下一篇：簡單解決jsp中文亂碼問題