ReactJS 開壇筆記

下面是 ReactJS 開壇的筆記。適用版本React 15.4.2。

無痛開壇法
部份library可能先要用下邊「人肉開壇法」的command line安裝。

用Git tool,從github.com把預先煮好的React壇用npm安裝。

連結:
facebookincubator/create-react-app


人肉開壇法

假設已經安裝了NodeJS和NPM

npm install -g babel
npm install -g babel-cli

把cmd移到去該應用的目錄中,假設你的應用名字是「My App」,slug是「my-app」

mkdir my-app
cd my-app
npm init

然後安裝webpack

npm install webpack --save
npm install webpack-dev-server --save

和React

npm install react --save
npm install react-dom --save
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

安裝完成後,製作基本設定檔

touch index.html
touch App.jsx
touch main.js
touch webpack.config.js

和設定Compiler, Server與Loaders

[webpack.config.js],”devServer”的port可按需自設。

var config = {
   entry: './main.js',
	
   output: {
      path: __dirname + '/dist/js',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
				
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

打開package.json,刪去”script”內

"test" "echo \"Error: no test specified\" && exit 1"

然後新增 “start”

"start": "webpack-dev-server --hot"

“–hot”參數即代表實現重刷。

編輯HTML,打開index.html

<div id="app"></div>
<script src = "index.js"></script>

編輯第一個JSX,打開App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
Hello, World!!!

); } } export default App;

編輯第一個JS,打開main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

完成後即可啟動內建的server。

npm start

然後到dev server預覽,如無意外可以顯示 Hello, World!!!

localhost:8080

來源:
https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm

About Author: