Home Explore Help
Sign In
fgm
/
js_react__react-intro
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

First version from https://facebook.github.io/react/docs/getting-started.html

- but mostly from http://jslog.com/2014/10/02/react-with-webpack-part-1
Frederic G. MARAND 9 years ago
parent
468492dd38
commit
cdc96f9cde
7 changed files with 121 additions and 2 deletions
Unified View Show Diff Stats
  1. 33 0
      .eslintrc.js
  2. 2 0
      .gitignore
  3. 4 2
      README.md
  4. 22 0
      index.html
  5. 9 0
      main.js
  6. 27 0
      package.json
  7. 24 0
      webpack.config.js

+ 33 - 0
.eslintrc.js
View File 

@@ -0,0 +1,33 @@
 
+module.exports = {
 
+  'rules': {
 
+    'indent': [
 
+      2,
 
+      2
 
+    ],
 
+    'quotes': [
 
+      2,
 
+      'single'
 
+    ],
 
+    'linebreak-style': [
 
+      2,
 
+      'unix'
 
+    ],
 
+    'semi': [
 
+      2,
 
+      'always'
 
+    ]
 
+  },
 
+  'env': {
 
+    'es6': true,
 
+    'browser': true,
 
+    'node': true
 
+  },
 
+  'extends': 'eslint:recommended',
 
+  'ecmaFeatures': {
 
+    'jsx': true,
 
+    'experimentalObjectRestSpread': true
 
+  },
 
+  'plugins': [
 
+    'react'
 
+  ]
 
+};

+ 2 - 0
.gitignore
View File 

@@ -28,3 +28,5 @@ build/Release
 
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 
 node_modules
 
 node_modules
 
 
 
+# Webpack build results
 
+bundle.js

+ 4 - 2
README.md
View File 

@@ -1,3 +1,5 @@
 
-# react-intro
 
+# react-intro : Learning ReactJS
 
 
 
-Learning ReactJS
 
+## Parts taken from:
 
+
 
+- http://jslog.com/2014/10/02/react-with-webpack-part-1/

+ 22 - 0
index.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <title>Basic Property Grid</title>
 
+  <!-- include react -->
 
+  <script src="./node_modules/react/dist/react-with-addons.js"></script>
 
+  </head>
 
+
 
+<body>
 
+  <div id="content">
 
+    <!-- this is where the root react component will get rendered -->
 
+    </div>
 
+
 
+  <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
 
+  <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
 
+  <script src="http://vm:8090/webpack-dev-server.js"></script>
 
+
 
+  <!-- include the bundle that contains all our scripts, produced by webpack -->
 
+  <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
 
+  <script type="text/javascript" src="http://vm:8090/assets/bundle.js"></script>
 
+  </body>
 
+</html>

+ 9 - 0
main.js
View File 

@@ -0,0 +1,9 @@
 
+// https://facebook.github.io/react/docs/getting-started.html
 
+
 
+var React = require('react');
 
+var ReactDOM = require('react-dom');
 
+
 
+ReactDOM.render(
 
+    <h1>Hello, XMas world!</h1>,
 
+    document.getElementById('content')
 
+);

+ 27 - 0
package.json
View File 

@@ -0,0 +1,27 @@
 
+{
 
+  "name": "gettingstarted",
 
+  "version": "1.0.0",
 
+  "description": "",
 
+  "main": "main.jsx",
 
+  "dependencies": {
 
+    "babel-preset-react": "^6.3.13",
 
+    "babelify": "^7.2.0",
 
+    "eslint-plugin-react": "^3.13.0",
 
+    "react": "^0.14.3",
 
+    "react-dom": "^0.14.3"
 
+  },
 
+  "devDependencies": {
 
+    "http-server": "^0.8.5",
 
+    "jsx-loader": "^0.13.2",
 
+    "webpack": "^1.12.9",
 
+    "webpack-dev-server": "^1.14.0"
 
+  },
 
+  "author": "",
 
+  "license": "MIT",
 
+
 
+  "scripts": {
 
+    "start": "npm run serve | npm run dev",
 
+    "serve": "./node_modules/.bin/http-server -p 8080",
 
+    "dev": "webpack-dev-server --progress --colors --port 8090 --host vm"
 
+  }
 
+}

+ 24 - 0
webpack.config.js
View File 

@@ -0,0 +1,24 @@
 
+module.exports = {
 
+  entry: './main.js',
 
+  output: {
 
+    filename: 'bundle.js', // default, skippable
 
+    publicPath: 'http://localhost/assets'
 
+  },
 
+  module: {
 
+    loaders: [
 
+      {
 
+        // Tell webpack to use jsx-loader for all *.js/*.jsx files
 
+        test: /\.jsx?$/,
 
+        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
 
+      }
 
+    ]
 
+  },
 
+  externals: {
 
+    // Don't bundle the "react" npm package with our bundle.js,
 
+    // but get it from a global React variable.
 
+    react: 'React'
 
+  },
 
+  resolve: {
 
+    extensions: ['', '.js', '.jsx']
 
+  }
 
+};