寫在開頭：
感覺社會變化很快，我記得從我第一次學習css js jquery的時候，我都一直希望趕緊學習後端，因爲覺得後端工資高，一直忽視前端，到現在才猛然發現，前端要解決的問題太多，前端越來越有競爭力，自己彷彿在不知不覺中被甩遠了，後來從java轉到了ruby後端，才意識到全棧纔是自己真正想要達到的一個階段，同事在離職前給我一個英文版的項目視頻，因爲現在的英文能力有限，所以購買了箇中文版的項目，想利用休息時間，好好能系統過一遍，也想着記下筆記，利於自己複習，也方便他人。
一：react開發環境準備
1.安裝node
LTS比較穩定的版本 current最新的版本
安裝完成後
node -v npm -v
輸出成功，說明node就安裝成功了。
2.創建react腳手架
npm install -g create-react-app
注意：如果出現Error: EACCES: permission denied, access '代表沒有權限，加上sudo 命令即可。
create-react-app my-app
create-react-app helloWorld
Could not create a project called "helloWorld" because of npm naming restrictions:
* name can no longer contain capital letters
這裏會自動幫你去構建react的項目工程。比如去安裝一些react所需要的依賴包。
Success! Created helloworld at /Users/sai/Desktop/helloworld
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd helloworld
yarn start
cd helloworld
npm run start
腳手架工具幫我們分析源代碼，啓動一個服務器把源代碼運行起來，看到的頁面就是代碼工程生成的頁面
二：工程目錄簡介
通過create-app腳手架生成的主要目錄介紹
-
node_modules：是我們項目所依賴的第三方的包 -
public-
favicon.ico:圖標 -
index.html:當前顯示的頁面
-
-
yarn.lock:項目的依賴包、版本號 不要動-
readme.md:說明文件 -
package.json: node包文件，可以把你的項目變成一個包
-
// package.json
{
"name": "helloworld", #名字
"version": "0.1.0", #版本
"private": true, #私有
"dependencies": { #依賴的包
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5"
},
"scripts": { #指令
"start": "react-scripts start", #之所以在命令行中可以輸入npm run start啓動，是因爲在這裏配置了 它去通過react-scripts工具去啓動服務器
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
gitignore:用過用git進行管理，你不想傳遞到git倉庫，可以放到這裏。
-
src-
index.js:
-
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import.. from是es6提供的模塊引入的語法。
這裏所引入的React ReactDOM對應的package.json中dependencies存在的庫。
// PWA progressive web application
// 通過寫網頁的形式來寫手機app應用
// 寫一個網頁，上線到https服務器上，當用戶斷網的時候，再訪問的時候還是能看到之前已經加載好的頁面
import registerServiceWorker from './registerServiceWorker';
三：react中的組件
一個頁面如果很複雜，我們寫起來很麻煩。但是如果寫成一個個可拆分的組件的時候，我們就好管理的多。而且組件的形式也可重用性強。這也就是前端同學經常說的 前端組件化 的含義。
這裏再針對於本章說下最基礎的jsx語法
- 我們在之前的js返回一般寫的是
return <div>hello, jianshu</div>，而在jsx中是不加但雙引號的。另外，在jsx中，不單單可以引入普通的標籤，還可以引入組件。 - 在jsx引入組件的時候，比如引入
<App />組件，這裏的組件首字母必須要大寫，不能是<app />，因爲這種jsx語法是不支持的，所以要用jsx語法，首字母必須大寫。所以，大寫字母開頭的話，一般是組件。
從腳手架生成的app.js我們進行分析
// app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component { // 用es6的語法寫了繼承
render() {
return (
<div>
hello, jianshu.
</div>
);
}
}
export default App; //導出操作，正好index.js引入了，所以顯示出來了
app.js中render下的<div>也是jsx語法，所以必須引入React，引入之後，才能編譯成功。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
ReactDOM是第三方的模塊，它有一個方法是render，這個方法幫我們把一個組件掛在dom節點上。這裏掛在在root下。
<div id="root">
...
</div>
<App />是jsx語法，需要引入對應的react。
再整體介紹一遍：
index.js是程序入口，引入React ReactDOM,，接着引入了一個組件，叫APP，用reactdom把這個組件顯示在root節點。
因爲這裏用了jsx語法，所以需要引入import React, { Component } from 'react';，然後再看app.js，它就是個名字叫App的組件，在這個組件中返回了一些內容，因爲它是一個react組件，所以必須引入import React, { Component } from 'react';，這個App必須繼承這個React.Component纔可以生成這個組件。
以上。