React: A beginner-friendly Introduction

As a frontend developer, it will be difficult to navigate through your career without having to use a few frontend frameworks or libraries. Learning how to build applications using these libraries or frameworks will help take your career to the next level. Before we enter the real topic of discussion of this article, let us begin by examining the difference that exists between libraries and frameworks. Developers often use the words library and framework interchangeably but they are not the same. Both frameworks and libraries are basically code written by someone else that is used to help solve common problems though a framework is usually larger in scope than a library. The main difference between the two is something called inversion of control, which fundamentally refers to who has control over the flow of the program. With a library, you the programmer has control of the flow cause you can choose when to call the pre-written code that the library has to offer into your program. In comparison, a framework has control of the flow of a program cause it tells you where you can put in your own custom code. To better explain this, permit me to use to this analogy.

A library is like going to Ikea to shop for furniture. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own sofa from scratch. Ikea gives you a chance to pick and choose different things to go in your home. You are in control.

A framework, on the contrary, is like building a model home. You have a set of blueprints and a few limited choices when it comes to design and architecture. The contractor and blueprint are essentially in control and they will let you know when and where you can provide your input. That is that about the difference between frameworks and libraries. Now unto the reason why you opened this article.

What is React?

Simply put, React is a JavaScript library that aims at simplifying the development of user interfaces. Now looking at it from a deeper perspective, React is a declarative, component-based JavaScript library for building user interfaces. Before going further, let's see what the words that have been emphasized mean in the context of React. React is declarative and that's one of the first things you'd see about it when you open its official documentation but what does it mean to be declarative? Being declarative in the context of programming means "telling what to do instead of how it should be done". In React, the easiest explanation of its declarative nature is that when we create components, we let React handle how it will display these components on the DOM. Now unto what being component-based means.

When React came to life in 2013, it came along with a new way of building user interfaces with the introduction of its Component-Based Architecture(CBA). You can think of a component as a small feature that makes up a piece of the user interface. If I were to describe a component within the scope of Twitter's UI for example, A chat window would be a component, a comment feed would be another component, and a constantly updating followers list would represent yet another component. They are like different pieces of a puzzle that all come together to form something useful and meaningful.

Why should you learn React?

I'll outline some of the reasons why I think you should learn React. Keep in mind that these are only my opinions and other people's opinions might differ from mine.

• React is popular. React has seen a surge in popularity since its conception and as a frontend developer you'll probably have to work with it at some point in your career.
• There are a couple of technologies such as Next.js and Gatsby that use React under the hood.
• React is easy to learn and is faster to develop with.
• React has a huge dedicated developer community. The community helps to maintain and grow the open-source library, with everyone able to contribute their own components to the library.

What JavaScript concepts are essential for learning React?

Before you get started with React, there are some core JS concepts that you need to understand to facilitate your learning process. Some of these concepts are;

• Variable Declarations (let and const)
• Arrow functions
• Template literals
• Spread and Rest Operators
• Callbacks
• Object Destructuring
• Modules import and export

You can click on the links I provided if you need a refresher on any of these concepts or if they sound unfamiliar to you.

How to go from beginner to intermediate in React.

Now that we have seen what React is and looked at some reasons why you should learn React, let's look at some tips that will help take you from beginner to an intermediate React developer. The way to do this is by having a good mastery of the topics I am going to list below.

• Data handling in React
• Styling in React
• Form handling
• Reconciliation process in React
• React Hooks. It might be a little difficult to grasp these concepts when you just start learning about React but as soon as they click, you'd be happy that you took initiative to learn React.

Thank you for reading this article and I'll appreciate if you share your thoughts about it or anything else React and web development with me in the comment section. Connect with me on LinkedIn and twitter as I continue to document my journey in the React ecosystem. Hope to link up with you soon with some more React content. Until then stay curious and happy coding.