Forem: Tchassi Jordan

Is React.js still worth learning in 2023?

Tchassi Jordan — Sun, 26 Feb 2023 10:54:48 +0000

React.js is meta backed javascript library, and today it's considered as the most widely used javascript library. But increasingly most folks(well tech twitter) have been referencing it as being dead, and that it's rather worth learning other libraries/framework over it. Well the energy and perspectives of folks on social media can be quite misleading at times, so it's best to always look at the real numbers/metrics before taking your decision.

So I'll try to do a comprehensive study based on two very important criteria, you should always consider before learning a new technology. These metrics are going to be community & ecosystem, and job market & talent. With these we can take a reasonable conclusion based on the numbers rather than following folks' perspectives blindly.

1. Community & Ecosystem

In my opinion the community & ecosystem of a tech stack is the most thing to consider before learning it. No one likes the feeling of surfing through google for countless hours and not finding a solution to his/her problem. That's the effect of having a poor community.

React.js since it's introduction back in 2013 has grown so much in popularity. It's concept of building UI in terms of component has largely been adopted by the front end industry, and as of now react.js has one of the larges communities out there. You can basically see responses to entry entry level problem you encounter with the library by just hopping stack over flow.

Here are two very important 2022 surveys. The first conducted by stack over flow, and here we can clearly see how react.js tops the charts in terms of the libraries used by both professionals and those learning to code.

Stack Overflow Developer Survey 2022

In May 2022 over 70,000 developers told us how they learn and level up, which tools they’re using, and what they want.

survey.stackoverflow.co

The second survey was conducted by the state of javascript. Yet again React.js tops the charts for the used library on the front end.

https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

With that we can start to see how large the React ecosystem presently is.

2. Job market & talent

If you are someone like me trying to make a living as a software engineer then this definetly is an important metrics to consider.
I took a look at the number of jobs in demand on upwork(the world's leading freelance platform) for react, angular, vue, svelte developers. Here's what I came out with.

Tech stack	Number of jobs
React.js	5,768
Vue.js	1,173
Angular	1,589
Svelte	311

Clearly React.js developers are very much in need, the gap is mind blowing.

Taking those these metrics into consideration more specifically the ecosystem & community we can clearly see that react.js is still very must alive. Infact the majority of new framework/libraries out there now like Solid, Preact are some what derivatives of react.js

So if you're considering learning to code in 2023, then the numbers are up, now the decision is up to you. Until the next time

How to create a SnackBar with Next.js

Tchassi Jordan — Sun, 05 Feb 2023 14:20:57 +0000

Most at times while building websites with features like authentication, popup notifications we usually need a way to opt in to the current user view and show some vital information without taking a lot of the user's attention. Well, if you're aiming to do that then using a snackbar could be your best bit.
My aim through this article is to help you set that up quickly, without having to add UI component libraries like Material UI onto your app.

Road map

Prerequisite
Creating Simple Snackbar
1. Create snackbar component
2. Create Snackbar state with useReducer
3. Create Snackbar Context
Combining everything together

1. Prerequisite

Nextjs project
- TypeScript
- Tailwind CSS
Little understanding with using useReducer for state management in React

2. Creating Snackbar Component

Create snackbar component

First we'll need to create our snackbar types and props. Create a new folder called components at the root of your project, in the folder create a file called types.ts

components/types.ts

Now we need to create the snackbar component itself. So we'll create a new file in the components folder we created earlier called Snackbar.tsx

components/Snackbar.tsx

With those two steps, you should have a components folder with the following structure.

- components
    | types.ts
    | Snackbar.tsx

So now, we have our Snackbar component ready to be consumed. Next up, we need to create snackbar state.

Create Snackbar state with useReducer

For the state, we principally have to control two things; the Snackbar state when it's open, and the Snackbar state when it's close
So for that, we'll use useReducer to define state logic

You can use useState for this but I'll rather go with useReducer to keep code much more readable

For the reducer function, let's create a folder at the root of your project called lib, and in the folder create another nested folder called utils. Create a file called reducer.ts inside the utils folder, this is the file in which we'll put the reducer code logic.

lib/utils/reducer.ts

Create Snackbar Context

You must be asking yourself, but why use context create a snackbar component??
Shouldn't we just create a snackbar component that we can import when ever we need to use it??

Well, we are using context because we don't want to import the Snackbar component all over our app, we just want to call a function anywhere in our app and that function takes care of adding the Snackbar to the viewport.

From the end of the last section we have our Snackbar component, and the reducer function that manages it's state. Now we'll create a new folder called context in the root level lib folder we created earlier. In the context
folder, let's create a file called SnackbarProvider.tsx

lib/context/SnackbarProvider.tsx

Combining this step and the previous one, you should have a lib folder at the root of your app with the following structure.

- lib
  - context
     | SnackbarProvider.tsx
  - utils
     | reducer.ts

3. Combining everything together

At this point all that's let to do is to add the Snackbar context provider we created above to the _app file in pages/_app.js. This way the snackbar context is available globally

Congrats, we can access the snackbar context globally.
Copy and paste the code below in your pages/index.tsx file to test the component

Here's the link to the production deployment.

custom-nextjs-snackbar.vercel.app

You can equally get the full code have the complete source code on my my github repo

Now that it for this guide, see you next time. And if you like this guide please leave a like.

How to Create a Carousel App in React JS

Tchassi Jordan — Thu, 28 Oct 2021 12:56:19 +0000

Let's start.

In this article we'll follow some simple steps in order to realise a simple image carousel in React using create-react-app. This article assumes the reader has little or basic knowledge working with react and equally react hooks. The first thing to note is that we'll be building this carousel app using a functional component while utilising react hooks for state management. In addition to the above we'll also build our own custom hook from scratch. If you're someone like me you probably want to kick into the real action already, so let's do that right away.

Create our Carousel App

Start by creating the Carousel app using create-react-app. If you have no knowledge about doing this you can visit their documentation at Create react app link here. They have a detailed explanation far better than anything I can give you.

At the end you should have a folder that contains our app and it's modules. All our code will be written in the App.js file found in the src folder

Edit the App.js file to look something like the code below
```
    import React from "react"

    export default function Carousel() {
        return (
            <div>This is our carousel container</div>
        )
    }
```
Add our images to the app

Webpack has some build issues dealing with internal images. The best and easiest work around this issues is to store our images in the public folder(where our index.html is found), this will make webpack include our images during the build process.

We'll create an images folder inside the public folder to hold all our carousel images. Well you could decide to put them directly in the public directory that won't cause any problems but to follow certain convention I advice you put them in the images folder.

Let's create an array to hold all the images path found in the public folder and a variable called currentImg which will point to the current image being rendered. Create an image tag with it's src the value of currentImg.

export default function Carousel() {
    const gallery = ['/images/bark-cake-bg.jpg','/images/birthday-cake.jpg','/imageschocolate.jpg/','/images/cupcakes3.jpg']
    const currentImg = gallery[0]
        return (
            <div>
                <img src={currentImg} alt="slide" />
            </div>
        )
}

We're doing this because we want to loop/iterate over the gallery array and select different image path to be rendered using this array indexes.

Right now the image that is display depends on the value of currentImg, which is hard coded to gallery[0]. We need a way to change it's value rather than it being static like above.

The best way to do that is introducing state. Since we are using a functionally react component, the only way to add state to it is by using react hooks.

    import React, {useState, useEffect} from "react"

    export default function Carousel() {
        const [count, setCount] = useState(0)
        const gallery = ['/images/bark-cake-bg.jpg','/images/birthday-cake.jpg','/imageschocolate.jpg/','/images/cupcakes3.jpg']
        const currentImg = count
        return (
            <div>
                <img src={currentImg} alt="slide" />
            </div>
        )
}

Handling the Count state

Now we have to find a way to change the count state so that the url of the image being rendered changes. So to do this we'll create a custom hook called useInterval, that sets an interval, and clears that interval when it's unmounted.

    const callback = () => {
        //Can read new state and props
        setCount(count + 1)
        //when count is already greater than our array size go back to the first index.
        if (previousCount > gallery.length - 2)
        setCount(0)
    }

    function useInterval(callback) {
        useEffect(() =>
            {
                let timer = setInterval(callback, 1000)
                return () => clearInterval(timer)
            }
        )
    }

    useInterval(callback)

After running this you will notice that interval isn't cleared as desired, this is because the clearInterval and the setInterval have a mismatch. In a not shell the setInterval kind of runs twice, while clearInterval cleans up only one interval. This keeps on repeating as the intervals change.

How Can We Solve this ??

The best way to solve the issue is to create a react ref that will point to an interval and it's that referenced interval that will be cleared.

    function useInterval(callback) {
        //create my reference object
        const savedCallback = useRef()

        useEffect(() => {
            //after every render save the newest callback our reference object
            savedCallback.current = callback
        })

Why useEffect??

We do this because we want to address the newest interval.

What Next??

Now all that's let to do is to use the new interval above in our setInterval. And when the interval runs out clear it.

    function useInterval(callback) {
        //create my reference object
        const savedCallback = useRef()

        useEffect(() => {
            //after every render save the newest callback our reference object
            savedCallback.current = callback
        })

        function tick() {
            //call the latest timer 
            savedCallback.current();
        }

        let timer = setInterval(tick)
        return () => clearInterval(timer)
    }

What If We Want to be able to Pause/Play our interval??

To realise this we'll need to make our useInterval a little bit more dynamic. We'll initialise a new state called isRunning that will tell our hook if to run the interval or not.

    const [isRunning, setIsRunning] = useState(true)

    function useInterval(callback, delay) {
        //create my reference object
        const savedCallback = useRef()

        useEffect(() => {
        //after every render save the newest callback our reference object
        savedCallback.current = callback
        })

        useEffect(() => {
            function tick() {
                //call the latest timer 
                savedCallback.current();
            }

            /*Using delay instead of isRunning because useEffect won't trigger a re-render when a boolean changes
            Whereas delay here is a parameter which isn't a boolean, and changes depending on isRunning state. 
            */
            if (delay !== null) {
                let timer = setInterval(tick, delay)
                return () => clearInterval(timer)
            }
        }, [delay])
    }

    useInterval(callback, isRunning ? 5000 : null)

So now if we want to play/pause the interval all we have to do is mutate the is running state.

Congratulations you made it to the end. Now you have a functional carousel app in react.