React 新手入門筆記（四） – React Component

• React Component 設計思維
• 建立第一個 React Component

前面教了一些關於 Webpack 設定，以下給各位看一下 webpack.config.js 的範例：

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        root: __dirname,
        alias: {
            Main: 'app/components/Main.jsx'
            //只要寫 var Main = require("Main"); 即可匯入該檔案
        },
        extensions: ['', '.js', '.jsx']
        //會嘗試與哪些副檔名的檔案互動，如果要載入CoffeeScript，則加入['.coffee']
    },
    module: {
        loaders: [ // 用哪些loader來轉譯
            {
                loader: 'babel-loader', // 翻譯機
                query: { //用哪些解決方案
                    presets: ['react', 'es2015']
                },
                test: /\.jsx?$/,  // 哪些副檔名的檔案要用這個翻譯機
                exclude: /(node_modules|bower_components)/ //去除哪些檔案不要翻譯
            }
        ]
    }
};

上面是我自己之前練習的設定檔，各位可以嘗試自己設定看看，如果有問題也歡迎回覆，我會知無不言、言無不盡地協助回答的，接下來就專注在建立我們的第一個 React Component 吧！

React Component 設計思維

這邊先跟各位說個觀念，在設計 React App 時要用 Component 組件為思考觀點，這是什麼意思呢？我們來看看下圖：（來源：用 React 思維設計應用程式）


這是一個 Todo List App ，我們如果要用 React 來開發，我們就要把這個 App 分解成各種不同的元件，例如以下：


TodoApp 和 TodoList 是 Container Component ，除了 Render 其他子元件和管理其中的溝通外，不會 Render 出其他東西。

其他在 TodoApp 內的子元件，則是 Presentation component ，只負責根據父元件給的參數， Render 出我們所想要的東西。

建立第一個 React Component

在我們的 Entry 資料夾建立一個 Greeter.jsx 檔案，並且使用以下程式碼定義我們第一個元件

var Greeter = React.createClass({
    //option object
});

這時， Greeter 就是我們的第一個元件，我們要開始在裡面放入我們要執行的各種功能。

元件內最重要的就是 Render Function ，這個 Function 負責顯示最後結果在瀏覽器上

var Greeter = React.createClass({
    render: function(){
        return (  // 回傳要顯示的東西，且只能有一個"根元素"
            <div>
                <h1>Hello Johlmike!</h1>
                <p>It is good to meet you!</p>
            </div>
        );
    }
});

這邊要注意的是，只能有一個"根元素"，也就是說以下的程式碼是錯誤的：

var Greeter = React.createClass({
    render: function(){
        return (  // 回傳了兩個根元素 ("<div>")
            <div>
                <h1>Hello Johlmike!</h1>
                <p>It is good to meet you!</p>
            </div>
            <div>
                <h2>It is wrong.</h2>
            </div>
        );
    }
});

最後，我們用 ReactDOM.render() 來將我們的第一個 Greeter 元件顯示在溜覽器上吧！

ReactDOM.render(
    <Greeter />,
    document.getElementById('app')
);