Tips on Learning Reacting JS – Part 1 – Using the React Doc
Tags: react, webdev, beginners, codenewbie
Published: 2022-03-30 06:26:45

This article was originally published in my blog www.exceptionalprogramming.com

**Introduction**

React JS is one of the **most popular and in-demand pieces of software in the world**. If you have a desire to learn React this article will benefit you.  This three-part series will give you great tips on how to become excellent at React. Once you have learned React you can use it to boost your attractiveness with employers, as an in-demand freelancer, or for your own personal projects. This article is part one of the tips on how to learn React series.  Don’t feel like you have to master everything in part one before implementing what’s in the other article parts ahead. If anything it’s best to do the various items recommended in the series in combination with one another.

**Using the React Doc**

You’re probably thinking that the React doc is a waste of time and won’t be fruitful. Especially if you want to become proficient in React as soon as possible. Many software docs give the reader lots of dry technical terms that are not interactive nor user friendly. However, that is not the case with the React documentation. Now that we’ve got that covered let’s start exploring the variety of resources that are available with the React [doc](https://reactjs.org/docs/getting-started.html). 

**Practical Tutorial**

If you prefer learning through application, React’s doc offers a practical [tutorial](https://reactjs.org/tutorial/tutorial.html). With this tutorial, you get to build a playable game using React. Consequently, you immediately get to start working with React and can begin gaining familiarity with how it operates. Kind of like taking a car for a test drive to see how it rides on the road. This tutorial is great also in that they have links at the end of sections that display how your React code should look so that the user is building the game correctly. In addition, the tutorial offers numerous high-quality screenshots making it easy to follow along while building the game. 

**Conceptual Step-by-Step Guide**

React’s documentation also provides a conceptual step-by-step [guide](https://reactjs.org/docs/hello-world.html) for those that learn better through theory when trying to understand something new. The conceptual guide is broken up into eight different sections :

Installation
Main Concepts
Advanced Guides
API References 
Hooks
Testing
Contributing
FAQ

The guide is full of clickable links in each section so you can go deeper into different concepts of your choosing. For example, in the chapter on Components and Props, you can simply read the text to get a basic understanding or click on hyperlinked words like “ES6 class” and “as a function or class” to learn more about those individual concepts and how they correlate with the chapter you are reading. Like the practical tutorial, there are plenty of screenshots taken directly from React so its not just line after line of plain text. 

**Online Interactive React “Playgrounds”** 

Furthermore, the React doc features what they call online playgrounds. It allows users to play with React using  [CodePen](https://codepen.io/pen?&editors=0010&layout=left), [Code Sandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/edit/react-uyhmfa), or a downloadable HTML file. These online playgrounds are an excellent way to try React to decipher if you would like to go deeper with the software. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a2ps04hgtdbdrsdfao4.jpg)

**In Conclusion**

This article showed you some of the various ways the React doc can assist in learning React.

Please like and share this article if you found helpful.

You can check out some of my other articles on my blog www.exceptionalprogramming.com