This is a full-day workshop on intermediate to advanced topics on building real-world ReactJS Web applications. We will start by learning about the core fundamentals of Redux including pure functions, actions, reducers, the store, and subscriptions. Then we will integration Redux into a React app, learning about components vs containers, accessing the store, async actions, middleware, and thunks. Next, we will layer in React Router 4, learning about params, queries, and redirects; prompt before navigation, and scrollToTop.
Time permitting and based on audience preferences, we can learn about using component libraries, styling, forms and validations, and more!
Basic knowledge of React is required for this workshop. You should be comfortable with props and state as well as the lifecycle methods. We will be using ES6+ syntax.
New link to puppies.json file hosted in S3: https://s3-us-west-2.amazonaws.com/sia-generic-bucket/puppies.json
Use n to go to the next slide and p to go to the previous slide. The arrow keys work too, but sometimes the next slide is down and sometimes it is to the right.
- Redux Basics https://siakaramalegos.github.io/redux1_basics/
- Redux + React https://siakaramalegos.github.io/redux2_react/
- React Router https://siakaramalegos.github.io/react_router/
Make sure you can create a new boilerplate React application using Create React App. This means you should be able to install it, generate the app, and run the app.
npx create-react-app my-app
cd my-app
npm start
You can optionally fork/star/pull this repo to follow along (branches represent different exercises): https://github.com/siakaramalegos/redux_puppies
To get a leg up, make sure you understand these concepts:
- Spread syntax docs by Mozilla Developer Network
Object.assign()docs by Mozilla Developer NetworkArray.prototype.map()docs by Mozilla Developer Network- Answer for Replace array item with another one without mutating state on Stack Overflow
importdocs by Mozilla Developer Network
Star this gist as I'll add more materials for the workshop as we get closer to the date!
Things to read up on later
- Redux documentation by Dan Abramov and contributors
- You Might Not Need Redux by Dan Abramov
- Getting Started With Redux short and free course on Egghead, by the creator of redux, Dan Abramov
- Master the JavaScript Interview: What is Functional Programming? by Eric Elliott
- Master the JavaScript Interview: What is a Pure Function? by Eric Elliott
- 10 Tips for Better Redux Architecture - links directly to section on "Reducers Must be Pure Functions" by Eric Elliott
- Race condition by Wikipedia
- Flux Standard Action by Andrew Clark
- Reducing Boilerplate Redux docs that describe more in-depth the patterns for actions and reducers by Dan Abramov and contributors
- React Redux React bindings for use with Redux by ReactJS
- Usage With React docs by Redux
- Presentational and Container Components by Dan Abramov
- Container Components by Michael Chan
- React Stateless Functional Components: Nine Wins You Might Have Overlooked by Cory House
- Functional Components vs. Stateless Functional Components vs. Stateless Components by Tyler McGinnis
- Atomic Web Design by Brad Frost
- Containers versus Components portion of "Making your app fast with high-performance components" at React.js Conf 2015 by Jason Bonta (Facebook)
- Redux Thunk
- Manipulating the browser history (browser history API) by Mozilla Developer Network
- React Router docs by React Training
- The One Thing you need to know about React Router 4
You can follow me on Twitter and Medium!
Interested in having me speak at your event? Check out my speaking history and/or my website.