Add basic React app

avaragado · Mar 16, 2017 · 0d5024a · 0d5024a
1 parent ea970bf
commit 0d5024a
Show file tree

Hide file tree

Showing 11 changed files with 2,785 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+; http://EditorConfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package.json]
+indent_size = 2
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# riw example
+
+Example project for [riw](https://github.com/avaragado/riw)
+
+::TODO:: explain how to make it work with riw
+
+## To run
+
+```js
+git clone git@github.com:avaragado/riw-example.git
+cd riw-example
+yarn install
+yarn start
+```
+
+Then open up [localhost:9000](http://localhost:9000) in your browser.
+
+
+## Acknowledgements
+
+`riw-example` is derived from https://github.com/thejameskyle/react-loadable-example.
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "riw-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "David Smith <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.4.0",
+    "babel-preset-react": "^6.23.0",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>riw-example</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="text/javascript" src="scripts/bundle-main.js"></script>
+    </body>
+</html>
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Buttons from './Buttons';
+import Text from './Text';
+import FileCounter from './FileCounter';
+
+const App = () => (
+    <div>
+        <h1>Hello world!</h1>
+
+        <Text name="Fred" number="123456" />
+
+        <FileCounter numFiles={0} />
+        <FileCounter numFiles={1} />
+        <FileCounter numFiles={2} />
+        <FileCounter numFiles={10} />
+
+        <Buttons />
+
+        <p>The end</p>
+    </div>
+);
+
+export default App;
diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Buttons = () => (
+    <div>
+        <button>Press me</button>
+        <button>Cancel</button>
+    </div>
+);
+
+export default Buttons;
diff --git a/src/components/FileCounter.js b/src/components/FileCounter.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const FileCounter = ({ numFiles }) => (
+    <p>You have { numFiles } file(s)</p>
+);
+
+export default FileCounter;
diff --git a/src/components/Text.js b/src/components/Text.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import FileCounter from './FileCounter';
+
+const Text = ({ name, number }) => (
+    <div>
+        <p>This is some boring text related to {name}.</p>
+
+        <FileCounter numFiles={number} />
+
+        <p>Thank you.</p>
+    </div>
+);
+
+export default Text;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './components/App';
+
+ReactDOM.render(
+    <App/>,
+    document.getElementById('root')
+);
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,26 @@
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+    module: {
+        rules: [{
+            test: /\.js$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+            options: {
+                babelrc: false,
+                presets: ['react'],
+            }
+        }]
+    },
+    output: {
+        filename: 'bundle-[name].js',
+        path: path.resolve(__dirname, 'public', 'scripts'),
+        publicPath: 'scripts/',
+    },
+    devServer: {
+        contentBase: path.join(__dirname, 'public'),
+        compress: true,
+        port: 9000
+    }
+};