React學習筆記-1-什麼是react，react環境搭建以及第一個react實例

時間 2019-11-09

原文原文鏈接

什麼是react？
react的官方網站：https://facebook.github.io/react/
下圖這個就是就是react的標誌，很是巧合的是他和咱們的github的編輯器Atom很是類似。react是Facebook官方推出的一個javascript的庫，如今已經有了很是多的庫和框架Facebook爲何還要開發一款新的框架呢？緣由就是 Facebook遇到了一些新的問題。Facebook須要解決的問題是構建數據不斷變化的大型應用。大型應用是什麼意思？數據不斷變化帶來什麼問題呢？
數據變化能夠致使兩個很是嚴重的問題，第一個問題是大量的dom操做;第二個問題就是邏輯會變得很是的複雜。數據要經過頁面來進行展現，數據不斷變化，就會致使dom不斷變化，從而須要進行大量的dom操做，儘管咱們已經了jQuery等操做dom的利器，但咱們仍然須要編寫許多手動的dom操做代碼。數據和邏輯密切相關，數據變化的時候，邏輯也會發生變化，相信你們都會有這樣的經歷，當你去修改一個已有項目的時候，改動一個地方的代碼，每每會產生許多意料以外的後果，這就是由於數據和邏輯之間的關係很是複雜，牽一髮而動全身，因此數據變化會致使這樣兩種後果。
那react如何來解決這兩個問題呢？對於dom操做，react的操做是採用自動dom操做，在react中，你不須要手動進行dom操做，只須要告訴react要展現什麼內容，react會自動來操做dom。針對第二個問題，react的方案吧狀態和內容顯示的對應起來，這樣咱們就能夠一目瞭然的知道，狀態變化，內容會如何變化，從而理清程序的邏輯。
react有兩個特色：第一個是簡單，第二個是聲明式。簡單有兩層意思，第一層意思是react學習簡單，上手容易，第二層意思是是react寫出的代碼很是簡單，容易閱讀。聲明式就是咱們前面說的自動dom操做，你只須要聲明給react顯示什麼內容，至於如何把這些內容顯示到頁面上，是由react來幫你完成的。
在react中，核心是組件，組件的設計目的是提升代碼的複用率，下降測試難度和代碼複雜度。
組件提升代碼複用率：組件將數據和邏輯封裝，相似面向對象中的類。咱們能夠將通用的邏輯和數據封裝起來，從而能提升代碼的複用率。
下降測試難度：組件高內聚，低耦合，很贊成對單個組件進行測試，經過模擬他的輸入，或者輸出，來測試組件的功能是否完善。
下降代碼複雜度：直觀的語法能夠極大地提升可讀性，下降代碼的複雜度和維護難度。
react的發展過程
2013年6月，Facebook官方發佈react--------》2013年9月，react熱度上漲，愈來愈多的人開始關注react-------》2015年3月，React Native發佈（就是用react來編寫跨平臺的移動端應用），簡單說就是咱們能夠用react來編寫iOS，Android和Windows phone的應用，在目前的前端領域，代碼模塊化和用js來編寫跨平臺的移動端應用，是兩個主要的探索方向，在用js來編寫跨平臺的移動端應用中，已經有了不少的方案，可是這些方案或多或少都有一些缺陷.
react的現狀
react是發佈在github上面的開源項目。
國外使用的公司：Facebook，Flipboard，Airbnb，BBC，Github，Instagram,Reddit,Uber,WhatApp,yahoo
國內使用React的公司：支付寶，淘寶，大搜車，Teambition,豆瓣，豌豆莢
這個教程使用的是0.13.2,咱們是學習，就不下載了，直接使用cdn服務器：http://www.bootcdn.cn/
咱們須要兩個文件
react.js://cdn.bootcss.com/react/0.13.2/react.js
JSXTransformer.js://cdn.bootcss.com/react/0.13.2/JSXTransformer.js
使用的時候，記得在前面加上http://
可能這麼說有點迷瞪，接着看下面的就懂了。

react的程序結構
react程序本質上就是一個html頁面，html頁面中能夠編寫Js代碼和css代碼，固然咱們也能夠將js和css單獨存放，最後在引入到html文件中。
這裏須要注意的是，react程序很是特別的一點，就是使用了jsx，咱們後面會詳細說明jsx的用法，這裏只要知道jsx是寫在js裏面的就行，下面咱們放代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
       var HelloWorld=React.createClass({
           render:function(){
              return <p>Hello,world</p>
           }
       });
       React.render(<HelloWorld></HelloWorld>,document.body);
    </script>
</body>
</html>