diff --git a/.babelrc b/.babelrc
index 9f73d79c..d42d161e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
{
- "presets": ["react", "es2015"],
+ "presets": ["react", "es2015", "stage-0"],
"env": {
"production": {
"plugins": [
diff --git a/README.md b/README.md
index 99a54a8e..a3f67a11 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
MERN Stack - MongoDB, Express, React/Redux, Node
https://github.com/Hashnode/mern-starter
+
+* https://github.com/petehunt/react-howto
+* https://github.com/gajus/react-css-modules
diff --git a/client/index.js b/client/index.js
index 25140a92..1874933d 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,7 +1,8 @@
import React from 'react';
import { render } from 'react-dom';
+import Editor from '../shared/components/Editor/Editor'
render(
-
Hello world!
,
+ ,
document.getElementById('root')
)
\ No newline at end of file
diff --git a/package.json b/package.json
index 678edd59..f4a24ffe 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,10 @@
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
+ "babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.8.0",
+ "css-loader": "^0.23.1",
+ "style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
@@ -28,6 +31,7 @@
"dependencies": {
"babel-core": "^6.8.0",
"react": "^15.0.2",
+ "react-css-modules": "^3.7.6",
"react-dom": "^15.0.2"
}
}
diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx
new file mode 100644
index 00000000..812da37e
--- /dev/null
+++ b/shared/components/Editor/Editor.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/javascript/javascript';
+
+import '../../..//node_modules/codemirror/lib/codemirror.css';
+import './p5-widget-codemirror-theme.css';
+
+export default React.createClass({
+ _cm: CodeMirror.Editor,
+ componentDidMount: function() {
+ this._cm = CodeMirror(this.refs.container, {
+ theme: 'p5-widget',
+ // value: this.props.content,
+ value: 'var a = "Hello World!"',
+ lineNumbers: true,
+ mode: 'javascript'
+ });
+ },
+ componentWillUnmount: function() {
+ this._cm = null;
+ },
+ render: function() {
+ return ;
+ }
+});
\ No newline at end of file
diff --git a/shared/components/Editor/p5-widget-codemirror-theme.css b/shared/components/Editor/p5-widget-codemirror-theme.css
new file mode 100644
index 00000000..ea45b8f5
--- /dev/null
+++ b/shared/components/Editor/p5-widget-codemirror-theme.css
@@ -0,0 +1,39 @@
+:root {
+ --light-gray: #A0A0A0;
+ --dark-gray: #666;
+ --almost-black: #222;
+ --dark-brown: #704F21;
+ --light-brown: #a67f59;
+ --pinkish: #DC3787; /* not p5 pink, but related */
+ --dark-blueish: #00A1D3;
+}
+
+.cm-s-p5-widget span { color: var(--dark-gray); }
+
+.cm-s-p5-widget span.cm-meta { color: var(--dark-gray); }
+.cm-s-p5-widget span.cm-keyword { line-height: 1em; color: var(--dark-brown); }
+.cm-s-p5-widget span.cm-atom { color: var(--pinkish); }
+.cm-s-p5-widget span.cm-number { color: var(--pinkish); }
+.cm-s-p5-widget span.cm-def { color: var(--dark-blueish); }
+.cm-s-p5-widget span.cm-variable { color: var(--dark-blueish); }
+.cm-s-p5-widget span.cm-variable-2 { color: var(--almost-black); }
+.cm-s-p5-widget span.cm-variable-3 { color: var(--almost-black); }
+.cm-s-p5-widget span.cm-property { color: var(--almost-black); }
+.cm-s-p5-widget span.cm-operator { color: var(--light-brown); }
+.cm-s-p5-widget span.cm-comment { color: var(--light-gray); }
+.cm-s-p5-widget span.cm-string { color: var(--dark-blueish); }
+.cm-s-p5-widget span.cm-string-2 { color: var(--dark-blueish); }
+
+.cm-s-p5-widget span.cm-error { color: #f00; }
+
+.cm-s-p5-widget .CodeMirror-activeline-background { background: #e8f2ff; }
+.cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
+
+/* These styles don't seem to be set by CodeMirror's javascript mode. */
+
+.cm-s-p5-widget span.cm-qualifier { color: #555; }
+.cm-s-p5-widget span.cm-builtin { color: #30a; }
+.cm-s-p5-widget span.cm-bracket { color: #cc7; }
+.cm-s-p5-widget span.cm-tag { color: #170; }
+.cm-s-p5-widget span.cm-attribute { color: #00c; }
+.cm-s-p5-widget span.cm-link { color: #219; }
diff --git a/webpack.config.js b/webpack.config.js
index 02e7f2fd..58bf067a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,6 +26,10 @@ module.exports = {
presets: ['react-hmre'],
},
},
+ {
+ test: /\.css$/,
+ loaders: ['style', 'css']
+ }
],
},
};
\ No newline at end of file