If you're starting as a developer, one word you'll come across often is "React". You'll see it as part of most developer roadmaps, on job listings, Twitter threads, tech videos on YouTube, blog posts, etc. React is almost everywhere.
In the Stack Overflow Developer Survey 2021, over 40% of respondents voted React as the most commonly used web dev framework/library.
In this article, we will take a look at what React is and why it is so popular among developers. We will keep it as beginner-friendly as possible.
What is React?
The short answer is "React is a JavaScript library for building user interfaces".
Now, in the mind of a beginner, another question arises... What does it mean to refer to React as a "JavaScript Library"? Of course, it does not mean React is a place you can go to borrow books on JavaScript.
In simple terms, a JavaScript Library is a collection of pre-written JavaScript code you can borrow to use in your projects. All the stuff you build and the functionalities you implement with React can be achieved with Vanilla JavaScript. However, using a library like React can help speed up your development process.
Think of it this way... Let's say you want to build a cement block house. You'll need cement blocks to build your house. To get the blocks you'll use in constructing this house, there are at least two options available to you.
Option 1 will be to cast the blocks yourself. To do so, you'll need to get cement, gravels, sand, water, etc. You'll then mix them in the right proportion. And finally, you'll cast the blocks from the mixture you've made using some machine designed for that process. Option 2 is to get precast blocks that someone else has already made and use them for building your house.
Using Vanilla JavaScript is like the first option where you gather the raw materials and mold the blocks yourself. And using a library like React is like the second option where you make use of already made blocks. Both methods will get the work done. However, option 2 would simplify your work process compared to option 1.
JavaScript concepts you should know before React.
As already mentioned, React is a JavaScript library. You can thus make your learning of React much better if you first knockdown some fundamental JavaScript concepts.
You can't learn all there is to know about JavaScript. Don't even attempt it. However, a good grasp of the following concepts will provide you with a solid foundation for learning React.
JavaScript fundamentals
First, get a good grasp of the fundamental concepts like variables, data types, operators, loops, functions, etc
High-Order Array Methods
Become familiar with the concepts of arrays and objects. And also the high-order array methods in JavaScript. These methods commonly used in React include .map(), .forEach() .filter() .reduce() etc.
ES6 syntax
Familiarity with the ES6 syntax will also be helpful. Topics like destructing assignment, spread operator, modules, import and export keywords will give you a smooth transition to React.
Asynchronous JavaScript
Asynchronous JavaScript concepts include promises, async/await. It would also help if you have some familiarity with the fetch API.
Having a good grasp on these topics would make your transition into React less difficult and more enjoyable.
As a beginner, once you gain a good grasp of the web development trinity (HTML, CSS, JavaScript), an appropriate next step would be to pick up a library/framework like React. There are loads of resources out there for learning React. In the useful links section, I've shared two of them that I found useful. If you're looking for recommendation on where to get started, check them out.
Thanks for reading!