This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.

If you are here, you must be already a web developer with an understanding of javascript. You could be using just plain vanilla Javascript or could be a developer using libraries and frameworks already.

Let’s jump in and refresh some concepts to understand what React has in for us.

Library vs Framework

Libraries are primarily to help you get things done in an efficient way. jQuery was there to avoid complicated code and made it easy to do common functionalities like selecting items on the web page, creating elements, and appending them to either body or another element on the page.

As a web developer, we know there are a million ways to build a web page or a web application. Out of these million ways, there are certain ways that are scalable and can be supported at a large scale, so larger enterprises with varying developers with a wide range of skills can be onboarded and continue building the application.

For such scalability, a comprehensive set of tools to build a web application is necessary and those that get you done using javascript are called Frameworks. AngularJS/Angular is one such framework.

What is ReactJS or React.js or just React?

React is a library, unlike Angular. It does only a certain part of the application — which is handling the view. However, don’t misunderstand that it doesn’t work for you if you are looking to build a scalable application using React.

Initially React was just a library that will provide a structure to your application, enable you to load views(contents of a webpage) effectively, and be able to maintain a relatively smaller footprint and organized code.

Later, with more and more folks using it on multiple projects, it has evolved over the period of time from just a library developed by Facebook to a great ecosystem today.

Understanding React Ecosystem

React is a view library that helps you manage the view rendering, structure of the project, data binding, bundling of the modules you write.

Components are basic building blocks of a React application, where you write reusable items of the desired view. These could be as small as just a button with a certain style and action. It could also be a profile badge that includes certain items that work exactly the same way wherever they are embedded.

React is written in jsx files — which stands for Javascript XML.

Sounds scary — but not so much. It basically is a file format that enables you to write HTML inside a Javascript file.

When you run the application the compiler will automatically convert it to standard javascript and make it ready to render.

Try out the basics here on Codecademy and it shouldn’t take more than an hour to do this handheld training. These 14 part training will get you confident about the basics of JSX using the existing knowledge of Javascript, HTML.

All you will do is combine it and see how it is rendered on the browser.

React and ES6

React uses ES6 standard to write javascript. Again, don’t be afraid. Nothing changes in your javascript world apart from a few new concepts.

You get to write arrow functions. You will realize that you can write classes in javascript and have constructors. You’re now a completely changed man/woman from a haphazard javascript life. It is going to be more structured from now on.

Back to Components, each component as we discussed is a self-sustained entity. Think of it as a widget on a page. It will have its own variables, functions, styles, and data.

Structuring or writing these components is done in 2 ways

• Class components
• Functional components

Class components are generally used to handle a lot of data, functionality and come along with so-called “life cycle” methods — which will help you render and run the component functionality in a specific way. They include methods like

What to do on rendering (componentDidMount)what to do when data is passed (componentDidReceiveProps)what to do some part of the component is updated (componentDidUpdate)what to do when the component is being un-mounted from page (componentDidUnmount)

Functional components are used to build components that are simple and straight forward. Which gets data and simply gets rendered. No additional complexity. Think of them as dumb components like a button or an image.

With changing times, to bring more advancement and simplicity in the code written, a new concept called Hooks is introduced, which can help you build a fully functional component with all the capabilities of a class component.

Hurray! You don’t have to write classes in Javascript or constructors.

Data binding and Management

If you are coming from the Angular world, you would pretty much be worried about how we pass the data around and how we store the data on an application level. For that, we have state management concepts that help you manage the state of the application and be able to debug and see what’s happening throughout the application in a much better format.

• Props (or attributes passed to a component) are used to pass data between components
• Context API is used for relatively smaller use-cases to manage data between screens/pages
• Redux is a full-fledged library, that you generally use in React applications to manage data/state of the application and it comes with a lot of wonderful tools along with it.

Now that you are a Javascript developer, who got a glimpse of all things React and its ecosystem — time to jump in and do some hands-on development.

Hands-on development steps for React Development

You can follow this set of articles and can master the art of building web applications in ReactJS.

• Introduction, walkthrough, install, and get the react app running.
• Building a single page application with routes and navigate between them.
• Managing data between various pages using the “Context API” concept.
• Enhance your application to do Create, Read, Update and Delete (CRUD) functionalities using Hooks

As you get to handle complex data management between various screens on your application, you would need a state management library — Redux is one such popular one.

Also published here.