從零開始學React(1)——HelloWorld

時間 2019-11-17

原文原文鏈接

一，React是什麼

React只是一個javascript 庫，只不過它是facebook公司編寫併發布的。javascript

React 起源於 Facebook 的內部項目，由於 FB 對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。html

因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。java

React的優勢react

快速的渲染性能。
跨平臺的特性
實現了組件化，便於複用
facebook幫咱們作了充分的測試，天天移動端7億以上的訪問量

二,下載React

官網下載請點擊，git

也能夠在個人github上面，下載個人demo進行練習點擊github

$ git clone https://github.com/wszyf2100/git_demo.git

我介紹使用的幾個js文件。npm

官方下載的react中含有如下幾個文件服務器

react.js 是React的核心包，須要先加載。
react-dom.js React中提供與DOM相關功能的包。
react-dom-server.js
react-width-addons.js

在此處，Browser.js是將React的JSX語法轉換爲JS語法的工具包，正常狀況下這個包只放在服務器端。由於，咱們須要本地調試並開發，因此就加載進來了。babel

在這裏不少人會問JSX是什麼?

JSX 使用的是預編譯模板，React 提供了一個預編譯工具，叫 react-tools，能夠經過 npm 命令安裝，通常是在開發時期運行，運行後它會啓動一個監聽程序，實時監聽 JSX 源碼的修改，而後自動編譯爲 JS 代碼。併發

三，開始咱們React生涯的第一個Hello wolrd

<!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="div_hello"></div>
<div id="div_hello2"></div>
<script type="text/babel">
	ReactDOM.render(
		<h1>Hello world!</h1>,
		document.getElementById('div_hello')
	);
</script>
</body>
</html>