This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.
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.
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.
All you will do is combine it and see how it is rendered on the browser.
React and ES6
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.
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.
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. This article helps you build state management in your react app with Redux