Router, Redux, MERN Lessons 5.1 - 5.

4 Reference Cheatsheet

React Router React Redux MongoDB

<Route> Functions like an if-statement, noSQL database A database that

conditionally renders the given doesn’t use SQL and traditional
component based on the URL path table / row / column organization

<Link> Functions like an a tag link, document row in SQL — an item of

“tricks” user that they are going data, in BSON (a JSON variant)
to a new page while changing URL collection table in SQL — group of
documents (items of data)
<Switch> Let only 1 route get matched
ObjectID Long random string serving
as unique ID for each document
Examples
MongoDB CRUD
Router and Redux need src/index.js
modifications (imports omitted). Store The Redux “ORM”, used most db.userprofiles.find(
for data fetched from back-end {name: "janeqhacker"})
let store = createStore(reducer); Action Represents an “event” that oc- db.userprofiles.insertOne({
ReactDOM.render( curs, e.g. an action is dispatched name: "janeqhacker",
when data is fetched from the mood: "happy",
back-end, and another when the posts: [] })
<Provider store={store}> response comes back db.userprofiles.update(
<BrowserRouter> { name: "janeqhacker" }, {
<App /> Reducer Triggered when an action is
dispatched, a reducer modifies (a $push: { posts: "Agreed!" },
</BrowserRouter> $set: { mood: "happy" } })
</Provider>, duplicate of) the state based on
the action that happened db.userprofiles.deleteOne(
{name: "janeqhacker"})
document.getElementById("root"));
React Redux Code
Express.js + Mongo
Put top-level routes in App.js:
Action Creators (found in actions/)
const app = express();
<Switch> app.get("/", (req, res) => {
<Route path="/about/" const doIncrement = () => {
return {type: INCREMENT};} res.send("Hello World!"); });
component={About} /> app.post("/all", (req, res) => {
<Route path="/post/:id/" const addTodo = (item) => {
db.collection("userprofiles")
component={BlogPost} /> return {type: ADD, text: item};} .find({})
</Switch> .toArray((err, data) => {
Dispatching (found in components/) if (err) throw err;
Link examples: res.json(data);
let action = });
addTodo(this.state.text); });
<Link to="/about/">About</Link> this.props.dispatch(action);
app.get("/u/:name", (req,res)=>{
<Link to={"/post/"+postId+"/"}> const uName = req.params.name;
Read More...</Link> Reducers (found in reducers/) db.collection("userprofiles")
.find({username: uName})
const initialState = { .toArray((err, data) => {
MERN Stack count: 0, if (err) throw err;
todoList: [], res.json(data);
}; });
MongoDB NoSQL database that const todo = (state, action) => { });
stores JSON documents, with no switch (action.type) { app.post("/create", (req,res) => {
built-in schema-enforcement case INCREMENT:
return Object.assign({},state,{ const data = {name: "jqhacker"};
count: state.count + 1, db.collection("userprofiles")
Express.js Most popular backend web
framework for Node.js }); .insertOne(data, (err,data)=>{
case ADD: if (err) throw err;
React + Redux State-management return Object.assign({},state,{ res.json({success: true});
library, popular with large React todoList: todoList.concat([ });
projects where state gets too huge { text: action.text } ]), app.listen(3000, () => {
for the App component }); console.log("ready @ :3000"); });

Kickstart Coding http://kickstartcoding.com/