Resources to Learn React: Everything You Need to Get Started

React is a JavaScript library, originally built by developers at Facebook, for building fast user interfaces. If you’re dipping your toe into the React waters, or if your React development journey is picking up speed, it can be hard to stay across the fundamentals, techniques, tools and tricks – so we’ve created this guide to what’s out there and what we recommend. No matter where you are on your journey, the best React content you need is here – take a look and dive in! (And if you think we’ve missed something, let us know in the form below!)

Articles

Whether you’re still deciding to take the React plunge, or you’re looking at more advanced tooling and systems, here are the best written resources we could find.

Introductions and Comparisons

• Getting Started with React: A Beginner’s Guide [sitepoint]
• An Introduction to JSX [sitepoint]
• React Tutorial: Build a Calculator App from Scratch [sitepoint]
• Style React Components: 7 Ways Compared [sitepoint]
• How to tell if React is the best fit for your next project [sitepoint].
• React vs Angular – An in-depth comparison [sitepoint].
• React vs Vue – “why I chose React over Vue” [medium/@calinleafshade].
• Getting started with React, a beginner’s guide [sitepoint].
• Explore the new features of React 16 by building a music player [sitepoint].
• How React makes your D3 animation better [sitepoint].
• Facebook’s official intro to React [facebook.github].

Fundamentals

• All the fundamental React concepts jammed into a single article [medium.freecodecamp].
• Get projects ready quickly using Facebook’s Create React App [sitepoint].
• Back to basics – using React Flow [medium/javascript-inside].
• How to optimize React performance using stateless components [sitepoint].
• A run-down of styling in React – from using external CSS to styled components [sitepoint].
• React animations in depth [medium/react-native-training].
• An intro to the component folder pattern [medium/styled-components], which makes writing scalable React apps easier.
• All about React Router 4 [css-tricks].
• And a guide to server-side React rendering [css-tricks].
• Four immutable approaches to handling state in React [medium/@housecor].
• How to install React Native [sitepoint].
• A guide to authentication in React Native apps [goshakkk.name].
• A searchable, filterable React cheat sheet [reactcheatsheet].

Slightly More Advanced

• How to organize a large React app and make it scale [sitepoint].
• Advice: learn React before using Redux [robinwieruch].
• How to create truly universal React component systems [medium/styled-components].
• Redux vs MobX: which is better? [sitepoint].
• React 16 changed how React handles unknown DOM attributes: a guide to how those changes impact you and your code [facebook.github].

Courses

If cobbling together your own learning path via articles isn’t for you, or you’d like to make sure you’re across all the concepts and techniques, these are the structured React courses we recommend.

• React for Beginners [reactforbeginners] is the gold standard in React education, from React tutor extraordinaire Wes Bos.
• React Express [react.express] is an all-in-one guide to React development.

Projects

You’ve got the basics – and perhaps even a little bit more. Here are some projects to take on to put that knowledge into practice:

• A step-by-step guide to building a React app with user login and authentication [sitepoint].
• A guide to building a stateful real-time app with React Native and Pusher [sitepoint].
• How to add analytics to a React Native app [sitepoint].
• Build your first server-side rendered React app with Rails [engineering.musefind].
• How to build a Reddit clone with React and Firebase [sitepoint].
• Build a full, spherical 3D image gallery with React VR [sitepoint].
• Then build a fullstack Trello clone with React, Redux, Express and MongoDB [sitepoint].
• And then build a facial recognition app with React Native [sitepoint].
• How to build an Android app with React Native [sitepoint].
• Building a game with React and WebWL [sitepoint].

Libraries and Tools

• How to set up Vim for React development [drivy.engineering].
• react-boilerplate [github/react-boilerplate] is a scalable, offline first foundation for your next React project.
• react-vt [github/reactvt] is a visual testing library for React devs.
• Mirror [github/mirrorjs] is a simple, powerful React framework with minimal API and no boilerplate.
• React Material UI, React Bootstrap, Semantic UI and (four) more – seven React libraries about which you should know [readwrite].
• JetBrains Web UI components are open source [blog.jetbrains].
• Gatsby [gatsbyjs] is a friendly, super fast static site generator for React.
• React Static is a React static site generator that aims for ease of configuration and data agnosticism.
• React Native Pull to Refresh [github/nadikuts] is a custom pull to refresh component for Android.
• Lottie [airbnb.design] is an iOS, Android, and React Native library that lets apps use animations as easily as static images.
• Sketch.app [airbnb] is another tool from Airbnb that’ll let you write React components that render to Sketch docs.

Newsletters

If all of this has helped you enter the world of React – here are some newsletters that will help you keep up to date with what’s new.

• Versioning [sitepoint] – a daily newsletter, covers a variety of subjects including React, kinda looks like this post (text and links) and is written by me!
• React Status [react.statuscode] – a weekly newsletter from the fine folks at Cooperpress.
• React Newsletter [reactjsnewsletter] – a weekly newsletter, curated by Tyler McGinnis and Ean Platter.
• react digest [reactdigest] – a weekly newsletter, five React links sent out every Monday.

What Did We Miss?

Finally, If you’ve found a great React resource or tool that belongs here – let us know in the form below. Happy React-ing. Reaction-ing. Re-acting. All of that stuff!