react入門_ZenDei技術網路在線

由於最近沒有什麼項目可做，所以學習了react框架，這裡只是作為自己的筆記作為以後參考，如果要學習還是去官網去學習比較好一些。首先ES6肯定是要有一定的使用基礎的，現在大多都是基於es6來開發。 babel 由於現在ES6對瀏覽器的支持還不是那麼好，所以babel就應運而生了，它的主要作用就是把E ...

　　由於最近沒有什麼項目可做，所以學習了react框架，這裡只是作為自己的筆記作為以後參考，如果要學習還是去官網去學習比較好一些。

　　首先ES6肯定是要有一定的使用基礎的，現在大多都是基於es6來開發。

　　babel

　　由於現在ES6對瀏覽器的支持還不是那麼好，所以babel就應運而生了，它的主要作用就是把ES6的代碼轉換成我們之前沒有ES6時的代碼，否則有好一些瀏覽器是不認識ES6的語法的。

　　初期學習的話還是不要依賴於react的腳手架進行學習吧，就在之前html頁面中引入js文件就可以了。

　　安裝nodejs並下載三個文件

　　我在這裡就假裝你有node的一些基礎了，現在一個前端應該都對node有一定了瞭解了，如果你還不瞭解，抓緊時機學習一下哦，現在前端的好多構建工具什麼的都是基於node npm 來搭建了，

　　安裝上node的時候會自動連帶著npm會一起下載下來，如果知道如何下載，點擊這裡去看下載教程

　　下載三個npm包

　　babel-standalone react react-dom

　　直接在你要工作的文件夾目錄中打開命令行，使用 npm i -S bebel-standalone react react-dom 進行下載，我們需要的是這三個包裡面的三個js文件。

　　bebel-standalone 由於react使用的是 jsx語法，所以我們需要這個bebel來把這jsx語法轉換成瀏覽器可以識別的代碼。

　　還有一個是react，一個是react-dom，其中react是react的核心代碼。react的核心思想是虛擬Dom，其實虛擬Dom改變沒有那麼複雜，簡單而言就是一個js的對象來表達一個dom包含的東西。包react-dom的核心功能就是把這些虛擬Dom渲染到文檔中變成實際dom，當然了除了渲染這個功能之外還有一些其他的方法，這裡就不多說了。

　　引入js文件

　　三個js文件的位置都在剛纔下載下來的node_modules裡面，具體位置如下，引入到頁面中

1   <script src="./node_modules/babel-standalone/babel.js"> </script>
2   <script src="./node_modules/react/umd/react.development.js"></script>
3   <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

　　搞完上面的那些之後就可以正式開始了。

1.ES6代碼轉為ES5

 1 <script src="../node_modules/babel-standalone/babel.js"></script>
 2 // 引入上面那個文件之後 就會有一個 Babel的全局變數
 3 <script>
 4 
 5     const str = `
 6     const obj = {
 7       a: 1,
 8       b: 2
 9     };
10 
11     const {a, b} = obj;
12     `;
13 
14     let c = Babel.transform(str, {presets:['es2015']});
15     console.log(c);
16     console.log(c.code);  // 這裡可以列印出來上面es6代碼轉換為es5的代碼樣子 如下圖
17 
18 </script>

2. 基本jsx語法

　　所有的前提都是基於引入上面那三個js文件而來的，這裡就不多寫了

 1 <div id="app"></div>
 2 
 3 <script type="text/babel">  // 註意這裡的type的格式，引入那個babel文件之後 這裡寫這個格式瀏覽器就會識別
 4   console.log(ReactDOM);
 5 
 6   // 利用babel把h1標簽渲染到#app裡面
 7   ReactDOM.render(
 8     <h1>hello world</h1>,
 9     document.querySelector('#app')
10   );
11  </script>

此時打開瀏覽器就可以看到頁面中#app那個div裡面會有h1的標簽，再看下麵一個例子

 1 <script type="text/babel">
 2 
 3     const element = <div>
 4         111
 5         <h2>這裡是h2</h2>
 6     </div>;
 7     
 8 
 9     ReactDOM.render(
10       element,
11       document.getElementById('app')
12     )
13 </script>

　　可以打開瀏覽器再來瀏覽一下，你根據頁面中的dom結構，和這個比對一下發現這段html代碼居然就被插入到頁面中了，你可能沒有發現你居然在js代碼中寫了html代碼，而且你沒有用引號引起來，厲害。

　　其實這種寫法就是jsx語法，就是在js中寫html或者說是xml就是jsx語法，因為經過了bebel編譯所以是沒有問題的不會報錯的。

　　註意： 這個裡面的標簽是必須需要閉合的

　3. 註釋的寫法

我們一般都會用 （）把我們要寫的html代碼包裹起來 換行重新寫，這樣結構清晰一些， 這裡面的html代碼只能有一個根節點 
在html代碼包裹的地方你想要寫js代碼 就只能使用 {} 包裹起來寫了，寫到他們中間了。
只要記住 一旦你想要在html包裹的地方寫js代碼 就要寫到 {} 中間 ， 在 {} 中間可以隨意的寫js代碼

　
1 const element = (
 2     <div>
 3         {
 4             只要進入了標簽結構，除了在{}之中，就不能寫js代碼了
 5             以下三種註釋都不成立
 6             // 
 7             /**/
 8             <!---->  // 這種會報錯
 9         }
10     </div>
11 )

 1 const element = (
 2     // 註釋呢  這裡沒有進入標簽結構 算是js代碼的註釋
 3     <div>
 4     {
 5         // 這樣寫註釋
 6         /*
 7                     *   這樣寫都是可以的
 8                     *
 9                     * */
10     }
11     { /*第二句註釋*/ }
12     <h1>這裡的h1標簽</h1>
13     </div>
14 );
15 ReactDOM.render(
16     // 這裡是註釋嗎
17     element,
18     document.querySelector('#app')
19 );
20 
21 element 的內容還可以是一個函數的返回值
比如 這樣  return (
　　<div>
　　　　<p>這個樣子的</p>
　　</div>
)

4. 插值

　　如何把js中的數據插入到自己寫的 html代碼裡面呢，也是使用 {}的樣子，就直接寫js代碼就好了

 1 let data = {
 2   name: '狗蛋'
 3 };
 4 const element = (
 5   <div>
 6     {
 7       <p>
 8         {data.name}
 9       </p>
10     }
11   </div>
12 );
13 ReactDOM.render(
14   element,
15   document.querySelector('#app')
16 );

那裡面還可以寫一些函數，可以渲染數組之類的東西，也可以是一個函數的返回值，看下麵的代碼

 1 let arr = [
 2   'name', 'age', 'sex'
 3 ];
 4 
 5 function fn() {
 6   return (
 7     <div>
 8       代碼
 9     </div>
10   )
11 }
12 
13 const element = (
14   <div>
15     <div>
16       {
17         <ul>
18           {
19             arr.map((item, index) => {
20               return (
21                 <li key={index}>{item}</li>
22               )
23             })
24           }
25         </ul>
26       }
27     </div>
28     <div>
29       {
30         fn()
31       }
32     </div>
33   </div>
34 );
35 ReactDOM.render(
36   element,
37   document.querySelector('#app')
38 );

5. 節點屬性

看下麵的代碼你寫上去，去瀏覽器中查看一下

1 const element = (
2   <div>
3     <input type='text' value="input的value值" />
4   </div>
5 );
6 ReactDOM.render(
7   element,
8   document.querySelector('#app')
9 );

會發現這樣的錯誤

意思是讓你把value改為 defaultValue，類似的錯誤還有一些其他的標簽，當你用錯的時候，看一下這個報錯應該可以改為正確的，如果改不正確可以百度查一下

class -> className

單標簽一定要閉合
value -> defaultValue
checked -> defaultChecked

6. 列表渲染

 1 // 數據可以是數字 字元串 標簽（不要加引號 加了引號就是字元串）
 2 // 要綁定key key是唯一標識 可以提升代碼性能 diff演算法
 3 
 4 const arr = [
 5   1,2,3
 6 ];
 7 const arr1 = [
 8   'a', 'b', 'c'
 9 ];
10 const arr2 = [
11   <li key={'這裡的1'}>這裡的li</li>,
12   <li key="2">這裡的li2</li>,
13   <li key="3">這裡的li3</li>
14 ];
15 const arr4 = [
16   {name: '狗蛋1', age: 12},
17   {name: '狗蛋2', age: 13},
18   {name: '狗蛋3',age: 14},
19 ];
20 const element = (
21   <div>{arr}</div>
22 );
23 
24 const element2 = (function () {
25   let elementStr = [];
26   arr4.forEach((item,index) => {
27     elementStr.push(<li key={index}>{item.name} {item.age} </li>);
28   });
29   return elementStr;
30 })();

可以把上面的代碼插入到頁面中試一試， arr4的話，是需要自己把結構拆分出來的， {} 會自動把數組一個一個的渲染出來

7. 事件處理

只是事件是需要駝峰來命名了，它的好多東西和vue非常非常像

 1 function fn(){
 2     console.log('fn事件')
 3 }
 4 const element = (
 5     <div>
 6     {
 7         // onClick 事件駝峰命名
 8         // 事件綁定 都會給事件一個處理函數
 9     }
10     <input type="button" value={'事件函數調用'} onClick={fn} />
11     <input type="button" value={'行內事件'} onClick={function () {
12     alert(1);
13     console.log('我這裡寫了一個函數');
14     }} />
15     <input type="button" value={'es6語法'} onClick={() => alert('es6的語法')} />
16     <input type="button" value="行間樣式" onClick={alert('11')} />
17 </div>
18 );

　　如果你看了我的文章有了一些收穫我會非常高興的，由於能力有限，文章有的部分解釋的不到位，希望在以後的日子里能慢慢提高自己能力，如果不足之處，還望指正。