Resources to Learn React: Everything You Need to Get Started

React is a JavaScript library created by Facebook developers to build fast user interfaces. Whether you’re new to React or your React development journey is accelerating, it can be difficult to master its basics, techniques, tools and techniques. So we created this guide to the resources available and our recommendations. No matter what stage of learning you are at, here are the best React content you need – check it out and learn it in depth! (If you think we've missed something, please let us know in the form below!)

Key Points

• React is a JavaScript library for building fast user interfaces with a large number of learning resources available, from articles to courses, projects and newsletters.
• Recommended resources include the “React Beginner” course, the “React Beginner: Beginner’s Guide” article, and the “version control” newsletter.
• Before learning React, you must have a solid grasp of JavaScript, including concepts such as ES6 features, closures, asynchronous programming and the "this" keyword. HTML and CSS knowledge is also important because React uses JSX, a JavaScript syntax extension similar to HTML.

Article

Whether you are considering learning React, or you are looking for more advanced tools and systems, here are some of the best written resources we have found.

Beginner and Comparison

• React Getting Started: Beginner's Guide [sitepoint]
• Beginner of JSX [sitepoint]
• React Tutorial: Building a Calculator Application from Scratch [sitepoint]
• Style React Components: 7 Methods Comparison [sitepoint]
• How to tell if React is best for your next project [sitepoint]
• React vs. Angular—In-depth comparison [sitepoint]
• React vs. Vue—"Why did I choose React instead of Vue" [medium/@calinleafshade]
• Beginner of React, Beginner's Guide [sitepoint]
• Explore new features in React 16 by building a music player [sitepoint]
• How React improves your D3 animation [sitepoint]
• Facebook official React introduction [facebook.github]

Basics

• All basic React concepts are compressed into one article [medium.freecodecamp]
• Quickly prepare projects with Facebook's Create React App [sitepoint]
• Back to the basics—Use React Flow [medium/javascript-inside]
• How to optimize React performance using stateless components [sitepoint]
• React Style Overview—From using external CSS to style components [sitepoint]
• In-depth understanding of React animation [medium/react-native-training]
• Introduction to Component Folder Mode [medium/styled-components], which makes writing extensible React applications easier.
• Everything about React Router 4 [css-tricks]
• and server-side React rendering guide [css-tricks]
• Four invariant methods for handling states in React [medium/@housecor]
• How to install React Native [sitepoint]
• Authentication Guide in React Native Applications [goshakkk.name]
• Searchable and filterable React quick lookup table [reactcheatsheet]

Slightly advanced

• How to organize and make large React applications scalable [sitepoint]
• Suggestions: Learn React [robinwieruch]
• How to create a truly universal React component system [medium/styled-components]
• Redux vs. MobX: Which is better? [sitepoint]
• React 16 changed how React handles unknown DOM properties: a guide on how these changes affect you and your code [facebook.github]

Course

If you don't like to build your own learning path through articles, or you want to make sure you master all the concepts and techniques, then we recommend the following structured React courses.

• Beginners for React [reactforbeginners] is the gold standard for React education, from React mentor Wes Bos.
• React Express [react.express] is a comprehensive guide to React development.

Project

You have mastered the basics and maybe even more. Here are some projects that you can put into practice:

• A guide to step by step building React applications with user login and authentication [sitepoint]
• Guide to build stateful real-time applications with React Native and Pusher [sitepoint]
• How to add analysis to React Native applications [sitepoint]
• Build your first server-side rendered React application with Rails [engineering.musefind]
• How to build Reddit clones using React and Firebase [sitepoint]
• Build a complete spherical 3D image library with React VR [sitepoint]
• Then use React, Redux, Express, and MongoDB to build a complete Trello clone [sitepoint]
• Then use React Native to build a face recognition application [sitepoint]
• How to build Android applications using React Native [sitepoint]
• Build games with React and WebWL [sitepoint]

Libraries and Tools

• How to set up Vim for React development [drivy.engineering]
• react-boilerplate [github/react-boilerplate] is the scalable, offline-first basis for the next React project.
• react-vt [github/reactvt] is a visual test library for React developers.
• Mirror [github/mirrorjs] is a simple, powerful React framework with minimal API and no boilerplate code.
• React Material UI, React Bootstrap, Semantic UI, and (Four) More – Seven React libraries you should know [readwrite]
• JetBrains Web UI components are open source [blog.jetbrains]
• Gatsby [gatsbyjs] is a friendly, super fast React static site generator.
• React Static is a React static site generator designed to be easy to configure and data agnostic.
• React Native Pull to Refresh [github/nadikuts] is a custom pull-down refresh component for Android.
• Lottie [airbnb.design] is an iOS, Android, and React Native library that allows applications to use animations as easily as they use static images.
• Sketch.app [airbnb] is another tool for Airbnb that allows you to write React components rendered to Sketch documents.

Newsletter

If all of this helps you get into the world of React – here are some newsletters that will help you get the latest information.

• Version Control [sitepoint] – Daily Newsletter, covering a variety of topics including React, kind of like this post (text and link), written by me!
• React Status [react.statuscode] – Weekly newsletter from the great people at Cooperpress.
• React Newsletter [reactjsnewsletter] – Weekly Newsletter, curated by Tyler McGinnis and Ean Platter.
• react digest [reactdigest] – Weekly newsletter, sending five React links every Monday.

What have we missed?

Finally, if you find the excellent React resources or tools that should be included here, please let us know in the form below. Happy React!

Frequently Asked Questions about Learning React

What are the prerequisites for learning React?

Before starting to learn React, it is very important to master JavaScript, because React is a JavaScript library. You should be familiar with concepts such as ES6 features, closures, asynchronous programming, and this keywords. HTML and CSS knowledge is also important because you will use JSX, a JavaScript syntax extension similar to HTML.

How long does it take to learn React?

The time required to learn React varies greatly, depending on your current skill level and how much time you can devote to your studies. If you are already proficient in JavaScript, you can master the basics of React in weeks of dedicated learning. However, it can take several months to master React and its ecosystems such as Redux and React Router.

What are the resources to learn React?

There are a lot of resources available to learn React. These include online tutorials, video courses, books and documents. The official React documentation is a great place to start. Interactive courses are available on sites such as Codecademy and SitePoint. 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, especially for single-page applications. It allows you to create reusable UI components. React is maintained by Facebook and the community of individual developers and companies and is widely used in the industry. Learning React can bring many job opportunities.

Is React a library or a framework?

React is a JavaScript library, not a framework. The difference is that the library provides specific, isolated features you can use as needed, while the framework provides a full set of tools and features, but also imposes a specific way of doing things. React focuses on one thing – building the user interface, and it does a really good job.

What is JSX and why is it important in React?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code in JavaScript code. Writing a React application does not require JSX, but it is recommended because it makes the code easier to read and write.

What is a virtual DOM in React?

Virtual DOM (Document Object Model) is a concept introduced by React, where the virtual representation of the UI is kept in memory and synchronized with the "real" DOM ​​through a process called coordination. This process combines with the ability to easily create components to enable a high-performance and predictable code base.

What is the difference between state and track in React?

In React, states and props are JavaScript objects. The state is a data structure that starts with the default value when the component is mounted and then mutates over time, which is mainly the result of user events. A prop (abbreviated as an attribute) is a variable passed to it by its parent component.

What is Redux and how does it have to do with React?

Redux is a predictable state container for JavaScript applications. It helps you write applications that are consistently run, easy to test in different environments (client, server, and native). While it is mainly used with React, it can be used with any other view library.

How to get started building a project with React?

After mastering the basics of React, the best way to learn is to build a project. Start with simple projects, such as a to-do list or weather app. As your experience grows more, you can turn to more complex projects. Not only will this help you better understand React, it can also build your portfolio.

The above is the detailed content of Resources to Learn React: Everything You Need to Get Started. For more information, please follow other related articles on the PHP Chinese website!