A list of resources to get on-boarded to the react ecosystem
This guide assumes you already have a good understanding of JavaScript, HTML, and CSS
I originally wrote this guide for onboarding new employees into the react/redux/webpack ecosystem, and split it up into parts... You should go through each of these resources and be sure to split the parts up into days or multiple days so you don't get information overload. Afterwards, you might want to go even further and learn about Immutable, Flow, Nuclide, Atom-IDE
- Recommended Browser: Chrome (has many useful react and redux dev tools)
- Recommended Editor: VS Code
- Read the documentation on ECMAScript 6 Syntax
- Read about the ES6 features
- Learn about Babel and Transpiling
- Complete the ES6 tutorial
- Watch the videos in this course on Egghead.io about ES6
- ES6 One Liners to Show Off
- Go through the New React Tutorial
- Familiarize yourself with React DevTools for Chrome
- Look at Create React App - a tool to easily get started making a react app.
- If you're in the mood, watch some videos
- Explore some example code
- Go through the React Router Guide
- React Lifecycle Methods - how and when to use them
- Learn about 5 Types of React Application State
- 8 things to learn in React before using Redux
- Check out the React Context API before you decide to jump into Redux
- If you want to understand where the idea came from, watch the Flux presentation
- Watch the Redux course on egghead.io: Getting Started With Redux - from the creator of Redux, Dan Abramov
- Read the entirety of the redux documentation
- Watch the next Redux course on egghead.io: Building React Applications with Idiomatic Redux
- Are you still confused about Thunks? What the heck is a 'thunk'?
- Familiarize yourself with Redux DevTools for chrome - They do cool things like replaying action history, and state inspection.
- Want to become more efficient with Redux? Learn about Reselect
- Building a large application? Learn The Duck Pattern
- Learn about the Webpack Concepts
- Install Webpack in one of your projects, or a new project.
- Read about configuring Webpack Dev Server
- Read about Hot Module Replacement
- Webpack loaders and plugins
You've already been using Node.js behind the scenes in most of these tools. If you want to create your own back end to serve your application, look into Express:
- Node.js
- Before you bury yourself in packages, learn the Node.js runtime itself
- Getting Started with Express
- Many people have switched from
npmtoyarn: Getting Started with Yarn
- Getting Started with Jest - Delightful JavaScript Testing
- Testing React components with Enzyme
- ReactTestUtils - Testing React components in the DOM
- Redux testing tips (actions/async actions, reducers, containers, and middleware)
- Testing Reselect
- Try setting up a project from scratch using
yarn initand then add react, redux, webpack, middleware, other libraries, etc. - Build out a mini-app using all of these technologies to make sure you understand:
- How to create react components
- How to create actions, thunks, and reducers in redux
- How to create redux modules using the Duck Pattern
- How to make your own server using Node/Express
- Configure a build process in webpack
- Use webpack to process CSS and Image files so your entire project builds into 1 js file (or multiple - see Code Splitting below)
If you want to see an example, I've created my own react-app-scaffolding from scratch using all of the above information. (note: this scaffolding assumes you have a back-end that provides a JWT token)
- Video: React.js Conf 2015 - Immutable Data and React
- Immutable Getting Started Guide
- Getting Started With Immutable.js
- Documentation
- Secure Your React and Redux App with JWT Authentication - by Auth0
- Building a React/Redux App with JSON Web Token (JWT) Authentication
- Securing React Redux Apps With JWT Tokens
- Blueprint.js - a fantastic collection of customizable UI Components, Icons, and more.
- Rethinking drag and drop
- Styled Components - Use the best bits of ES6 and CSS to style your apps without stress.