In this post, we will cover 9 Ways You Can Use React in 2022 to build applications. These can range from video stream services to text editors.

The first obvious (but most important) one on the list are web applications. React.js is one of the most popular JavaScript libraries used in the web development community because of its ability to create dynamic and robust user interfaces in a declarative style.

The great thing about React is that it is unopinionated and because of that there is a wide range of possibilities you can do to with it in the way 

In case you didn’t know of some technologies existing for your use case here is a quick list to help you get started using React today:

 is the most popular framework for building static websites with a strong focus on SEO. It is fast, flexible, and helps you develop web apps using React. It has been continually staying up to date with the latest technologies over the years as well as applying best practices to search engine algorithms that are constantly changing.

 is one of the most popular framework for building hybrid static & server rendered web applications which also uses React.

If you ever wanted to develop your own command line application in JavaScript by using React, you can right now!

 is a popular JavaScript library for creating component based user interfaces on the command line. To make this possible they use Yoga to build Flexbox layouts in the terminal so most of the CSS properties you would normally use is also available for use right away.

 ready to use and if you want to push further you can create your own ink component and share it with the ink community!

If you ever thought about creating your own desktop application there are a couple of libraries that might be able to help you out.

 is one of the most widely used libraries in the NodeJS community for creating native desktop applications. When you combine react with it it becomes a powerful combination because it makes it fun and easier while still capable of building complex programs!

 is slowly gaining popularity for bringing react directly to the desktop development experience, powered by Qt5.

If you ever decide to go into this path it is worth mentioning some of these libraries that make a great companion to the above:

 provides a set of ready-to-use react components with the goal of bringing a native desktop experience, featuring many Windows 10 and MacOS Sierra components:

 can help route your pages using its HashRouter component for file based environments or BrowserRouter for request based environments. This is great because it allows your users to go to their previously visted steps.

 is another react based component library providing optimized components for building complex data driven interfaces for desktop applications:

You can combine GatsbyJS, NextJS, or literally any other UI framework to use react and build yourself apps that can play videos or even provide a smooth video streaming experience.

First, here are some libraries that can help with playing videos on your web pages:

 is a react component for playing videos from variety of URLs including file paths, YouTube, Facebook, DailyMotion, and others. It is a smart component that loads in the appropriate markup and external SDKs to play media from variuos sources.

 is also another react component for playing videos

 is a react component that allows you to record videos.

 is a react component that can help show the duration progress of videos at their frame borders:

 lets you add real time voice and video chat in your applications. This allows multiple people to join the same chat room and have a Zoom-like experience.

You can combine this experience together to create a video on demand (VOD) experiences for your users.

 can help format and compress your videos for delivery to connected devices or televisions by using a high quality video transcoding technology to create on-demand video assets for any device. It does this using a most recent transcoding technology developed by Apple and Microsoft to unify a format that can be used by all users. You would also have to use S3 to create two buckets (one for input and one for output) then use a function to trigger the pipeline for MediaConvert to store the output. These videos are picked up by the CDN you attach to that bucket and can be streamed by your video players. This sounds like a cool project to use react with!

React serves as great a tool when using it to develop your own cheat sheets due to its component nature. When combined with drag n drop it is almost mother to nature in JavaScript because normally you would have certain notes at certain locations so that you can get the most out of it.

If you wanted to start creating cheat sheets in React, here is a library you can check out:

 is a react library with the purpose of generating cheat sheets using snippets. It uses a drag n drop api to make smooth transitions between snippets and has over 20 themes to decorate your snippets.

I’m sure the majority of you reading this have been using the internet for awhile now, so surely you’ve had hands on experience with text editors before. Turns out they aren’t that simple to create though. But you can quickly get started to build your own in react with a couple of libraries readily available:

 is a library created by the team at Facebook that lets you build rich text editors with… you guessed it: React! It takes some time to get used to but once you start getting it its actually motivating to keep going when you notice progress.

Writing documentations should be easy and straight forward. Fortunately, there are some tools powered by react that help ease things further in a programmatic way.

Docusaurus is a react library that provides an api to build optimized websites quickly and helps you focus more on your content than structuring your pages. It is developed by the engineers at Facebook (now known as Meta). You can write your content in markdown or mdx and docusaurus will then generate static html files that are ready to serve. Combine it with a blazing fast search component like Algolia and you will attain a very happy audience :)

, a great react library for building user interface components and pages in isolation. The cool part about this approach is that its also naturally great at generating documentations if you have multiple components to document:

In modern day technology mobile apps have become one of the most popular and universal technology for seeking information as well as communication with others, so they are all the rage these days.

It’s not too far different in the JavaScript community as you can still commonly see developers developing in mobile apps with react.

 is another library created from the at Facebook that lets you write in react to create native apps for Android and iOS.

Largely known companies like Coinbase, Shopify, Discord and even Walmart all use react native in development.

And that concludes the end of this post! I hope you found this to valuable and look out for more in the future!

8 Ways You Can Use React in 2022

Developers widely use web loaders in asynchronous data fetching processes. They help keep end-users engaged, and increase the user experience.

 as an experimental feature, and it has now revolutionized the web loader integration process. Presently, it is fully fine-tuned and set to be released as a complete feature with React 18.

Thus, this article will guide you through the steps of implementing web loaders using React Suspense.

Before getting into React Suspense implementation, let’s discuss the complexity of implementing web loaders without React Suspense.

Without React Suspense, the process is complex. Accordingly, you need to use state variables to indicate the loading state while using conditional rendering to render the loader/component.

Now, let’s implement a simple React application to have a better understanding of this process.

 library to implement the loader and two directories named src/api and src/components for APIs and components will be created respectively.

To begin with, the fake JSON API will be used to fetch data and it can be accessed with the URL — 

https://jsonplaceholder.typicode.com/posts

const ENDPOINT = "https://jsonplaceholder.typicode.com/posts";export const getPosts = () => {
return fetch(ENDPOINT).then((res) => res.json());
}

Next, create a component named Posts to consume the API and display the output.

import { useEffect, useState, useCallback } from "react";
import { getPosts } from "../api/api";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";export const Posts = () => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(false);
const getPostsFromAPI = useCallback(async () => {
setLoading(true);
try {
const resp = await getPosts();
setPosts(resp);
} catch (err) {
console.log(err);
} finally {
setLoading(false);
}}, []);

useEffect(() => {
getPostsFromAPI();
}, [getPostsFromAPI]);

return (
<>
{loading ? (
<><Skeleton count={10} /></>
) : (
<>
{posts.map((post) => (
<div key={post.id}><span>Title: {post.title}</span><br /><span>Body: {post.body}</span><hr /></div>
))}
</> )}
</>
);
};

In the above snippet, the useEffect Hook triggers the API call when React mounts it onto the DOM. It calls the method getPostsFromAPI() that fetches the API data. There, you can observe a state variable, loading being updated to indicate the progress of the API call.

When the HTML is returned, conditional rendering checks the loading state, and if it is equal to 

If you observe the browser, you can see the skeleton component rendered while the API fetches data. After the data gets fetched, it displays the Posts component.

Figure 01 — Observing the web loader while data loads

Figure 02 — The fetched data rendered onto the DOM

Implementing web loaders in this way is complex and is called 

 because data is not fetched until the component renders on the screen. This in turn creates a 

 flow and increases the application loading time.

Now then, let’s see how React Suspense resolves this complexity and improves performance.

React 18 provides a Suspense component which allows waiting for any asynchronous operation to complete without checking for its progress.

React does this by suspending the component when no data is available, and retrying to render the component until the data flows into it. Upon data flow, React completes the rendering process.

 since React fetches the data as early as possible and starts to render the component while it loads the data.

To understand this behavior, let’s modify the previous example using the Suspense component.

Before starting the implementation, you need to update React to the latest beta version.

Then, you should have a basic understanding of the Suspense component. React expects a component to be wrapped with the Suspense component. It ensures that the wrapped component is suspended until the data is available.

 component wrapped by the Suspense component to throw a promise that will read the data.

When this promise gets thrown, React suspends the component and executes the 

 mechanism. In our case, we load the Skeleton as the fallback.

React retries to render the component until data is ready, and once prepared, it displays the data.

Step 1. Throw a Promise that loads the data.

First, a new method is required to help throw the promise while loading the data.

In the above example, wrapCallInPromise() method accepts a promise, and checks its response and error. Two variables are declared to handle the state and the outcome.

status: This handles the state of the action, and React expects the values to be "success," "error," or "pending." "pending" informs React that the action is currently executing and the component must be suspended.

result: This contains the outcome, the data/ error returned.

wrapCallInPromise() method returns an object with a method readData() , and React Suspense uses it to suspend the component. You can observe that when data is loading 

, the suspender is thrown, informing React to suspend the component. When data is fetched 

, the result is returned allowing React to render the component.

This method is then invoked when getPosts() is executed. And the asynchronous call is wrapped using this method so that the suspender can be thrown.

export const getPosts = () => {
return wrapCallInPromise(fetch(ENDPOINT).then((res) => res.json()));
};

Step 2. Integrate React Suspense and display the fallback UI.

After updating the API, you can add the React Suspense component. First, the Suspense component needs to be imported from React.

This component is placed over the child component. Therefore, the Posts component will be wrapped using the Suspense component.

The updated App component is shown below.

import "./App.css";
import { Posts } from "./components/posts";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { Suspense } from "react";
import { getPosts } from "./api/api";const resources = getPosts();function App() {
return (
<div>
<Suspense fallback={<Skeleton count={10} />}>
<Posts resources={resources} />
</Suspense>
</div>
);
}
export default App;

The resources prop is passed to the Posts component to access the data returned from the asynchronous API call while the Skeleton loader is used as the fallback prop.

Now, you can remove the Hooks and conditional rendering from the Posts component and replace it with a single line that invokes the readData() method.

The code for the updated Posts component is shown below.

export const Posts = (props) => {
const { resources } = props;
const posts = resources.readData();
return (
<>
{posts.map((post) => (
<div key={post.id}>
<span>Title: {post.title}</span>
<br />
<span>Body: {post.body}</span>
<hr key={post.id} />
</div>
))}
</>
);
};

The above code will render the component only when data is ready. The method readData() will throw the suspender when the API fetches data causing React to suspend the Posts component and render the fallback component.

The output for the updated code is shown below.

Figure 03 — Observing the Web Loader with React Suspense

Figure 04 — Observing the data fetched from API after loading

As you have already seen in figures 03 and 04, React Suspense generates the same output but with cleaner, more effective code.

Using conditional rendering by avoiding all if(loading)checks.

React Suspense helps maintain clean, bug-free, scalable, and readable code to support design growing applications.

Tip: Build & share independent components with Bit

If you want to create re-usable web loaders in your web application, try 

 is an ultra-extensible tool that lets you create 

 authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.

In this article, we have discussed the importance of React Suspense and how it provides a very simple approach to implementing web loaders. You can find the complete code of the example used, in my 

I do hope you have found this article very useful. Thank you for reading.

Provide Web Loaders to your application efficiently

About

Contact

Follow

Out Story

Membership

Write

Sign In

Get Started

Medium is a place to write, read, and connect

It's easy and free to post your thinking on any topic and connect with millions of readers.