GUIDE

How to Build Apps with React Components

We’re excited to share the recent beta release of React Chat Components! We’ve made it even easier to add essential features to your application, all while reducing your time to market. Continue reading to learn more, and sign up below.

What is React?

React is a powerful Javascript library that is used for building user interfaces (UI). It is also known as Reactjs.

React describes itself as “declarative, efficient, and component-based”, and it efficiently helps you to create the UI components for your web and mobile applications.

How do React components and libraries work?

React’s main application is working with state management and rendering objects to the DOM. The state of components determines how they will render and display, which is critical to good UI design. It is possible to build a web application using only React components, but to unlock the full power of React and have a full framework, it is necessary to include other backend libraries, like React Native or React Navigation.

React is extremely popular because it is open-source and comprehensive. There is a supportive community of developers and companies that maintain the library, as well as thousands of tools, component libraries, tutorials, and more. Most developers, especially frontend developers, are already familiar with Javascript, so there is only a slight learning curve to become familiar with React. 

Because React is so popular and makes it easy to create reliable, dynamic, and scalable solutions for in-app chat, virtual spaces, and more— at PubNub, we have invested in building out a  library of modular UI and chat React components

In the following guide we will discuss the basics of React, the major benefits of building with React components, and how they can be used to optimize your applications for speed and scalability. We also share the main features and benefits of using our own React components to build completely custom, reliable, and scalable in-app chat.   

A brief React 101 tutorial

React is one of the most powerful front-end libraries available. It combines rendering logic with other facets of UI logic, which makes it straightforward and efficient to use. It works on the idea that markup and logic can be grouped together into sections, which we call components, based on goals or specific concerns. 

React is only concerned with state management and rendering to the DOM. Because they are only concerned with user interfaces and not being an entire application library, when creating React apps, it is necessary to use other tools for certain functionalities. An example would be using Node.js as a server environment. 

React is fast and scalable, which is ideal for applications that need to run in real time. It uses a Virtual DOM and an efficient diff algorithm to optimize speed, because it minimizes recalculations that have to be run on the real DOM. React also supports server-side rendering (SSR), which is faster than rendering on the client side or in the browser. Its component-based structure allows developers to easily build onto and maintain their applications. 

What do you need to use React component libraries?

React works off of Javascript and the DOM, and it is used in designing interfaces. To get the most out of React, it can be helpful to make sure you are familiar with the following things:

  • Basic HTML and CSS

  • Basic Javascript

  • The DOM

  • Javascript ES6 Syntax

  • Node.js 

  • GitHub

Basic knowledge of all of the above will make it easier to understand and use React successfully.

JSX and React Components

JSX is a syntax extension of Javascript that allows you to write HTML directly into React templates. In web development, it is generally good practice to separate the HTML file from the JS file for better performance and easier changes. But React suggests that using JSX with their platform will provide optimal results. JSX makes it simpler to build the components by using some HTML elements to help render React elements.

JSX is used to write what the UI will look like, and can be a helpful visual aid. It can also be faster than using regular Javascript, because it performs optimizations when translating. 

React shares this Babel REPL to quickly show the difference in code snippets written in JSX vs. Javascript. Babel is also a useful tool with React applications, because it converts ES6 syntax to be compatible with older browsers, allowing you to use the most up-to-date Javascript features.

JSX is used to create React elements, and also makes it easier to create templates. When it is compiled, JSX expressions become JavaScript function calls, and they evaluate to JavaScript objects.

What are React components?

React components are reusable pieces of code. They let you split the UI into different pieces, which makes it easier to isolate sections and think about each part separately. This makes building the application easier overall. React components are made up of elements. An element is a block of code that describes how you want something to look.

Components are fully encapsulated and can manage their own state separately. They can then be combined to create more complex UIs. React component logic is written in Javascript, which means that you can easily pass rich data (like JSON files) through your application.

In essence, React components are like using bricks to build a structure. Sure, you could make your own bricks by hand from clay, but it is much simpler and more efficient to use ones that have already been made in a factory. That’s like the difference between using React component libraries or writing the code for your UI from scratch.

Components are great tools for building applications because they are so efficient and easily reusable. Their compartmentalization allows for React applications to be fast, scalable, and simple. For example, updates can be made to a component without affecting any of the others. This allows for developers to build large-scale applications and update specific data without needing to reload the whole app. 

Functional React components

Another way to define components is as a Javascript class or function that returns a React element, in which the element makes up a section of the greater UI. React lets you define components as functions or classes. 

Functional React components are called such because they are literally Javascript functions. An example would be writing a Javascript function that accepts a single “props” object argument with input data, which then returns a React element that describes what you should see on the screen. 

Functional components are stateless; they do not hold or manage state. They are often referred to as presentational components, because all they do is output (or present) UI elements.

React class components

React class components are created using ES6 class syntax. A class component has more features - it requires you to extend from React and render information. In addition to acting as a function that takes input and returns an element, class components also consider internal private states as input.

These components are stateful, because they have the ability to hold logic, state, and more within them. A “state” is an object that determines how the component renders & behaves. A component’s state is what allows it to be dynamic and interactive.

Class components can also be referred to as containers, because they can hold numerous other functional components within them. They require a lot of additional markup, so it is usually best to use a functional component, unless you specifically need to accomplish one of the following tasks:

  • Managing local state

  • Adding logic for event handlers

  • Adding lifecycle methods for your component

Using too many class components when it is unnecessary can have negative effects on performance, readability, maintenance, and testing.

Use PubNub’s React components to build great chat applications

PubNub specializes in enabling developers to build fully-featured chat solutions, so it makes sense that we have created a comprehensive library UI and chat React Components to ensure an easier building experience and faster time to market for developers who build with us. These components are now available as a beta release, so if you'd like to be a tester and have the opportunity to provide feedback, check out our docs for more detailed descriptions of the implementation process, along with best practices.

PubNub React component library

Working with PubNub and using our pre-built components will significantly save you dev time, money, and labor, all while making it easier to scale and grow your application. There’s no need to build additional components or basic architecture, when we’ve already done the work for your React application needs.

Using our components library is one of the best ways to add features to your chat without dealing with the complexities of the low-level infrastructure. Some key benefits to using our React chat components when building with PubNub include:

  • Reduced implementation time: You can quickly develop production-ready apps with drag-and-drop components.

  • Rich chat features: These components enable features like typing indicators, read receipts, reactions, and more without you having to write complex code.

  • Flexibility and customizability: Customize component design and add custom components to extend functionality.

  • Scalability: In regular PubNub fashion, these components have no concurrency limits, which means you can grow your chat quickly and reliably as-needed. We have made it easy to implement and change additional features as your use case, users, and monthly usage expand.

  • UX themes: There are built-in light and dark themes for various use cases like group, support, and live event chats. There is extra customization available with CSS variables.

We include all of the necessary features to build a great chat experience with our reusable components, such as:

  • User and channel metadata: fetch metadata about users, channels, and memberships from PB Objects storage using custom hooks.

  • Subscriptions: automatically subscribe to the current channel, with optional subscriptions to other channels and groups.

  • Messages: publish and listen to text messages, and fetch history for each channel.

  • Presence: fetch present users, listen to new presence, and publish presence events.

  • Typing indicators: display typing indicators as text notifications or messages.

  • Message reactions: publish and display message reactions (like emojis) for each message.

With these React components, you have the base to build any type of chat available, like live event chat lobbies, multiplayer in-game chat, or a HIPAA-compliant doctor-patient chat. The design, features, and use case can then be customized to fit your needs.

Example tutorial for building React applications

React is an open-source platform with a lot of great documentation and sources available on the subject. React’s official website includes many in-depth tutorials that are extremely helpful in getting set up and learning how to create and run React apps. Their tutorials range from building a simple “hello, world!” application to building an in-browser game.

Our team has also written and provided many great tutorials for building chat applications in React. Check out some of them below:

We’ve also built out a sample chat app with PubNub’s React components, and provided the GitHub REPO

If you are interested in building with PubNub after exploring our React components and tutorials above, contact sales here to get started.