Learning React can get awfully complicated. Flux, Redux, server side rendering, React Native, higher order components, functions as child components, CSS in JS, and more. Let's simplify the equation: build a real world application using React and Redux, learning patterns and practices to make reusable, composable components as we go. Whether you are brand new to React or have some experience with it, you should walk away with a solid understanding of how to compose React applications. This workshop is intended for those who already have basic React knowledge or experience, and should be considered more of a 201 level workshop than a 101 level.
Nathan Loding - more bio to come!
You can view the most current version of the slides for this workshop here or you can grab your own copy to run locally here
- The example app is based off
create-react-app, so refer to its documentation for any changes you want to make. - Open that repository and run
npm installoryarn, thennpm startoryarn start - If your browser doesn't automatically open, launch
http://localhost:3000to view the site - I apologize for the mix of semicolons and not ... no semicolons is a thing I do now
- Normalize state data
- Add or extend
Layout- Alternately, create a 500 and/or 404 error page which use a different layout
- Add text filter to article list (note: API doesn't support this, so just filtering local store)
- Create/utilize
Tagcomponent, and make it customizable (reusable) - Load user into state if app is reloaded and 'jwt' storage key is there
- Secure authenticated routes:
- Create a custom
AuthenticatedRouteusing a HOC - Use a render prop to conditionally render the routes
- Create a custom
- Node, npm/yarn (Node, Yarn)
- Editor/IDE (Atom, WebStorm, VSCode, Sublime, etc.)
- Chrome or Firefox
- React DevTools browser extension
- Redux DevTools browser extension
- May 2018: New slides, new application, new exercises; all based on attendee feedback from CodeMash
- January 10, 2018: CodeMash
- May 31, 2018: Music City Code