Home Explore Help
Register Sign In
fgm
/
js_react__github-battle
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

First React component: webpack and babel setup.

Frederic G. MARAND 8 years ago
commit
516838f403
7 changed files with 115 additions and 0 deletions
Split View Show Diff Stats
  1. 5 0
      .babelrc
  2. 3 0
      .gitignore
  3. 23 0
      README.md
  4. 13 0
      app/index.html
  5. 16 0
      app/index.js
  6. 27 0
      package.json
  7. 28 0
      webpack.config.js

+ 5 - 0
.babelrc
View File 

@@ -0,0 +1,5 @@
 
+{
 
+  "presets": [
 
+    "react"
 
+  ]
 
+}

+ 3 - 0
.gitignore
View File 

@@ -0,0 +1,3 @@
 
+/.idea/
 
+/dist/
 
+/node_modules/

+ 23 - 0
README.md
View File 

@@ -0,0 +1,23 @@
 
+# Notes sur [ReactJS Fundamentals]
 
+
 
+[ReactJS Fundamentals]: http://courses.reactjsprogram.com/courses/reactjsfundamentals
 
+
 
+## Setting up
 
+
 
+* react + react-dom : actual React packages
 
+* html-webpack-plugin: copy html to output
 
+* webpack + webpack-dev-server: webpack
 
+* babel-{core,loader}: babel core + plugin for webpack
 
+* babel-preset-react: JSX transpiler
 
+
 
+
 
+    npm install --save        \
 
+      react                   \
 
+      react-dom &&            \
 
+    npm install --save-dev    \
 
+      html-webpack-plugin     \
 
+      webpack                 \
 
+      webpack-dev-server      \
 
+      babel-{core,loader}     \
 
+      babel-preset-react
 
+

+ 13 - 0
app/index.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <title>Github battle</title>
 
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 
+  </head>
 
+
 
+  <body>
 
+    <div id="app"></div>
 
+
 
+  </body>
 
+</html>

+ 16 - 0
app/index.js
View File 

@@ -0,0 +1,16 @@
 
+let React = require("react");
 
+let ReactDOM = require("react-dom");
 
+
 
+let HelloWorld = React.createClass({
 
+  render: function () {
 
+    return (
 
+      <div>Hello, world!</div>
 
+    );
 
+  }
 
+});
 
+
 
+ReactDOM.render(
 
+  <HelloWorld />,
 
+  document.getElementById("app")
 
+);
 
+

+ 27 - 0
package.json
View File 

@@ -0,0 +1,27 @@
 
+{
 
+  "name": "github-battle",
 
+  "version": "1.0.0",
 
+  "description": "http://courses.reactjsprogram.com/courses/reactjsfundamentals",
 
+  "main": "index.js",
 
+  "scripts": {
 
+    "production": "webpack -p",
 
+    "start": "webpack-dev-server",
 
+    "babel": "babel app -d dist"
 
+  },
 
+  "author": "Tyler McGinnis <tylermcginnis33@gmail.com> (http://ylermcginnis.com)",
 
+  "license": "ISC",
 
+  "dependencies": {
 
+    "react": "^0.14.7",
 
+    "react-dom": "^0.14.7"
 
+  },
 
+  "devDependencies": {
 
+    "babel-cli": "^6.6.5",
 
+    "babel-core": "^6.7.4",
 
+    "babel-loader": "^6.2.4",
 
+    "babel-preset-es2015": "^6.6.0",
 
+    "babel-preset-react": "^6.5.0",
 
+    "html-webpack-plugin": "^2.14.0",
 
+    "webpack": "^1.12.14",
 
+    "webpack-dev-server": "^1.14.1"
 
+  }
 
+}

+ 28 - 0
webpack.config.js
View File 

@@ -0,0 +1,28 @@
 
+let HtmlWebpackPlugin = require("html-webpack-plugin");
 
+let HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
 
+  template: __dirname + "/app/index.html",
 
+  filename: "index.html",
 
+  inject: "body"
 
+});
 
+
 
+module.exports = {
 
+  entry: [
 
+    "./app/index.js"
 
+  ],
 
+  output: {
 
+    path: __dirname + "/dist",
 
+    filename: "index_bundle.js"
 
+  },
 
+  module: {
 
+    loaders: [
 
+      {
 
+        test: /\.js$/,
 
+        exclude: /node_modules/,
 
+        loader: "babel-loader"
 
+      }
 
+    ]
 
+  },
 
+  plugins: [
 
+    HtmlWebpackPluginConfig
 
+  ]
 
+};