Following StephenGrider's tutorial: Modern React with Redux on udemy, here's the link. Bellow are a mix of notes from the tutorial, react documentation, and other sources.
Lodash is a modern Javascript utility library deliverying modularity, performance & extras.
React Router is a collection of navigational components that compose declaratively with your application.
<Switch>
renders the first child<Route>
or<Redirect>
that matches the location.
<Switch>
is unique in that it renders a route *exclusively. In contrast, every<Route>
that matches the location renders inclusively.This is what happened when we were seeing both the
PostsIndex
andPostsNew
components being rendered to the browser at the same time, even through we were at urlhttp://localhost:8080/posts/new
Follow this link to react router's documentation for more information and examples of
<Switch>
<Link>
provides declarative, accessible navigation around your application. Here is an example of its use:
import { Link } from 'react-router-dom'
<Link to="/about">About</Link>
Link to react router's documentation on
<Link>
.
Redux Form works with React Redux to enable an html form in React to use Redux to store all of its state.
Redux Form's responsibility is to handle state and validation of the form. It is not responsible for taking data and saving it in some fashion, making a post request, or anything of that nature.
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. For more information/examples about destructuring with es6, follow the link to MDN web docs
// Example of basic assignment with Object destructuring
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
The conditional (ternary) operator is the only javaScript operator that takes three operands. This operator is frequently used as a shortcut for the
if
statement.
// Syntax
condition ? expression1 : expression2
condition (or conditions) An expression that evaluates to true or false.
expression1, expression2 Expressions with values of any type.
If condition is true, the operator returns the value of expression1; otherwise, it returns the value of expression2. For example, to display a different message based on the value of the
isMember
variable, you could use this statement:
'The fee is ' + (isMember ? '$2.00' : '$10.00);
For more information, use-cases, and examples on the ternary operator, follow this link to the MDN web docs.