freelance
React
既存のアプリにReactを追加してみた【npm・babelとwebpackの利用】
はじめに 「Reactとは何か?」ーそれに対する答えは色々なものが考えられます。しかし、簡単で明確な答えはReactの公式サイトに掲示されています。Reactは「A javascript library for building user interface」です。日本語にすれば、「ユーザインターフェスを構築するためのJavascriptライブラリの1つ」ということです。 今回は既存のアプリにnpmとbabelとwebpackを利用してReactを追加、「Hello world」を出力しましょう! テクフリでフリーランス案件を探してみる npmのインストール 1. Nodeのサイトからダウンロードして、インストールします。 2. Homebrew: 他の方法はHomebrewを使うことです。ターミナルを開いて下記を入力してください。 Homebrewのインストール: $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" Nodeとnpmのインストール: $ brew install node 念のため、nodeとnpmのバージョンをチェックしましょう。 $ node -v v6.11.3 $ npm -v 3.10.10 babelのインストール まず、アプリのディレクトリにpackage.jsonファイルを作りましょう。 $ cd your/application/path $ npm init -y package.jsonファイルの内容は自分のアプリと適当に入力してください。これは例です。 { "name": "アプリの名前", "version": "1.0.0", "description": “アプリの説明", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } あと、 babel-clibabel-preset-env (ES2015サポート)babel-preset-react (JSXサポート)babel-loader (webpackのbabelにサポートする loader モジュール) をインストールしておきます。 $ npm install --save-dev babel-cli babel-preset-env babel-preset-react babel-loader webpackのインストール $ npm install --save-dev webpack ReactとReact-domのインストール $ npm install --save-dev react react-dom package.jsonファイルはこいう感じになります。 { ... "devDependencies": { "babel-cli": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "react": "^15.6.1", "react-dom": "^15.6.1", "webpack": "^3.5.6" }, ... } Hello Worldの出力 ではここから、Reactで「Hello world」をブラウザに出力してみましょう! まず、リポジトリを見てみましょう。 |__ app | |__ javascripts | | |__ bundle | | |__ index.js | | | |__ views | |__ index.html | |__ node_modules |__ package.json |__ webpack.config.js ##webpackの設定 ルートパスでwebpack.config.jsファイルを作りましょう。 constpath=require('path'); module.exports={ entry: { // インプットファイル index:'./app/javascripts/index.js' }, output: { filename:'[name].bundle.js', // アウトプットファイル名 // アウトプットファイルパス。後でHTMLファイルでインクルードします。 path:path.resolve(__dirname,'app/javascripts/bundle') }, module: { loaders: [ { loader:"babel-loader", // アプリのjavascriptsのパスを指定し、 // 指定したパスでのファイルだけトランスパイルさせます。 include: [ path.resolve(__dirname,"app/javascripts"), ], exclude: [ path.resolve(__dirname,"node_modules"), ], // `.js` と `.jsx` というファイルのエクステンションを指定します。 test:/\.jsx?$/, // babelと一緒に使うES2015とReactの指定 query: { presets: ['env','react'] } } ] } }; webpackをnpmのscriptで呼び出す設定 package.jsonファイルの変更 { ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpack-build": "webpack -p --config webpack.config.js", "webpack-watch": "webpack --watch --config webpack.config.js" }, ... } ここまでで、webpackの設定は終了です。 では、マークアップしましょう。 index.htmlの作成 以下のようなHTMLファイルを作成します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="root"></div> <scriptsrc="../javascripts/bundle/index.bundle.js")></script> </body> </html> index.js importReactfrom'react'; importReactDOMfrom'react-dom'; letstyles = { fontStyle:'oblique', fontFamily:'arial', color:'chocolate' } ReactDOM.render( <h2style={styles}> Hello world </h2>, document.getElementById('root') ); 「結果はどうでしょう?」と思いませんか。試しましょう! 1回 build する $ npm run webpack-build ファイルの変更があればbuildします。 $ npm run webpack-watch を行なって、Index.htmlをブラウザで開いてください。「Hello world」が表示されているはずです!! テクフリでフリーランス案件を探してみる