DEV Community: Subhampreet Mohanty 👨‍💻

8 JavaScript Animation Libraries You should "MUST TRY"

Subhampreet Mohanty 👨‍💻 — Tue, 09 Feb 2021 05:42:47 +0000

If you're looking to grab your website visitor's attention, what can be better than animations.

You know, the first moments to hold the user's feet are very important. A boring, poor website can make users jump out of it right away.

Let's see some awesome JavaScript Animation Libraries that can help you to create amazing web animations.

⚡ Introduction

Animating with JavaScript libraries is more efficient and advanced compared to SVG and CSS. In today’s world, JavaScript is an essential language because of the magic it does while animating.

Animations using JavaScript is a complex task to perform. It needs an extensive amount of knowledge and skills.

🍀 Prerequisites

JavaScript Animation Libraries is an exciting and interactive topic. Therefore, I recommend the reader to have a basic understanding of HTML, CSS, and JavaScript.

🌟 JavaScript Animations

Animations on web applications are appealing and grab the user’s attention. JavaScript can animate what CSS can’t. JavaScript is the preferred tool of use because it handles more complex and advanced effects.

There are several JavaScript animation libraries. Here is a list of the best JavaScript animation libraries you can use in your project.

01. ANIME.JS

There are many JavaScript animation libraries out there, but Anime.js is one of the best. It’s easy to use, has a small and simple API, and offers everything you could want from a modern animation engine. The library has a small file size and supports all modern browsers, including IE/Edge 11+.

02. GSAP

GSAP is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch!

GSAP's ScrollTrigger plugin lets you create jaw-dropping scroll-based animations with minimal code. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on millions of sites. GSAP works around countless browser inconsistencies; your animations just work. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery!

03. MO.JS

mo.js is a javascript motion graphics library that is a fast, retina-ready, modular, and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way. Using mo.js on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

04. POPMOTION

Popmotion gives the power of JavaScript merged with the simplicity of CSS to make declarative animations easily on your HTML, SVG, and React projects. Its API implement semantics to make easier work with different JavaScript flavors and propose a library of custom animation to enhance your workflow pace.

05. THREE.JS

Three.js is a lightweight and user-friendly JavaScript 3D animation library. It makes it easy to come up with 3D content on a web page. Three.js uses WebGL (Web Graphics Library) to draw 3D animations.

WebGL is a JavaScript API for rendering interactive 3D graphics. It creates a scene with a camera and a geometric cube. A WebGL renderer is created for the scene and the camera.

06. KUTE.JS

A modern JavaScript animation engine built on ES6+ standards with the most essential features for the web, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance, and size.

KUTE.js packs a series of components for presentation attributes, SVG transform, draw SVG strokes, and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius, or typographic properties.

07. SCROLL REVEAL

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully, you’ll be surprised below at how easy it is to pick up.

08. HOWLER.JS

Howler.js is an open-source JavaScript audio library. It’s used in game development and audio-related web apps. Howler.js makes coding easy while working with audio in JavaScript on web platforms.

It lays out a modern audio library supporting the Web Audio API and a fallback technique for HTML5 Audio.

Howler.js supports all browser-ready files from MP3, MP4, DOLBY, MPEG, WEBA, OGG to WAV. The library controls audio patterns by playing, pausing, looping, and seek to rate. Loaded audios are cached automatically, resulting in a more excellent performance.

Conclusion 👋

There are many JavaScript animation libraries that can be implemented on your projects. Those listed above are a few with the best combination of complexity, ease, and stability. Each animation library differs from others and each fit different situations.

Let’s suppose you are looking for a powerful animation. The best JavaScript library options to go for is Anime.js, Velocity.js, GreenSock.js, and Popmotion.js.

If you are looking for an audio library, the best option is Howler.js. If you want 3D animations, the best JavaScript animation to use is Three.js.

If you are looking for a JavaScript animation library great for creating typing animations used on webpages, then Type.js is the best option.

Although using a JavaScript animation library makes your web application stand out. Overdoing it beats the purpose and often confuses the user. Be careful and sensibly use animations.

React Hooks - Chapter 1

Subhampreet Mohanty 👨‍💻 — Sat, 05 Dec 2020 06:46:08 +0000

If you are a beginner in React and are using classes all-around in your code then you probably would have noticed that sometimes it's not easy to keep track of your states, how to update them, how to render them, etc. For me, particularly, I was overwhelmed by the 'this' keyword.

'this' here, 'this' there…
It wasn't a very pleasant experience. But no worries. Hooks to the rescue!

In this post, I'll explain why Hooks is so much easy to understand and how it can make your code more readable than it was before. I'm also going to introduce you to some of the awesome React Hooks out there❤!

🤔 What are Hooks anyway?

Before diving into some examples, it is important to explain this concept first. A hook is a function that can let you inside a React state and lifecycle features (accordingly to the React Documentation, a hook let you 'hook into' a React state).

If you worked with a function in React before, sometimes you had the need to add some state to it. Before Hooks, you had to convert this function to a class (enabling you to use State and setState()). With Hooks, you can achieve the same result in a functional component.

React Hooks let you use state, and other React features without having to define a JavaScript class. It’s like being able to take advantage of the cleanliness and simplicity of a Pure Component and state and component lifecycle methods. This is because Hooks are just regular JavaScript functions! This lends itself to cleaner and less clunky code.

The code's also a lot more readable, which is a massive advantage of Hooks. For beginners who are just getting started with React, it’s easier for them to read the first block of code and easily see exactly what’s happening. With the second block, we have some extraneous elements, and it’s enough to make you stop and wonder what it’s for.

Another great thing about hooks is that you can create your own! This means that a lot of the stateful logic we used to have to re-write from component to component, we can now abstract out to a custom hook — and reuse it.

❓ Why Hooks

We know that components and top-down data flow help us organize a large UI into small, independent, reusable pieces. However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. Sometimes that’s what people mean when they say React doesn’t let them “separate concerns.”

These cases are very common and include animations, form handling, connecting to external data sources, and many other things we want to do from our components. When we try to solve these use cases with components alone, we usually end up with:

Huge components that are hard to refactor and test.
Duplicated logic between different components and lifecycle methods.
Complex patterns like render props and higher-order components.

We think Hooks are our best shot at solving all of these problems. Hooks let us organize the logic inside a component into reusable isolated units.

Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components. That’s why I feel that Hooks are a natural fit for the React component model.

Unlike patterns like render props or higher-order components, Hooks don’t introduce unnecessary nesting into your component tree. They also don’t suffer from the drawbacks of mixins.

📌 Rules for using Hooks

Before we create our own Hook, let's review a few of the major rules we must always follow.

Never call Hooks from inside a loop, condition, or nested function
Hooks should sit at the top-level of your component
Only call Hooks from React functional components
Never call a Hook from a regular function
Hooks can call other Hooks

📎 Referances

Conclusion ❤

Using hooks helps us in improving our design pattern of our code and performance of our app, and I encourage you to use it in your projects too. Class Components are not getting obsolete so one doesn’t need to rewrite Class Based Components using Hooks. Please reach out to me for any queries regarding this.

Hope you find this article useful. Happy Reacting ❄ !

Everything you need to know before you Open Source 🚀

Subhampreet Mohanty 👨‍💻 — Tue, 17 Nov 2020 13:44:29 +0000

Getting Started with Open Source ❤

If you are here reading this article, it means you at least have an idea about Open Source. This article aims to be a launchpad for developers and programmers who still don’t contribute to the Open Source community but want to. It will talk about the How and the Why aspect of Open Source contribution.

As you probably have known that open source has changed the face of the software industry and the modern computing world in general and will continue to do the same in the future. The Open Source community has tons of awesome developers still it requires your contribution because every drop counts. It does not matter if it is a small contribution or something substantial. Everybody starts like that and soon as you contribute more and more you will become an expert too.

A journey of 1000 miles starts with a single step ⚡!

What is open-source software⚡?

Open-source software is software with source code that anyone can inspect, modify, and enhance.

"Source code" is the part of the software that most computer users don't ever see; it's the code computer programmers can manipulate to change how a piece of software—a "program" or "application"—works. Programmers who have access to a computer program's source code can improve that program by adding features to it or fixing parts that don't always work correctly.

What are Open source projects🌍?

Open source projects have given birth to a range of useful software over the years. Many of the great technologies that we use today were born out of open source development! Android, Firefox, VLC media player, MongoDB, Linux, Docker, and Python just to name a few.

Even many of the tech giants realize the benefit and allow their employees to take a day off and dedicate their time to open source projects. In fact, many have open-source projects themselves.

However, the large majority of contributors to open source projects don’t work for tech giants; anyone can leave their mark on an important piece of open software or create their own “next big thing”. Being part of an open-source project can also help you improve your skills, learn something new, get mentorship, or form life long friendships. Contributing to open-source projects should be mutually beneficial in both the short and long term. Many companies actively hire full-time developers from those contributing the most to a project, and so doing so can be a great way to show off your skills, while learning new ones.

Why to Open-Source🤔?

Imagine this scenario — you’re working on a project and you find something just isn’t working or is possibly even missing? What do you do? The majority of people will move on. A few will even flag up these issues with the toolmakers and EVEN fewer will be the ones who step forward and build that new tool that helps everyone.

Who do you think is the hero/heroine in that scenario? It’s that person who steps up and takes charge of the situation and from their efforts receives new knowledge, improves the wider ecosystem for all developers AND all the glory.

Contributing to an open-source project helps to improve it based on real-world experience and proven, working solutions
Contributing to an open-source project helps you gain a much deeper knowledge about the software
Contributing to open source project helps your reputation and can leverage your career
Contributing to open-source projects you are using in your projects lets you better deal with potential risks and plan for the future
Contributing to open-source projects is fun and gives you personal satisfaction 😊

Contributing to open-source projects can be a lot of fun, though challenging at first. While in personal projects one may be in the position to act quickly, but when it comes to design or architectural decisions, there may be a lot more discussions in open source projects. The best projects attract the best people, so while contributing to such projects, one gets in touch with strong decision-makers and very talented developers. It may be hard to convince them of one's solution, the design one has chosen, or the usefulness for others. However, doing so successfully thus gives you a much higher personal satisfaction than you may have expected.

Pre-requisites to Open Source 🎈 :

Open source contribution requires one to know basic git commands and also knowing how to navigate your way on Github. Here are all the pre-requisites on must know to be an open-source contributor:

The Hello World project is a time-honored tradition in computer programming. It is a simple exercise that gets you started when learning something new. And now, you are all set to go "Hello, World!" in Github.

Make your first Contribution 🐱‍👤

1) Get yourself a GitHub account🔗

Most open-source projects are hosted on GitHub, which is a website for sharing and saving code. Anyone can make a GitHub account for free. Paid accounts are only necessary if you want some of your code to be private.

2) Find a project that is open to pull-requests and issue to work on 🔍

A set of files for a project is called a Repository, and Issues are where people ask for help fixing things. If you haven’t picked out a project to work on. Contributing to open source isn’t just about hardcore coding — there’s plenty of work to be done on public websites for the project (like CSS and HTML) or documentation that will help out other developers. For your first contribution, pick something small.

When you’re new to a project, it’s a good idea to comment on an issue that you want to help with. To see the Issues, click on the tab for it. Many open-source projects use tags like “Good for new contributors” or “help wanted” to indicate which Issues might be best to jump in on.

3) Read the guidelines for contributing 📃

Look for a CONTRIBUTING.md file in the root of the project’s repository. Read the document thoroughly. This document will often provide you with instructions on how the project accepts contributions, direct you to the code of conduct, and tell you how to report bugs or troubleshoot.

4) Fork the Repository and Clone the Project into your system 📎

5) Open a pull-request 📌

Write your code on a new, descriptively-named branch. Feel free to open up a pull-request (PR) early. You should link your PR to the issue you’re working on by referencing the issue number in your PR. Make sure that your PR has a descriptive title.

As you work on the issue, you can ask for changes to be reviewed by the project’s reviewers via the open PR. Some projects will also have continuous integration testing that runs on all PR code. This feedback allows you to make changes to your code as you go. Again, you will want to defer to the guidelines and practices of the particular project you are working on.

6) Get your first Open Source contribution merged into the project’s codebase 🎉!

If everything goes well, you will work with the project’s reviewers until your code is acceptable and ready to be merged into the project’s codebase. Sometimes, the reviewers will choose not to accept your code or implement the change that your pull-request proposes. If that happens, don’t be discouraged. Consider whether there is another issue that is a better fit for your skills and the project’s priorities at this time, or explores some other projects that are open to first-time contributions.

Conclusion👋

Contributing to open-source software is a great way to give back and gain experience collaborating with other developers. It may take a little bit of trial-and-error to find the best way to put your skills to use, but there is a place in OSS for everyone.

If you find this post useful share it with your peers or beginners who want to start an open-source contribution. Happy Coding and Contributing ❤!

Reacting to React | A Beginner's Guide to React JS 🔥

Subhampreet Mohanty 👨‍💻 — Sun, 09 Aug 2020 12:15:33 +0000

Hello Amigos 👋!!!

React or React JS is a JavaScript front-end library from Facebook which lets you create HTML based GUI. It makes the task easier by providing a component-based architecture that was only available to languages like Java and C# before.

Because of this awesome feature, React is quickly becoming the standard JavaScript library for developing front-end. That’s the reason many programmers and developers are learning React or React JS.

But, the big question is how do you learn React? Where should you start? Honestly, I wasted a lot of my time searching for the best material to get started. Watched Tons of youtube videos never completed one, because I was not aware of the fundamental prerequisites of React JS.

In this article, I'm going to take you through the journey of how I started with React JS from just knowing HTML, CSS, and JavaScript(vanilla).

This article is a bit long, but believe me, after completing you'll get started with React JS right away.

Happy Learning ✌!!!

What is React?

React is a front-end library developed by Facebook. It is used for handling the view layer for the web and mobile apps. ReactJS allows us to create reusable UI components.
Unlike AngularJS, React is not a framework, rather it is an open-source library created by FACEBOOK.
React allows developers to create/compose large web applications with complex UIs from small and isolated pieces of code called “components” which can change data, without reloading the page.

Pre-requisites :

If you want to work with ReactJS, you need to have a solid knowledge of JavaScript, HTML5, and CSS. Even though ReactJS doesn't use HTML, the JSX is similar so your HTML knowledge will be very helpful.

Why ReactJS?

In traditional web application programming, for even a small change in the webpage, the whole page is reloaded. This makes the web pages slower than they should be.

However, ReactJS solves this problem by only updating what’s necessary.

React Features :

JSX: JSX is JavaScript syntax extension. JSX is simple JavaScript which allows HTML quoting and uses these HTML tag syntax to render subcomponents. It isn't necessary to use JSX in React development, but but JSX makes React a lot more elegant.
Components: React is all about components. You need to think of everything as a component. Components let you split the UI into independent, reusable pieces.
Uni-Directional data flow and Flux: React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

Advantages of using React :

It uses virtual DOM which is a JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
It can be used on the client and server-side as well as with other frameworks.
Components and data patterns improve readability, which helps to maintain larger apps.

Create React App :

Before moving further, let’s set up our code. Make sure you have the latest LTS version of Node and npm installed. We’ll use React CLI to help us set up projects easily and run our app using a built-in development server. Create React App comes prefigured with a webpack, along with a plug-in system to run tools like Babel. First, we need to install React CLI. Head over to your terminal then type:

npm install react.cli -g command will install React CLI globally on your system, and create-react-app sets up a new React project. A project named first-app with some files inside it gets created at the required destination. npm start runs the project in a development server on localhost:3000.

The React project file structure should look something like:

All the JavaScript we create will go into the src folder. The React logo on the screen is rendered through App.js where we are outputting the logo.svg. Let’s get rid of these files. Delete App.css (this is just a local CSS file for App.js), App.test.js (you won’t need it for quite a few days), and logo.svg. Now lets head over to App.js and type the below code into it.

Now if you go back to the localhost:3000, you’ll see “Hello, React!”. We have the beginnings of a React app now.

What is JSX and Rendering in React?

JSX :

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, the following are the advantages that come with it:

It is faster because it performs optimization while compiling code to JavaScript.
It is also type-safe and most of the errors can be caught during compilation.
It makes it easier and faster to write templates if you are familiar with HTML

The following code in App.js renders "Hello, World!!!" on the screen.

JavaScript expressions can be used inside JSX. We just need to wrap it with curly brackets {}. The following example will render 2.

Know more about JSX at JavaScript XML-JSX.

Rendering in React :

React element is the smallest renderable unit available in React. We can render such elements using the ReactDOM. React elements are different from DOM elements as React elements are simple javascript objects and are efficient to create. React elements are the building blocks of any React app and should not be confused with React components.

Elements are the smallest building blocks of React apps.
An element describes what you want to see on the screen.

Let’s say there is a "div" somewhere in your HTML file.
Eg:

We call this a “root” DOM node because everything inside it will be managed by React DOM.
The following code displays “Hello, React” on the page.

Know more about Rendering Elements in React at JavaScript XML-JSX.

Components in React :

React is designed around the concept of reusable components. You define small components and you put them together to form bigger components.

Every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.

All components small or big are reusable, even across different projects.
The component name starts with a capital letter. This is required since we will be dealing with a mix of HTML elements and React elements. Lowercase names are reserved for HTML elements. In fact, go ahead and try to name the React component just “button” and see how ReactDOM will ignore the function and renders a regular empty HTML button.
Every component receives a list of attributes, just like HTML elements. In React, this list is called props. With a function component, you can name it anything though.

Components in React basically return a piece of JSX code which tells what should be rendered on the screen. In React we mainly have two types of components:

i) Functional Component or Stateless Component:

It is simple javascript functions that simply returns html UI
It is also called “stateless” components because they simply accept data and display them in some form that is they are mainly responsible for rendering UI.
It accept properties(props) in function and return html(JSX)
It gives solution without using state
There is no render method used in functional components.
These can be typically defined using arrow functions but can also be created with the regular function keyword.

ii) Class Component or Stateful Component:

It is regular ES6 classes that extends component class form react library
Also known as “stateful” components because they implement logic and state.
It must have render() method returning html
It has complex UI Logic
You pass props(properties) to class components and access them with this.props

For now, keep in mind that we will use functional component only when we are sure that our component does not require to interact or work with any other component. That is, these components do not require data from other components however we can compose multiple functional components under a single functional component. We can also use class-based components for this purpose but it is not recommended as using class-based components without need will make your application in-efficient.

To render a component in React we can initialize an element with a user-defined component and pass this element as the first parameter to ReactDOM.render() or directly pass the component as the first argument to the ReactDOM.render() method.

Let us see step-wise what is happening in the above example:

We call the ReactDOM.render() as the first parameter.
React then calls the component Welcome, which returns Hello World! as a result.
Then the ReactDOM efficiently updates the DOM to match with the returned element and renders that element to the DOM element with id as “root”.

Know more about components and props at Components in React JS.

props and state in React JS:

What are props?

Props are short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).

How do you pass data with props?

Firstly, we need to define/get some data from the parent component and assign it to a child component’s “prop” attribute.

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re giving an argument to a function:

And finally, we use dot notation to access the prop data and render it:

What is state?

React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally.

How do you update a component’s state?

State should not be modified directly, but it can be modified with a special method called setState( ).

What happens when state changes?

A change in the state happens based on user-input, triggering an event, and so on. Also, React components (with state) are rendered based on the data in the state. State holds the initial information.

So when state changes, React gets informed and immediately re-renders the DOM – not the whole DOM, but only the component with the updated state. This is one of the reasons why React is fast.

And how does React get notified? You guessed it: with setState( ). The setState( ) method triggers the re-rendering process for the updated parts. React gets informed, knows which part(s) to change, and does it quickly without re-rendering the whole DOM.

State shouldn’t be modified directly – the setState( ) should be used
State affects the performance of your app, and therefore it shouldn’t be used unnecessarily

props vs state

Components receive data from outside with props, whereas they can create and manage their own data with state
Props are used to pass data, whereas state is for managing data
Data from props is read-only, and cannot be modified by a component that is receiving it from outside
State data can be modified by its own component, but is private (cannot be accessed from outside)
Props can only be passed from parent component to child (unidirectional flow)
Modifying state should happen with the setState( ) method

Know more about component state at Components state in React JS.

Lifecycle of Components:

React component lifecycle executes in three different intervals/phases. These three phases are Mounting, Updating, and Unmounting. Within these phases, there are methods called Lifecycle hooks that happen in a particular order.

A React Component can go through four stages of its life as follows.

Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
Updating: Updating is the stage when the state of a component is updated and the application is repainted.
Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

Mounting or Initial phase

constructor( )
componentWillMount( )
render( )
componentDidMount( )

Updating phase

componentWillReceiveProps( )
shouldComponentUpdate( )
componentWillUpdate( )
render( )
componentDidUpdate( )

Unmounting phase

componentWillUnmount( )

Functions of each Phase of Lifecycle

Initialization: In this phase, the developer has to define the props and initial state of the component this is generally done in the constructor of the component. The following code snippet describes the initialization process.

Mounting: Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. Now React follows a default procedure in the Naming Conventions of this predefined functions where the functions containing “Will” represent before some specific phase and “Did” represent after the completion of that phase. The mounting phase consists of two such predefined functions as described below.

componentWillMount() Function: As the name clearly suggests, this function is invoked right before the component is mounted on the DOM i.e. this function gets invoked once before the render() function is executed for the first time.
componentDidMount() Function: Similarly as the previous one this function is invoked right after the component is mounted on the DOM i.e. this function gets invoked once after the render() function is executed for the first time.

Updation: React is a JS library that helps create Active web pages easily. Now active web pages are specific pages that behave according to its user. For example, let’s take the GeeksforGeeks {IDE} webpage, the webpage acts differently with each user. User A might write some code in C in the Light Theme while another User may write a Python code in the Dark Theme all at the same time. This dynamic behavior that partially depends upon the user itself makes the webpage an Active webpage. Now how can this be related to Updation? Updation is the phase where the states and props of a component are updated followed by some user events such as clicking, pressing a key on the keyboard, etc. The following are the descriptions of functions that are invoked at different points of Updation phase.

componentWillRecieveProps() Function: This is a Props exclusive Function and is independent of States. This function is invoked before a mounted component gets its props reassigned. The function is passed the new set of Props which may or may not be identical to the original Props.
setState() Function: This is not particularly a Lifecycle function and can be invoked explicitly at any instant. This function is used to update the State of a component.
shouldComponentUpdate() Function: By default, every state or props update re-render the page but this may not always be the desired outcome, sometimes it is desired that on updating the page will not be repainted. The shouldComponentUpdate() Function fulfills the requirement by letting React know whether the component’s output will be affected by the update or not. shouldComponentUpdate() is invoked before rendering an already mounted component when new props or state are being received. If returned false then the subsequent steps of rendering will not be carried out. This function can’t be used in case of forceUpdate(). The Function takes the new Props and new State as the arguments and returns whether to re-render or not.
componentWillUpdate() Function: As the name clearly suggests, this function is invoked before the component is rerendered i.e. this function gets invoked once before the render() function is executed after the updation of State or Props.
componentDidUpdate() Function: Similarly this function is invoked after the component is rerendered i.e. this function gets invoked once after the render() function is executed after the updation of State or Props.

Handling Events in React JS

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

React events are named using camelCase, rather than lowercase.
With JSX you pass a function as the event handler, rather than a string.

For example, the HTML:

is slightly different in React:

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:

In React, this could instead be:

Here, e is a synthetic event. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility.

When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.

Know more about Event Handling in React and passing arguments to it at Handling Events-React.

Conditional Rendering in React

While developing an application in React or any other JS library/ framework, it is a common use case to show or hide elements based on certain conditions. It can be a simple user interaction — say, we need to show a popup when a user clicks a certain button and hide it when (s)he clicks the cross icon. To quote another example, think authentication — we make a ‘log out’ button visible when (s)he is logged in and make ‘Login/Sign up’ form visible for the opposite situation. This process of executing logic or rendering UI elements basis certain conditions is called conditional rendering.

Conditional rendering in React can be carried out using the following methods:

if/else
Ternary operation
Inline IF with Logical && operator
Switch case operator
Higher-Order Components

if/else

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if, and let React update the UI to match them. We use an if with our condition and return the element to be rendered.

The LoggedStatus component displays either of these components depending on whether a user is logged in or not. A different greeting is rendered depending on the value of isLoggedInprop.

Ternary operation

The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.
When condition evaluates to true, the operator returns “This is True”; otherwise (when the condition is false) it returns “This is False”.

Implementation in React JS:

Consider this use case — Show an “Update” button when an edit has been made, else, show the “Edit” button.

In the above example, when “edited” is true, we’ll show the “Update” button to the user. If “edited” is false, the “Edit” button is rendered.

Inline If with Logical && Operator

&& is a boolean operator, which essentially means “and”. For the condition to evaluate to true, both of the statements must be individually true.
Below is an interesting example. Let’s say we want to render a message saying “You have X tasks to do”. When there are no pending tasks, no message should be displayed.

Observe carefully — When the length of the array is 3 (which is > 0), we’ll print, “You have 3 Tasks to do.” If the length is 0, we print nothing.

Switch Case operator in React

We can write switch case inline just like normal Javascript for conditional rendering in React. However, you would need a self-invoking JavaScript function.

Note carefully though that you always have to use default for the switch case operator since, in React, a component always needs to return an element or null.

To make it cleaner, we can get the switch out of the render in a function and just call it passing the params we want.

The switch case operator helps us to have multiple conditional renderings.

Higher Order Components

Higher order components or HOCs are often considered a difficult pattern to grasp in ReactJS. HOCs can be used for multiple use cases, however, in this article, we’ll be picking up HOC for conditional rendering.

HOCs are a perfect match for conditional rendering in React and can have several use cases. One of them can be to alter the look of a component. To make it more specific, it can be used to conditionally render the component itself.

In the above example, the List component can focus on rendering the list. It doesn’t have to bother about a loading state. Ultimately, we could add more HOCs to shield away multiple conditional rendering edge cases.

Building and Deploying a React App

Everything we’ve learned so far has been in a development environment. We’ve been compiling, hot-reloading, and updating on the fly. For production, we’re going to want to have static files loading in and none of the source code. We can do this by making a build and deploying it.

Now, if you just want to compile all the React code and place it in the root of a directory somewhere, all you need to do is run the following line:

This will create a build folder that will contain your app. Put the contents of that folder anywhere, and you’re done!

Know more about Building and Deploy at React Build and Deployment

Thank You for giving this a read!!! Hopefully, this quick overview helps you ease into the world of React and provides you a bit of guidance for your initial journey. Happy Coding!