Sample jsx components. React-redux.

package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "react-redux": "^7.1.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "uuid": "^3.3.2"
   }
 }

src/index.js

@@ -1,14 +1,20 @@
-// import React from 'react';
+import React from 'react'
-// import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
-// import './index.css';
+// import './index.css'
-// import App from './App';
+import { Provider } from 'react-redux'
-// import * as serviceWorker from './serviceWorker';
+import store from './js/store/index'
-import index from './js/index'
+import App from './js/components/App.jsx'
+import * as serviceWorker from './serviceWorker'
 
-// ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+	<Provider	store={store}>
+		<App />
+	</Provider>,
+	document.getElementById('root')
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-// serviceWorker.unregister();
+serviceWorker.unregister();
 

src/js/components/App.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import List from './List'
+import Form from './Form'
+
+const App = () => (
+  <div className = 'row mt-5'>
+    <div className = 'col-md-4 offset-md-1'>
+    <h2>Articles</h2>
+      <List />
+    </div>
+		<div className = 'col-md-4 offset-md-1'>
+      <h2>Add a new article</h2>
+      <Form />
+    </div>
+  </div>
+)
+
+export default App

src/js/components/Form.jsx

@@ -0,0 +1,60 @@
+import React, { Component } from "react"
+import { connect } from "react-redux"
+import uuidv1 from "uuid"
+import { addArticle } from "../actions/index"
+
+function mapDispatchToProps(dispatch) {
+  return {
+    addArticle: article => dispatch(addArticle(article))
+  }
+}
+
+class ConnectedForm extends Component {
+  constructor() {
+    super()
+
+    this.state = {
+      title: ""
+    }
+
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange(event) {
+    this.setState({ [event.target.id]: event.target.value })
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    const { title } = this.state
+    const id = uuidv1()
+    this.props.addArticle({ title, id })
+    this.setState({ title: "" })
+  }
+
+  render() {
+    const { title } = this.state
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="title">Title</label>
+          <input
+            type="text"
+            className="form-control"
+            id="title"
+            value={title}
+            onChange={this.handleChange}
+          />
+        </div>
+        <button type="submit" className="btn btn-success btn-lg">
+          SAVE
+        </button>
+      </form>
+    )
+  }
+}
+
+const Form = connect(null, mapDispatchToProps)(ConnectedForm)
+
+export default Form

src/js/components/List.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { connect } from "react-redux"
+
+const mapStateToProps = state => {
+  return { articles: state.articles }
+}
+
+const ConnectedList = ({ articles }) => (
+  <ul className="list-group list-group-flush">
+    {articles.map(el => (
+      <li className="list-group-item" key={el.id}>
+        {el.title}
+      </li>
+    ))}
+  </ul>
+)
+
+const List = connect(mapStateToProps)(ConnectedList)
+
+export default List