How to Learn React: Everything You Need to Get Started
For a high-quality, in-depth introduction to React, you can’t go past Canadian full-stack developer Wes Bos. Try his course here, and use the code SITEPOINT to get 25% off and to help support SitePoint.
Updated September 18, 2017 with a guide to getting Vim set up for React development [drivy.engineering] and a guide to building a game with React and WebGL [sitepoint].
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
- 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].
- All the fundamental React concepts jammed into a single article [medium.freecodecamp].
- Get projects ready quickly using Facebook’s Create React App [sitepoint].
- 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].
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. Use coupon code ‘SITEPOINT’ at checkout to get 25% off and help support SitePoint.
- React Express [react.express] is an all-in-one guide to React development.
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.
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!