Skip to content

Instantly share code, notes, and snippets.

@priley86
Last active May 24, 2019 04:13
Show Gist options
  • Save priley86/770aaf64ccca5bdfdb4beee208956f7b to your computer and use it in GitHub Desktop.
Save priley86/770aaf64ccca5bdfdb4beee208956f7b to your computer and use it in GitHub Desktop.
Getting Start w/ React by Patrick Riley

Learning React

There a lots of great community guides on learning React. Here are a few I recommend:

Build With React

http://buildwithreact.com/

The Beginners Guide to React JS - Kent C Dodds

https://egghead.io/courses/the-beginner-s-guide-to-reactjs

React Lifecycle and Composition - Doug Miller

https://docs.google.com/presentation/d/1ETxmTmxGQfTCc-eCLgUQztwLrb-FIhRLNJ7iacDmrGE/edit#slide=id.p

Learning ES6

Of course, a precursor for many of these React subjects is learning ES6. I recommend the following for learning ES6:

You Don't Know JS - Kyle Simpson

https://github.com/getify/You-Dont-Know-JS

A Reintroducion to Javascript - MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

Arrow Functions - MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Classes - MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Template Literals - MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Destructuring Assignment - MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Learn about the latest React features and Context APIs

The React framework is evolving and will soon give us advanced features to do asynchronous rendering and advanced context APIs. Today, we use the Recomopse library to handle these patterns, but in the future many of these patterns will come out of the box with React.

I recommend gaining a base understanding in these subjects so that you can be prepared.

Learn Recompose and how to write Higher Order Components (HOCs):

https://github.com/acdlite/recompose

https://www.youtube.com/watch?v=zD_judE-bXk

React Context API (not yet stable):

https://reactjs.org/docs/context.html

Learning advanced React topics

Once you have learned the basics of React and ES6, I recommend learning some of the advanced React libraries for application state management and routing.

Redux

Official Redux docs:

https://github.com/reactjs/redux

Dan Abramov - Getting Started w/ Redux:

https://egghead.io/courses/getting-started-with-redux

Redux Presentation by Patrick Riley (explains some commonly used Redux middlewares):

http://icky-stamp.surge.sh/#/

https://github.com/priley86/redux-presentation

React Router: React Router is a declarative router for React which aids in simplifying page navigation. The React Router also provides DOM/JSX for further simplifying page routing w/ React UIs.

https://github.com/ReactTraining/react-router

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment