前言
一個月之前，學完了html、css、html5、css3。接下來，準備入坑傳說中的前端框架，首先明白一個東西，什麼是框架？框架顧名思義，是別人集成好的一系列技術，那麼基於框架的開發，其實也就是在別人的東西上面進行二次開發。那麼通過本篇博客，來認識認識比較主流的Reactjs框架，屬於新手小白入門級別的文章，技術大牛可以略過，當然如果有幸能指點一二，本人也是非常感激！如有錯漏，還請各位看到的大佬們指出錯誤的觀點。
Reactjs官方
什麼？上來就啃官方文檔？
怎麼看呢？嗯。。。。
首先我得知道它是幹什麼的？
它能產生什麼樣的效果？
官方大哥，上來就給我來做個遊戲項目，零基礎的我吃不消啊。
那就先捨棄實戰教程，看看知識文檔吧？
用於構建用戶界面的JavaScript庫！
啥意思？javascript代碼庫？構建用戶UI界面？
如果我沒理解錯的話，就是通過js代碼的方式創建html 元素？
迴歸第一個問題，畢竟是前端框架，所以，它肯定是用來做前端頁面的？那跟傳統的方式有什麼不一樣呢？拿官方demo來分析分析。
1 .傳統方式：我們在html文檔中定義 各種標籤元素，比如什麼div、a、img、button等等。就是一個傳統的靜態html文檔。
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<img src="logo512.png" height=200px width=200px>
<p> Edit src/App.js and save to reload.</p>
<a href="#">learn Reactjs</a>
</div>
</body>
2 .Reactjs：手寫html文檔？不，我們不這麼做了，我們先申明一個空白的html文檔，什麼元素都不寫，你自己畫去吧，然後我們就能在這個空白文檔中發揮我們的創造力，通過js語法來不斷生成各種標籤
瞧一瞧源代碼：
/* index.html */
<body>
<noscript>You need to enable JavaScript to run this app</noscript>
<div id="root"></div>
</body>
沒錯，他果然沒在html裏面寫標籤，那在哪裏寫的呢？繼續看看源代碼
/* index.js */
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App？ 啥玩意？
/* index.js */
import App from './App';
發現 index.js中導入了App，再去App中看一看
果然，在這裏找到了頁面上該有的東西。
好了，具體語法暫且不論，捋一捋它的一個設計思想。
index.html主文件，創建一個空白的文檔，提供一個root節點index.js入口文件？負責在空白文檔中畫畫。app.js暫且推測這是一個應用，一個大型項目應該有多個應用。
到這裏其實還是不太明白，它高深的設計思想。那我不如回到實際一點，來看看它是怎麼完成一個項目的。畢竟學這東西就是爲了完成項目開發。
初識React項目
通過官方給出的安裝教程，以及配合各位大佬的教程，終於完成環境的配置。
在這之前或許先得對nodejs、npm、webpack等有一定了解。
在進行下面安裝步驟前，需要先安裝nodejs環境，nodejs會默認安裝npm工具。
1、安裝react腳手架
npm install -g create-react-app
2、創建react項目
create-react-app myreactapp
3、進入項目目錄
cd myreactapp
4、 啓動項目
npm start
接下來就能看到它自己在你的默認瀏覽器上打開http://localhost:3000/
看看項目結構
1、README.md
這個文件數說明文件，主要是一些項目的描述性信息
2、package.json
依賴包的配置文件，這裏面聲明的包會通過npm下載到node_modules中
3、 .gitignore
這個文件時git版本管制忽略的配置文件
4、package-lock.json
根據官方文檔，這個package-lock.json 是在 npm install時候生成一份文件，用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號。
5 、node_modules
用於存放第三方依賴模塊， 這裏麪包含了react項目中會用到的一些組件，install的時候下載下來的
6、public
（1） index.html
是react項目的入口頁面，也就是當你打開運行這個項目的時候，瀏覽器給你返回的那個頁面。
（2）manifest.json
當web頁面被用於Android主頁面使用時的配置文件
（3）其他
存放一些公共的靜態文件，比如圖片等。
7 src
這個文件就是我們需要去改動的地方，也就是開發文件夾，主要存放我們的各種開發文件。src目錄是我們保存源代碼的地方。裏面包含了一些我們自己使用的js文件，css文件，img文件等等
（1） index.js
index.js 是項目的入口js文件，系統默認將index.html對準了index.js，通過webpack將兩者關聯。
（2）App.js
它一個組件，有自己的結構，有自己的邏輯，有自己的樣式，會依賴一些資源，會依賴某些其他組件。
通過index.js引入，然後將其渲染到index.html中
（3）css
一些樣式文件
（4）其他
暫時不關注！
流程
捋一捋React的流程：
1、項目運行，系統默認打開index.html
2、index.html 引入 index.js文件
3、index.js 引入各種各樣的組件，每個組件有自己的結構、樣式、邏輯。
4、各種組件通過index.js渲染到空白的index.html中
5、我們就能看到一個五彩斑斕的網頁了
到這裏以後，我感覺雨停了、天晴了、我又行了！！！
有了閱讀官方文檔的自信了，當然這只是一個最原始，最基礎的項目，不斷學習，不斷完善，不斷擴充項目結構。以後遇到的時候會進行記錄，直到能完成一個完整的企業級項目結構。
下一篇將會對官方文檔進行學習和記錄。