Sample jsx components. React-redux.

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