Image for post
Image for post

GSAP or GreenSock Animation Platform is a JavaScript animation library that helps you to create fast and silky smooth animations for your interface. It provides simple APIs that grants you full control over your animation sequences, but easy enough to understand and use for simple animations

This tutorial will show you two things:

  • How to use GSAP in React for simple animations
  • How to create reusable animation components with React and GSAP. These components will then be exported to Bit’s virtual monorepo, to make them available to other web projects.

If you’re already familiar with GSAP, you can skip ahead to part two. …


— It’s not server-side rendering.

Image for post
Image for post

The year 2020 has been a crazy ride for all of us. For this end of the year holiday season, the React Team has recently announced exciting research into a new way to build React apps with React Server Components.

Please keep in mind that React Server Components is still under development and not recommended for production yet. The feature is completely optional and you can still write your component like you do today.

You can watch the one-hour talk and the demo here, but here’s a 5-minute guide that highlights and explains the important bits.

Also, if you’re curious about how React’s new components play a role in future design systems, I recommend you…


Image for post
Image for post
Serverless React search with Fuse.js

The search function is one of the most important features of a software application. Search sites like Google and DuckDuckGo have helped millions of users to navigate through the internet and quickly find what they’re looking for in mere seconds.

You may find that you need to include a search function into your React application, but you don’t want to set up a dedicated server just to handle the search. Is there a way to add a simple search into a React application?

Yes, there is. Fuse.js is a powerful and light-weight search library that’s built to handle search within the front-end. The library uses a technique known as fuzzy searching, which find strings that are approximately equal to a given pattern rather than just the exact matches. …


Image for post
Image for post

The most tedious part when implementing Redux is the amount of boilerplate code that you need to write in order to handle the data flow between components and the Redux store. Redux itself was inspired by Flux, a data flow architecture introduced in 2014.

Since the release of React, we’ve seen a transition from the use of class components into the use of functional components with hooks. No offense to Redux and Flux (they are still awesome) but maybe it’s time to use a new pattern that takes advantage of React’s maturity.

Jotai is a state management library for React that will save you from boilerplate tears with its minimalistic API. And yes, you don’t need to create any actions, reducers, or dispatchers when using Jotai! …


Build and share React components that can be used by Redux, MobX, Recoil, or any other state management libraries.

Image for post
Image for post

As you develop your React application, you may find that sharing components between multiple applications and projects isn’t so simple. Here are some problems that you may come across:

  • You need to make sure the components are well documented to help other developers understand how to use them.
  • You need to visualize the component so that other developers know what the component UI looks like
  • You need to decouple the component from any state management libraries to enable maximum scaling potential.

The third point is especially important because React has a collection of third party state management libraries that could be integrated with it. …


Image for post
Image for post

React hooks are JavaScript functions that you can import from React package in order to add features to your components. Hooks are available only for function-based components, so they can’t be used inside a class component.

React provides you with 10 hooks function, but only 2 of these hooks are going to be used very frequently when you write function components. They are useState and useEffect hooks. Let's learn about useState first.

The useState hook is a function that takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state. …


Image for post
Image for post

All React components must have a render method, which returns some element that will be inserted into the DOM. Indeed, ReactDOM.render is called on a pure HTML element, which in most applications use the <div> tag with id root as its entry point.

That’s why when we do this:

class sampleComponent extends React.Component {
render() {
return (
<h1>Hello World!</h1>
);
}
}

ReactDOM.render(
<sampleComponent />,
document.getElementById('root')
);

The <h1> element will be added into the DOM element with id root:

<div id='root'>
<h1>Hello World</h1>
</div>

Even though you can’t see it in the browser, there’s a fraction of time before React component render or insert this <h1> element into the browser and after it, and in that small fraction of time, you can run special functions designed to exploit that time. …


Image for post
Image for post
React Colorful by Vlad Shilov

Are you building an application that involves drawing and selecting colors with React? If so, you may be familiar with React Color, a collection of color picker components for React that mimics the color picker from popular applications like Sketch, Photoshop, Chrome, and many others.

While React Color is a great choice for most projects, there are some developers who see the abundance of style choice for a color picker component is an unnecessary feature.

If you’re looking for an alternative to use in your project, you will love this library called React Colorful, which is a minimalist and fast alternative to React…


Image for post
Image for post
Photo by Vishal Jadhav on Unsplash

Previously, React features such as state and lifecycle functions are available only for class-based components. Function-based components are referred to as dumb, skinny, or just presentational components because they can’t have access to state and lifecycle functions.

But since the release of React Hooks, function-based components have been elevated into first-class citizens of React. It has enabled function components to compose, reuse, and share React code in new ways.

In this post, I will share 6 tips about React Hooks that will be useful to keep as a guideline as you implement hooks into your components:

1. Follow the rules of Hooks

It might seem obvious, but both newbie and seasoned React developers tend to forget to follow the rules of React hooks, which…


Image for post
Image for post
Photo by Paul Gilmore on Unsplash with Wouter’s logo

Although React Router is currently the most popular routing solution for building applications with React, there are some people who feel that the library has too many features that aren’t used for smaller applications.

For example, the React Router library has support for hash-based routing and memory routing, which is not going to be used when your app only needs browser-based routing.

Wouter is a minimalist routing library that implements only the most used functionality from React Router. It also targets only the most recent environment, which is React v16.8.0+ and ES6-compliant browsers to further reduce the bundle size.

When compared to React Router, Wouter has the following…

About

Nathan Sebhastian

A senior software developer with experience in full-stack JavaScript. Get notified about my new tutorials on Twitter: https://twitter.com/nsebhastian

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store