有一點前端的知識女责，React.js零基礎(chǔ)，簡單記錄一下學(xué)習(xí)的過程创译。
React.js
這是個前端框架抵知？
只用過 jQuery，在查 React.js 的資料過程中软族，感受到了前端對還在使用 jQuery 做開發(fā)的程序員深深的怨念……希望學(xué)完 React.js 能理解吧~
React.js刷喜，現(xiàn)在就當它是一個做頁面的庫吧，剛開始接觸覺得寫法相當奇怪立砸，然后用著用著就覺得掖疮，哎設(shè)計者 你他娘的 還真是個天才。
組件 Component
比如說颗祝，我自己寫了這么一個玩意浊闪，計數(shù)器。
某天發(fā)現(xiàn)可以用在購物車的界面里螺戳，然后搁宾，我就需要把 HTML 標簽，和對應(yīng)的 js 事件全都拷貝過去倔幼，找起來可能很麻煩盖腿。后端表示，能直接把這玩意當個類（組件）使用损同，用的時候
new 一個翩腐，豈不美滋滋。React.js 表示膏燃，我 這個計數(shù)器，就可以當做一個組件蹄梢。然后覺得疙筹，在
React.js 眼里富俄，Web頁面就是組件套組件，這樣開發(fā)起來不會特別零碎么而咆，雖然 HTML 也是這樣霍比，那個寫法好歹有全局感…… 算了算了，先學(xué)先學(xué)暴备。
create-react-app
我要學(xué)React.js 啊悠瞬，這是個什么玩意？
前端的發(fā)展真快涯捻，我已經(jīng)不太懂這幫人在干嘛了浅妆。我曾天真的以為，現(xiàn)在還是在用 <script> 標簽引入一個或許叫 react.js 的文件障癌，就可以做 react 開發(fā)的時代凌外。然而，React.js 是要配置“全家桶”的涛浙，能不能不管這個康辑，配起來好麻煩，讓我直接用唄轿亮，這就是create-react-app的作用疮薇，傳說中的“腳手架”。
React.js 是Facebook的我注，create-react-app 也是按咒，使用之前裝好node.js 和 npm （https://nodejs.org/en/ ），windows 下安裝包中自帶 npm（npm 5.2.0 之后又有了npx但骨，活到老學(xué)到老励七，微笑臉）。
node.js 中新建一個名稱為 hello-react 的 React.js 項目的操作如下：
npx create-react-app hello-react
cd hello-react
npm start
詳見 https://github.com/facebook/create-react-app
P.S. create-react-app安裝過程可能極其糟心嗽冒，很慢很慢，可以改一下npm的源：
npm config set registry https://registry.npm.taobao.org
Demo
可以看到 public/ 中有一個 index.html 文件，上面的歡迎頁面就是它沒錯了箫锤，然而贬蛙，你會發(fā)現(xiàn) index.html 的<body> 其中只有一個 id 為 root 的 <div>。
<div id="root"></div>
頁面上的東西谚攒，都是組件阳准，他們定義在 src/ 中，我們盡肯能去掉復(fù)雜的東西馏臭，把 index.js 直接改為下面這樣野蝇，直觀的感受一下：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class HelloReact extends Component{
render(){
return(
<div>hello</div>
)
}
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));
不出所料的話，頁面自動刷新并且只顯示了 hello。
簡答梳理一下代碼绕沈，主要做了3件事锐想。
- 我們引入了三個類：
React：只要使用JSX語法，就必須引入乍狐。
React.Component：就是我們之前說的組件沒錯了赠摇。{ Component }這樣引入，可以直接在代碼中使用Component浅蚪， 而不用React.Component藕帜。
ReactDOM：用來渲染組件 - 定義了一個類
HelloReact：
也就是 組件，繼承自Component惜傲，有一個必須要實現(xiàn)的方法render()洽故，直接返回了一段 html ……這個語法，就是JSX操漠。而這段 html 就是頁面內(nèi)容沒錯了收津。 - 調(diào)用了
ReactDOM類的render方法：
把上面定義的組件<HelloReact />渲染 到 root 上。
JSX
看起來我們的主要工作就是寫組件類浊伙，在里面定義好頁面撞秋，當然還有事件什么的。在這之前嚣鄙，很在意的一點就是吻贿，這個直接在 js 里寫 html 的語法問題，比如我們在 render 方法中寫了這么一段哑子。
<div className = "title">
<span>hello</span>
</div>
emmm... 你會發(fā)現(xiàn)舅列，html 中的信息也可以用 js 寫出來，只不過不直觀就是了
{
tag : div,
attrs : { className : 'titile' },
children : [
{
tag : span,
attrs : null,
children : [ 'hello' ]
}
]
}
所以 React.js 中就支持了 html 標簽的寫法卧蜓，然后把 JSX 轉(zhuǎn)為 js 對象帐要，再到DOM， 最后渲染到頁面弥奸，這樣開發(fā)起來就省事多了榨惠。
可以看到上面寫的是 className 并不是 html 中的 class，可以看到之前定義類的時候已經(jīng)使用了js中一直保留的關(guān)鍵字 class盛霎，所以在 JSX 中使用 了className 代替赠橙，其他的關(guān)鍵字以后碰到再說。
BTW愤炸，可以使用
npm run eject
打開詳細的配置文件（操作不可逆）期揪，如果沒有編輯配置文件的需求，可以不eject规个。
今天就到這里了凤薛。
