⚡️
React Router Workshop at Sac Hacks 2018 🚀
By Scott Iwako
Follow me on Twitter @theisomorphic
✅ Step 00. Setting up our Router and Components to render!
🥅
LEARNING GOALS Learn about react-router-dom
's
-
BrowserRouter
-
Route
-
Link
-
Switch
-
location
object
Instructions
- Add
react-router-dom
as dependency - Set up
BrowserRouter
- Add first two
Route
's and build out corresponding components to render. - Add
NavBar
component. - Build out 404 Error component and try to figure out a
path
for theRoute
- Add
Switch
component to the application. - Improve UX of 404 Error page.
✅ Step 01. Add Dynamic Pages! 🚀
🥅
LEARNING GOALS - Learn about the
render
prop pattern to add more control of whatRoute
is rendering. - Learn about the
.push
method on thehistory
object.
Instructions
- Refactor
Add
component to include aform
to add new ideas. - Build out a helper function to handle
form
submissions. - Pass the API method -
handleAddIdea
to theAdd
component using therender
prop, and invoke it inside theform
'sonSubmit
handler. - Use the
history
.push
method to push the user home after submitting an idea. - Refactor the
Home
component to show the ideas as an ordered list ofLink
components that take the user to the idea's voting page. - Add a ternary expression to render the
ideas
if theideas.length > 0
otherwise, display a nice message - "Looks like there are no ideas!"
✅ Step 02. Add a Jam Idea Voting Page 🎟
🥅
LEARNING GOALS - Learn about how to add URL parameters.
- Learn about the
match
object.
Instructions
- Add a new
Route
to catch the/ideas/<unique-id>
. - Build out the
Vote
component to be rendered at/ideas/<unique-id>
. - Use the
getIdea
andhandleVote
API methods to render the idea'slikes
andtitle
data, and add thebutton
click behavior, respectively. - Add a conditional to handle ideas
id
's that are not in our backend.
✅ Step 03. Polish up the Application 💅
🥅
LEARNING GOALS - Learn about the
NavLink
component.
Instructions
- Add
activeStyle
to the navigation links so that when clicked the styling of the link changes accordingly. - Add emojis next to the like number depending on the like count. For example, if the like count is less than 0 we display a
💩 , equal to zero -⭐️ , and greater than zero -🌶 .
✅ Step 04. BONUS (ADVANCED) Add Private Routing! 🔒
LEARNING GOALS 🥅
- Learn about Higher Order Components
- Learn about the
Redirect
component - Learn about how to pass state into
Redirect
.
Instructions
- Add a
Login
component that will render aform
with a dropdown menu of usernames. - Invoke the
auth.setAuthUser
API method inside theform
'sonSubmit
handler function. - Add the
auth.unsetAuthUser
API method as theonClick
handler on the logout button. Additionally, show theauthUser
name somewhere in theNavBar
. - Build a Higher Order Component called
PrivateRoute
that invokes therender
callback if the user is authenticated otherwise, return aRedirect
component to take the user to the login page. - Add the
authUser
to the second argument ofhandleAddIdea
inside of theAdd
component'sonSubmit
handler. Display theauthor
inside of theVote
component. - Pass referrer state into the
Redirect
component rendered byPrivateRoute
so that after logging into the application the user is redirected to the originally requested page instead of/
.