5 Things I Wish I Knew Before Learning React JS

Vault50.com is an independent review guide covering business and educational products and software. This website contains affiliate links and we may be compensated if you make a purchase after clicking these links.

reactjs guide

React is currently the most in-demand JavaScript library in the world. There are now a ton of courses available online for those looking to learn React (see the V50 review of 10 of the best on Udemy right now), and career options are healthy.

And within all that extra time people have had during the Coronavirus lockdowns, the take-up on such courses has been huge.

I for one, took the punt last year and am very happy that I did.

However, there are a few points that would have been good to know before I set off on my React career path.

If you are interested in learning to be a professional React developer, here are 5 things you will need to know before you can make it a reality….

1. Know the core fundamentals of HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are at the core or of nearly everything you see online. As a React developer, you will need to know how to use these.

React utilizes these core structural elements by the fact it allows you to build upon them (to create web-based applications).

Anyone that has managed to build a website and used HTML, CSS, and/or JavaScript will be in a good position when it comes to learning React.

If you haven’t, it may be an idea to either take a beginner course on these languages or jump in and learn by building a small website yourself.

Because React is connected with JavaScript, knowing this will be most beneficial of all.

While most beginners’ React courses will provide elements of Javascript in the course materials, having prior knowledge will make things a lot easier.

JavaScript concepts that will help you as a React Developer?
  • Data structures such as variables, objects, and arrays [e.g working with array data: .map(), .filter(), and .reduce()]
  • Asynchronous JavaScript, HTTP requests with Fetch API, and async/await syntax
  • The DOM: learn to create, select and modify HTML elements
  • Knowledge of latest JavaScript features through ES6/ES7/ES8/ESNext JavaScript.

2. Have an understanding of REST and GraphQL APIs

You will also benefit if you know how to fetch data from both REST and GraphQL APIs.

Because React app is the frontend of a complete application, in the process of creating an app, you will need to know how to fetch data from the backend.

The two main ways of working with data from a backend are REST API and the new GraphQL API.

Understanding how React interacts with these will give you a head start that’s for sure.

3. Be prepared to get your head around the React router

The React router will definitely be taught in your course. Because React does not come with its own router, a third-party library called react-router-dom is used within the framework of the app you make.

Essentially, the react-router-dom is necessary for creating pages in your app. It also allows for the frontend user to navigate through these pages.

Important features of react-router-dom to learn
  • App routes using  <Route />, <Switch />, and <BrowserRouter />
  • Dynamic routes using path prop and path value using the useParams() hook
  • Navigating users to different pages using the component
  • Redirecting users from protected content using the component

4. Understand state management in React

State management is all about where you locate data and how to work with it, for the app that you are creating.

React Context is what you will use to manage state across the various components of your build. This is built into the React library and gives you the power to pass data without the need for props.

All of this will become clear as you learn, however, as you can see, having knowledge of what they are will put you in good stead.

The useContext() React hook is one of the fundamentals of React Context and you will certainly be introduced to this during your learning.

5. Learn about the components and utility class library

Any React app that you build will need styling so that the frontend is appealing and intuitive to the user.

This can be done using good old CSS, (which I covered in the first point above). However, many developers like to utilize the component library for pre-made styles and reusable elements, (Material UI being commonly used).

Pre-made class names also come in the form of utility class libraries. These feature pre-made classes that can be used to style your elements. The most popular utility class library is Tailwind CSS.

Essentially, all of the above areas will be covered during your journey to becoming a React developer. Having an understanding of them before launching into a course will definitely put you a step ahead.

About V50

The editorial team here at Vault50.com is made up of a number of writers based all over the world. Our interests and experience cover the full range of what we talk about here. Clare Turner is one of our key contributers writing about the home. David Lachance is our resident e-commerce and business guru, if it's anything to do with that, he's your man. Kevin Simpson takes care of the website layout and publishing and also heads up our education section, with in-depth reviews and articles on courses and training. Find out more about all of us here.

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x