Key Takeaways
- React is a JavaScript library used for building fast user interfaces, with a plethora of resources available for learning, from articles to courses, projects, and newsletters.
- Recommended resources include the ‘React for Beginners’ course, the ‘Getting Started with React: A Beginner’s Guide’ article, and the ‘Versioning’ newsletter, among others.
- Prior to learning React, it is essential to have a solid understanding of JavaScript, including concepts like ES6 features, closures, asynchronous programming, and the keyword ‘this’. HTML and CSS knowledge is also crucial as React uses JSX, a syntax extension for JavaScript that resembles HTML.
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!Frequently Asked Questions about Learning React
What are the prerequisites for learning React?
Before you start learning React, it’s important to have a solid understanding of JavaScript, as React is a JavaScript library. You should be comfortable with concepts like ES6 features, closures, asynchronous programming, and this keyword. HTML and CSS knowledge is also essential as you’ll be working with JSX, which is a syntax extension for JavaScript that resembles HTML.
How long does it take to learn React?
The time it takes to learn React can vary greatly depending on your current skill level and the amount of time you can dedicate to learning. If you’re already proficient in JavaScript, you could grasp the basics of React in a few weeks of dedicated study. However, mastering React and its ecosystem (like Redux and React Router) can take several months.
What resources are available for learning React?
There are numerous resources available for learning React. These include online tutorials, video courses, books, and documentation. The official React documentation is a great place to start. Websites like Codecademy and SitePoint offer interactive courses. You can also find many free tutorials on YouTube and blogs.
Why should I learn React?
React is one of the most popular JavaScript libraries for building user interfaces, particularly for single-page applications. It allows you to create reusable UI components. React is maintained by Facebook and a community of individual developers and companies, and is widely used in the industry. Learning React can open up numerous job opportunities.
Is React a library or a framework?
React is a JavaScript library, not a framework. The difference is that a library provides specific, isolated features that you can use as you see fit, while a framework provides a full suite of tools and features, but also imposes a specific way of doing things. React focuses on one thing – building user interfaces, and it does this very well.
What is JSX and why is it important in React?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript, which allows you to write HTML-like code in your JavaScript code. It’s not necessary to use JSX to write React applications, but it’s recommended because it makes the code more readable and writeable.
What is the Virtual DOM in React?
The Virtual DOM (Document Object Model) is a concept introduced by React where a virtual representation of the UI is kept in memory and synced with the ‘real’ DOM through a process called reconciliation. This process, combined with the ability to easily create components, leads to high performance and a predictable codebase.
What is the difference between state and props in React?
In React, state and props are both JavaScript objects. State is a data structure that starts with a default value when a component mounts and then gets mutated over time, mostly as a result of user events. Props (short for properties) are variables passed to it by its parent component.
What is Redux and how is it related to React?
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. While it’s mostly used with React, it can be used with any other view library.
How can I start building projects with React?
Once you’ve grasped the basics of React, the best way to learn is by building projects. Start with something simple, like a to-do list or a weather app. As you get more comfortable, you can move on to more complex projects. This will not only help you understand React better, but also build your portfolio.
Adam RobertsAdam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
