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 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. Libraries 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 . AngularJS/Angular is one such framework. Frameworks 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 is a view library that helps you manage the view rendering, structure of the project, data binding, bundling of the modules you write. React 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. Components which stands for Javascript XML. React is written in jsx files — — but not so much. It basically is a file format that enables you to write HTML inside a Javascript file. Sounds scary When you run the application the compiler will automatically convert it to standard javascript and make it ready to render. 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. Try out the basics here on Codecademy 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. 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. Back to Components, Structuring or writing these components is done in 2 ways Class components Functional 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 Class components 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) 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. Functional components With changing times, to bring more advancement and simplicity in the code written, a new concept called is introduced, which can help you build a fully functional component with all the capabilities of a class component. Hooks 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. (or attributes passed to a component) are used to pass data between components Props is used for relatively smaller use-cases to manage data between screens/pages Context API 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. Redux 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 “ ” concept Context API 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

Facebook

Right-to-Repair: Facts, Myths, and Possibilities for the Future

ReactJS: The Javascript Developer’s Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Tips to Avoid Loss on Bitcoin, Ethereum, Litecoin

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

3 Tips to Avoid Loss on Bitcoin, Ethereum, Litecoin

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps