my react hello world

simonqian · simonqian · commit f26f252568e9 · 2016-06-08T00:12:08.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/App.jsx b/App.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>simon, helloworld!!!</div>
+    );
+  }
+}
+
+export default App;
diff --git a/README.md b/README.md
@@ -0,0 +1,106 @@
+# react.js hello world
+---
+first, you should install node and npm.
+
+1. create directory  
+    `mkdir helloworld && cd helloworld`
+
+2. init npm  
+    `npm init`
+
+3. install webpack and webpack-dev-server  
+    `npm install webpack webpack-dev-server --save`
+
+4. install react and react-dom  
+    `npm install react react-dom --save`
+
+5. install babel etc.  
+    `npm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save`
+
+6. add start scripts to package.json
+```javascript
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "start": "webpack-dev-server --hot"
+    }
+```
+
+7. touch webpack.config.js
+```javascript
+    var config = {
+      entry: './main.js',
+
+      output: {
+        path: './',
+        filename: 'index.js'
+      },
+
+      devServer: {
+        inline: true,
+        port: 7777
+      },
+
+      module: {
+        loaders: [
+          {
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            loader: 'babel',
+            query: {
+              presets: ['es2015', 'react']
+            }
+          }
+        ]
+      }
+    }
+
+    module.exports = config;
+```
+
+8. touch index.html
+```html
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <title>react helloworld</title>
+      </head>
+      <body>
+        <div id="app"></div>
+        <script src="index.js" charset="utf-8"></script>
+      </body>
+    </html>
+```
+
+9. touch App.jsx
+```javascript
+    import React from 'react';
+
+    class App extends React.Component {
+      render() {
+        return (
+          <div>simon, helloworld!!!</div>
+        );
+      }
+    }
+
+    export default App;
+```
+
+10. touch main.js
+```javascript
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+
+    import App from './App.jsx';
+
+    ReactDOM.render(<App />, document.getElementById('app'));
+```
+
+11. start server  
+    `npm start`
+
+12. open browser: http://localhost:7777
+
+---
+if you clone this repository to local, just `npm install` and `npm start`.
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>react helloworld</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="index.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.jsx';
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "helloworld",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --hot"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-core": "^6.9.1",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,32 @@
+var config = {
+  // 打包的入口文件
+  entry: './main.js',
+
+  // 配置打包结果，path定义输出文件夹，filename定义打包结果文件的名称
+  output: {
+    path: './',
+    filename: 'index.js'
+  },
+
+  // 设置服务器端口号
+  devServer: {
+    inline: true,
+    port: 7777
+  },
+
+  // 配置模块的处理逻辑，用loaders定义加载器
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel',
+        query: {
+          presets: ['es2015', 'react']
+        }
+      }
+    ]
+  }
+}
+
+module.exports = config;
