以下是乙個最簡單的 demo，將乙個最簡單的元件渲染到頁面上。
import react from 'react'
import from 'react-dom'
// 定義元件
class hello extends react.component
}// 渲染元件到頁面
render(, document.getelementbyid('root'))
這裡的`'react'`對應的就是`./package.json`檔案中`dependencies`中的`'react'`，即在
該目錄下用`npm install`安裝的 react 。npm 安裝的 react 的物理檔案是存放在
`./node_modules/react`中的，因此引用的東西肯定就在這個資料夾裡面。
開啟`./node_modules/react/package.json`找到`"main": "react.js",`，這裡的`main`即
指定了入口檔案，即`./node_modules/react/react.js`這個檔案。那麼，問題的答案自然
就出來了。
jsx 中不能一次性返回零散的多個節點，如果有多個請包涵在乙個節點中。例如，
return (
段落1段落2段落3
)```
再例如：
```jsx
// 中返回的兩個 也要用 包裹
return (
段落1)
```### 注釋
jsx 中用``的注釋形式
```jsx
return (
// jsx 外面的注釋
hello world
)
`，注意這裡是`classname`，而 html 中是`class`
內聯樣式：`hello world
`，注意這裡的`}`，還有`fontsize`的駝峰式寫法
拿 click 事件為例，要在標籤上繫結 click 事件，可以這樣寫
class hello extends react.component
clickhandler(e)
}
在 jsx 中使用迴圈，一般會用到`array.prototype.map`（來自 es5 標準）
class hello extends react.component
})})
}}
的`{}`可放乙個可執行的 js 程式或者變數
jsx 中使用判斷一般會用到三元表示式（表示式也是放在`{}`中的），例如：
return (
段落1)
hello world
之前的 demo **都是在乙個檔案中，實際開發中不可能是這樣子的，因此這裡就先把元件
的**給拆分開。我們將使用 es6 的模組管理規範。
### page 層
```jsx
import react from 'react'
class hello extends react.component
}export default hello
``````jsx
import hello from './containers/hello'
render(, document.getelementbyid('root'))
```注意，**`import hello from './containers/hello';`這裡可以寫
成`./containers/hello/index.jsx`也可以寫成`./containers/hello/index`
### subpage 層
如果`hello`元件再稍微複雜一點，那麼把**都放一塊也會變得複雜，接下來我們再拆分
。`recommend.jsx` `list.jsx`，分別寫入相應的**（看**檔案即可），然
```jsx
import carousel from './subpage/carousel'
import recommend from './subpage/recommend'
import list from './subpage/list'
class hello extends react.component
}```
注意，這裡`import`時`.jsx`字尾省略了。
### props
接著剛才 header 的話題往下說，每個頁面都會使用 header ，但是 header 上顯示的標題
每個頁面肯定是不一樣的。我們需要這樣解決：頁面中引用 header 時，這樣寫 `title="hello 頁面 "/>`，即給 header 元件設定乙個 title 屬性。而在 header 元件中
可以這樣取到
render()
)}
式，子元件取得 props 中的值即可完成資料傳遞。被傳遞資料的格式可以是任何 js 可識
別的資料結構，上面 demo 是乙個字串。**react 中，props 一般只作為父元件給子元件
傳遞資料用，不要試圖去修改自己的 props ，除非你想自找麻煩**
上面提到了 props 不能被自身修改，如果元件內部自身的屬性發生變化，該怎麼辦？——
react 為我們提供給了 `state`，先看乙個 demo：
class hello extends react.component
} render()
)}}
會立刻更新元件，將結果重新渲染到頁面上**，下面 demo 演示了`state`的變化
，`props`也是一樣的
class hello extends react.component
} render()
)} clickhandler() )
}}
這是用 react 做系統設計時的兩個非常重要的概念。雖然在 react 中，所有的單位都叫做
「 元件 」，但是通過以上例子，我們還是將它們分別放在
* **智慧型元件** 在日常開發中，我們也簡稱**「 頁面 」**。為何說它 「 智慧型 」，因為它只
會做一些很聰明的事兒，髒活累活都不幹。它只對資料負責，只需要獲取了資料、定義好
資料操作的相關函式，然後將這些資料、函式直接傳遞給具體實現的元件即可。
* **木偶元件** 這裡 「 木偶 」 一詞用的特別形象，它總是被人拿線牽著。它從智慧型元件
（或頁面）那裡接受到資料、函式，然後就開始做一些展示工作，它的工作就是把拿到的
資料展示給使用者，函式操作開放給使用者。至於資料內容是什麼，函式操作是什麼，它不關
心。以上兩個如果不是理解的很深刻，待把課程學完再回頭看一下這兩句話，相信會理解的。
React 高階元件入門介紹
高階元件的定義 hoc 不屬於 react 的 api，它是一種實現模式，本質上是乙個函式，接受乙個或多個 react 元件作為引數，返回乙個全新的 react 元件，而不是改造現有的元件，這樣的元件被稱為高階元件。開發過程中，有的功能需要在多個元件類復用時，這時可以建立乙個 hoc。基本用法 包裹...
EVE NG簡單入門介紹
此篇文章簡單的介紹下模擬器eve ng的使用，具體包括dynamips裝置匯入與執行，iol裝置的匯入與執行，qemu裝置的匯入與執行，客戶端軟體的安裝，物理網路與虛擬網路的結合等。由於eve ng是基於linux的ubuntu系統實現的，所以了解linux基礎知識與命令十分重要，在此推薦 linu...
EVE NG簡單入門介紹
此篇文章簡單的介紹下模擬器eve ng的使用，具體包括dynamips裝置匯入與執行，iol裝置的匯入與執行，qemu裝置的匯入與執行，客戶端軟體的安裝，物理網路與虛擬網路的結合等。由於eve ng是基於linux的ubuntu系統實現的，所以了解linux基礎知識與命令十分重要，在此推薦 linu...