Forem: Esther Itolima

Available for freelance Technical Writer Gigs.

Esther Itolima — Wed, 06 Sep 2023 13:29:25 +0000

I write Technical Article on UI and Development Docs. Also make tutorials for frontend Technologies such as React.js, JavaScript, CSS, TailwindCSS.

Twitter: @EstherItolima | Email: itolimaesther@gmail.com

Understanding when and how to use import and export in React

Esther Itolima — Sat, 02 Sep 2023 21:10:35 +0000

React operates as a component-based framework, allowing you to reuse components throughout your codebase. Component reusability involves reusing components wherever necessary, made possible by using the import and export statements.

Prerequisites

Before you proceed with this article, It's important you're familiar with:

React
JavaScript

Understanding When to Import and Export

It's important to understand that when you talk about importing a component, there must first be a component to export. So, let's begin by looking at what the export does.

Export: Exporting is about making your component, function, or variable usable in other files.

In React, these shared parts are usually components, functions, or information that are helpful. When you export something, you say, "Hey, other parts of the code or external files can use this, too!" This is useful for keeping your code organized and making it easy to use repeatedly.

For example, if you've made a special button in your React project, like a Button you can export it. Then, other parts of your project can use the same button without making a new one. It's like sharing your cool toy so everyone can play with it.

function Button(props) {

    const {value, id, className } = props;
    return (
      <button
          id={id}
          className={`${className}`}
      >
          {value}
      </button>
    )
}

export default Button

In this part of the code, you create a custom React component called Button. This component takes in some properties (props) you can customize when using this component in your app.

You're extracting values from the props object inside the component using destructuring. These values are value, id, and className.

The component returns a button element with the specified properties. This Button component is designed to render a button with the provided text (value), id, and className.

Finally, you're using export default to export the Button component. This means that other parts of your app can import and use this special Button component.

Import: Importing, on the other hand, is about making a component, function, or variable accessible to be used in a specific file.

Importing and exporting go hand in hand. Once you've shared something by exporting it, you can grab it and use it in a different part of your code by importing it. It's like borrowing a cool tool from a friend.

When you import, you prevent the need to copy and paste the same thing repeatedly. That way, your code stays neat, and you don't have to worry about making mistakes.

Another bonus of importing is that it helps you keep your codebase organized. Instead of having one huge pile of code, you can split it into smaller pieces. Each piece can import just what it needs, making your work much cleaner and simpler.

So, importing isn't just about bringing things in; it's about keeping your program clean and avoiding mistakes.

Now, let's move on to the next part of the code:

import { ComponentA, ComponentB, ComponentC } from './Componentfiles'
import Button from './Button.'

function ComponentD() {

  return (
      <div>
        <ComponentA />
        <ComponentB />
        <ComponentC />

        <Button
          value= "Learn More"
          id= "btnLearn"
          className="btn btn-primary" //blue button
        />
    </div>
  )
}

export default ComponentD

Import the custom Button component that you defined earlier inside ComponentD.

Lastly, you're using the Button component you imported. You're passing specific properties (like value, id, and className) to customize how the button should look. These properties can differ where you're using the special Button component.

For instance, you want to use the Button component in ComponentA with a different text, looks, and id.

export function ComponentA() {
  return (
    <div>
      ComponentA
      <Button
        value= "Click A"
        id= "btnClick"
        className="btn btn-warning" //yellow button
      />
    </div>
  )
}

And here is the final result.

How to Export and Import Components

There are two methods for exporting a component:

Default export
Named export

Each approach has its distinct way of importing, and you can decide to use either the default export statement in a file or a combination of both default and named export statements within a file.

Default export: The default export statement is automatically added to your App.js file when you create a React project, usually found at the end of the code.
The default export can only be used once within a file.

//App.js
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo"
          />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" 
          alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 
        1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App //default export statement

Your App.js file might have a different appearance than the example shown above due to my use of the Vite tool for setting up the React project.

For more details, refer to my previous article: Create React App vs Vite: Which One Should You Choose for Your Next React Project?

Create a new component and add the default export statement followed by your component name.

Like this

//ComponentA
function ComponentA() {
  return (
    <div>ComponentA</div>
  )
}

export default ComponentA

or this

//ComponentA
import React from 'react'

export default function ComponentA() {
  return (
    <div>ComponentA</div>
  )
}

Both methods will give the same outcome. The only difference lies in how they're implemented. In the first approach, after creating the function, the default export statement export default ComponentA is placed at the end of the code.

The export default is positioned on the same line as the function in the second approach.

Importing a component with a default export

Now, let's get your components talking to each other. To import a component that's been default exported, use the import keyword followed by your chosen name and the file's export path.

Create a new component named ComponentB and proceed to import ComponentA in ComponentB.

Like this

//ComponentB
import React from 'react'
import ComponentA from './ComponentA'

function ComponentB() {
  return (
    <div>
      <ComponentA/>
    </div>
  )
}

export default ComponentB

Note: When dealing with a default export statement, you can choose any name after the import keyword, while the path should point to the original file, which in this case is ComponentA.js.

This practice applies only when importing a default export statement component.

Like this

//ComponentB
import React from 'react'
import FirstComponent from './ComponentA'

function ComponentB() {
  return (
    <div>
      <FirstComponent/>
    </div>
  )
}

export default ComponentB

Named export: The named export statement comprises the export keyword, the function keyword, and the component's name. The named export can be used in a file to export multiple components.

Like this

Single component

import React from 'react'

export function ComponentA() {
  return (
    <div>ComponentA</div>
  )
}

Multiple named export statement components in a file named Componentfiles.js

import React from 'react'

//ComponentA
export function ComponentA() {
  return (
    <div>ComponentA</div>
  )
}

//ComponentB
export function ComponentB() {
  return (
    <div>ComponentB</div>
  )
}

//ComponentC
export function ComponentC() {
  return (
    <div>ComponentC</div>
  )
}

Importing a component with a named export

To import a named component, utilize the import keyword, enclose the component name within curly braces {}, and specify the path to the exported file.

When importing multiple components within a file, encase all the component names within the curly braces {}. These component names within the curly braces must precisely match the names of the exported components.

Like this

import React from 'react'
import {ComponentA, ComponentB, ComponentC} from './Componentfiles'

function ComponentD() {
  return (
      <div>
          <ComponentA />
          <ComponentB />
          <ComponentC/>
    </div>
  )
}

export default ComponentD

Summary

You learned about understanding import and export statements in React, and we also looked at the following:

When and How to import and export a component
Two(2) ways to export(default export and named export) a component and
Importing a component with a default export and named export statement.

Well done on finishing this article! If you have questions, I'm here to help. Connect with me on social media @EstherItolima or email itolimaesther@gmail.com for more support. Your interest matters, and I'm excited to assist you!

Exploring routing, data fetching and error handling in React Router 6.4+

Esther Itolima — Fri, 11 Aug 2023 14:26:00 +0000

Around September 2022, the Remix team introduced React Router 6.4, packed with latest features and patterns that streamline various tasks within your React application.

These enhancements are designed to simplify behaviors like loading and updating data, ensuring automatic data revalidation after updates, handling navigation race conditions, managing errors effectively, creating pending and skeleton UIs, and more, all based on the Remix team's insights.

In this article, we'll mainly delve into the following aspects:

Page Navigation
Data Fetching
Loading Data into Components
Efficient Error Management and User-Centric Rendering

While the allure of trying out new features can be strong, it's advisable to balance innovation with what already works for you. Just like preferring new clothes over old ones. You should adopt features that suit your project's needs.

Before embracing these enhancements in your next project, take the time to comprehend how they function. This article serves as your guide in understanding and implementing these exciting features effectively. Let’s get started. 😊

Prerequisites

Before we continue, make sure you have your project setup in your local machine.

Basic understanding of React.
Install the new react application and run the application
Install the latest version of react-router-dom → npm install react-router-dom

Page navigation

With React Router 6.4, navigating through your application's pages has become remarkably simpler, requiring fewer lines of code.

Page navigation, or routing, is an indispensable aspect of building React applications. It's a fundamental skill that enables you to showcase content dynamically based on specific routes, all without the need for page refresh. This not only leads to a smoother user experience but also optimizes your application's performance.

There are instances where you want to seamlessly display content as users explore different sections of your app, and React Router 6.4 equips you with the tools to achieve this efficiently.

i. Setting up Routes in React Router 6.4+

Prior to delving into route configuration, ensure that react-router-dom is present in your package.json file. If it's not already there, you can add it by executing the command npm install react-router-dom in your terminal. This step is essential as it provides the foundation for establishing and managing routes using React Router 6.4+. Once you have this dependency in place, you'll be ready to define and organize the navigation paths within your application effectively.

Now, let's delve into router configuration.

To get started, we import createBrowserRouter from react-router-dom. This function plays a crucial role in directing the routing of our application within the updated router version. This crucial step sets the stage for defining how different routes will guide users through your application's various pages and components. With createBrowserRouter, you gain the power to establish clear paths for seamless navigation, making the most out of React Router 6.4's capabilities.

import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route, Link, Outlet  } from 'react-router-dom'

Inside your App.js component, declare a variable named router and assign it to createBrowserRouter function.

Configuring routes involves two distinct approaches, each offering its advantages:

Array of Objects: One option is to define routes through an array of objects. Each object contains properties such as path and element. This clear configuration helps map out the paths and associated components for navigation.

const router = createBrowserRouter([
    { path: '/', element: <Home />},
    { path: '/about', element: <About /> }
  ])

Using createRoutesFromElements: Alternatively, leverage createRoutesFromElements within createBrowserRouter. Here, you use route definitions as JSX elements. The primary route, functioning as a parent, shapes the layout that accommodates all subsequent child routes.

const router = createBrowserRouter(createRoutesFromElements(
    <Route path='/' element={<Root />} >
      <Route index element={<Home />} /> //default route
      <Route path='/about' element={<About />} />
    </Route> 
  ));

As you proceed, it's important to note that the Root component, if use as an element within a Route, might require creating it in a separate file or even within the same App.js file, depending on the project's structure and your preferences. This ensures a well-organized and efficient routing structure.

ii. Navigating between pages in a client-side application using React Router 6.4+

In the context of this article, we'll illustrate page navigation using two(2) components:

Home component and About component

//Content of the Home Component
const Home = () => {
  return (
    <div>This is the Home page</div>
  )
}

export default Home

//Content of the About Component
const About = () => {
  return (
    <div>This is the About page</div>
  )
}

export default About

Incorporate the links to our pages using the <Link> from react-router-dom, ensuring alignment with the corresponding paths defined in the router variable.

When utilizing the <Link>, the to attribute plays a crucial role. Essentially, clicking on the text "About" triggers the inclusion of /about in the page's URL. Subsequently, the designated component with the identical path from the router variable, in this instance <Route path='/about' element={<About />} />, gets rendered.

This seamless interaction enables users to effortlessly navigate between content while maintaining a coherent and engaging user experience.

//Root component or element
const Root = () => {
  return (
    <div>
    <header>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </header>
    <main>
        <Outlet/>
    </main>
    </div>
  )
}

A closer observation reveals that the parent Route within the router variable, housing the Root component, holds the path ‘/’. Consequently, when launching the application, the default route, which is Home, is displayed due to its position as the index route within the Root Route.

Within the primary element, the <Outlet/> takes center stage. Its purpose is to seamlessly render the content of the Route nested within the Root Route.

However, at this juncture, our root file - App.js, lacks direct access to the previously crafted router variable. To bridge this gap, the solution lies in utilizing the <RouterProvider/> from react-router-dom. By embedding router as a prop within <RouterProvider/>.

<div className='App'>
    <RouterProvider router={router} />
</div>

Here is our final result working as intended.

Data Fetching

In React Router 6.4+, data fetching assumes a crucial role, facilitating swift data retrieval each time a page is rendered. If you're keen to delve deeper, I've penned an article detailing data access within components, leveraging React Hooks.

Feel free to explore it: How to pass and access data from one route to another with useLocation, useNavigate, useHistory hooks.

For software developers, data fetching ranks high in importance when building applications. In essence, data fetching entails retrieving information from a server and seamlessly presenting it in response to user requests.

i. How to load data from API in React Router 6.4+

The latest React Router version has made fetching data from APIs incredibly simple, reducing the amount of code required.

This is achieved through the use of loader props, which streamline the process of fetching data from an API before the component is displayed in the browser. As a result, there's no longer a need to employ the useEffect hook to fetch data during component rendering. It's like achieving two goals with a single action.

Traditionally, when fetching data in a component, developers used the useEffect hook to fetch data and often utilized the useState hook to store it. In React Router 6.4+, this process is simplified further using the useLoaderData() hook. This means you don't have to rely on either the useEffect or useState hook to store API data.

In our illustration, we'll work with the free Pokemon API and create a dedicated page to showcase this streamlined data loading approach.

const Poke = () => {

    const result = useLoaderData()

  return (
      <div>
          This is the Poke page
          {
              data.game_indices.map(itm => (
                  <div key={itm.version.name}>
                      <p >
                          {itm.version.name}
                      </p>
                  </div>

              ))
          }
    </div>
  )
}

export default Poke

export async function pokeData(){
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto')
    .then(response => response.json())
    const resData = await response
    return resData;
}

Examining the code above, we're using the fetch API to grab data from the Pokemon API. Importantly, getting data doesn't have to happen in the exact same place where we want to show it.

We can actually fetch data in a different component, then bring the function that fetches the data over and connect it to a specific pathway.

When we want to display the data we fetched using the pokeData function in the Poke component, we'll need to tap into something called "loader props". This is like a special tool that the Poke component gets. With this tool, we hand over the pokeData function, and it makes sure the data is fetched and ready to be shown when the Poke component shows up. It's a bit like preparing all the ingredients before cooking a meal. This way, things are nicely organized and work smoothly.

import './App.css'
import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route, Link, Outlet } from 'react-router-dom'
import Home from './page/Home'
import About from './page/About';
import Poke from './page/Poke';
import { pokeData } from './page/Poke' //imported data function

function App() {
  const router = createBrowserRouter(createRoutesFromElements(
    <Route path='/' element={<Root />} >
      <Route index element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route
        path='/poke'
        element={<Poke />}
        loader={pokeData}
      />
    </Route> 
  ));

  return (
    <div className='App'>
      <RouterProvider router={router} />
    </div>
  )
}

So whenever we visit /poke route, the pokeData function will run ahead of time, fetch the data, store the data response in the result by setting it to useLoaderData() hook from react-router-dom, and voila………..! you have access to render the data in that page.

Error handling

Sometimes, when you go to a page, you might see a big "404 Not Found" message with some other explanations. This basically means that the page you're looking for isn't there or doesn't exist.

You wouldn't like to present users with a strange-looking page like that when they're trying to reach the poke page, especially if the API data isn't working or no response is returned.

The good news is, React Router 6.4+ makes it simple for you to manage these situations. It provides ways to show a more attractive error page using tools like errorElement props and useRouteError()hooks.

i. How to handle and render errors with useRouteError hook

To begin, we'll adjust our fetch API function to enable us to see if the fetch was successful or not. You can find guidance on this at MDN: Checking that fetch was successful.

export async function pokeData() {
    try {
    const res = await fetch(
      "https://pokeapi.co/api/v2/pokemon/ditto"
    );
    const resData = await res.json();
    if (!res.ok) {
        throw Error('Name is not available!');
    }
    return resData;
  } catch (error) {
    throw Error('Name is not available!');
  }
}

Create a separate page component for the Error Page, import useRouteError hooks from react-router-dom, and assign it to a variable which will be the error that you throw in pokeData function. Using the variable you can be able to access the error message on that page.

Create a new component for the Error Page, and bring in the useRouteError hooks from react-router-dom. Set it to a variable, which will hold the error you create in the pokeData function. This variable lets you get the error message and display it on that page.

import { Link, useRouteError } from "react-router-dom"

const PokeError = () => {
  const error = useRouteError();

  return (
      <div>
          <p>{error.message}</p>
          <Link to='/'>Back to home page</Link>
    </div>
  )
}

export default PokeError

Pass the error using the errorElement props into the associated Route and simply give it the Error page as the value.

import './App.css'
import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route, Link, Outlet } from 'react-router-dom'
import Home from './page/Home'
import About from './page/About';
import Poke from './page/Poke';
import { pokeData } from './page/Poke'
import PokeError from './page/PokeError';

function App() {
  const router = createBrowserRouter(createRoutesFromElements(
    <Route path='/' element={<Root />}>
      <Route index element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route
        path='/poke'
        element={<Poke />}
        loader={pokeData}
        errorElement = { <PokeError/>}
      />
    </Route> 
  ));

  return (
    <div className='App'>
      <RouterProvider router={router} />
    </div>
  )
}

Note: You have two options: you can use the errorElement props in either the main parent Route or the associated Route.

If the errorElement props are set in the parent Route, and you attempt to go to an invalid route like /pokes, the Error page will show up as expected. However, the error message specific to the Poke page won't display, and you'll see the other content instead.

In conclusion, React Router 6.4+ brings exciting features that make building React applications easier. It simplifies tasks like loading and updating data, managing errors, and improving the user interface.

Navigating between pages is now simpler and faster with the new routing setup. Data fetching, which is crucial, is made easier with the useLoaderData() hook. It loads data before the page is rendered, resulting in quicker loading times. Handling errors is also improved, making error messages more user-friendly.

React Router 6.4+ provides valuable tools that enhance navigation, data management, and error handling, making React development more efficient and user-focused.

Create React App vs Vite: Which one should you choose for your next React Project?

Esther Itolima — Fri, 10 Mar 2023 22:52:37 +0000

React is an immensely popular JavaScript library for building web applications, and it has a thriving ecosystem of tools and utilities. One such tool is Create React App, a command-line interface (CLI) tool that provides a pre-configured development environment for React projects. However, a newer contender in this space is Vite, a build tool that aims to provide a faster and more flexible development experience for modern web projects. In this blog post, we will compare the features of Create React App and Vite to help you decide which one to use for your next project.

Vite ( pronounced /vit/, like "veet") is a build tool and development server that was created to enhance the development experience of modern web applications. It was developed by Evan You, the creator of Vue.js, and it can be used to develop applications in various frameworks, including Vue.js, React, and Angular.

Getting started

Getting started with Create React App is straightforward - you can create a new project with a single command (npx create-react-app my-app), and it comes pre-configured with all the necessary settings and dependencies to start building your React application. However, if you want to customize the configuration, you need to eject the app, which can be a time-consuming process and can potentially cause issues if you're not careful.

Vite, on the other hand, requires a little more setup(npm create vite@latest), but it provides more flexibility in terms of configuration. You can use Vite to create a new project with your preferred setup, or you can add Vite to an existing project by running a few commands. Vite also provides a comprehensive configuration file that allows you to fine-tune the settings according to your needs.

Development server

Both Create React App and Vite provide a development server that lets you preview your app in the browser as you write code. However, Vite's development server is much faster than Create React App's server, especially when it comes to hot module reloading. This means that you can see the changes you make to your code almost instantly with Vite, making the development process more efficient and enjoyable on like React app which takes time to reload for every changes you make.

Build process

When it comes to building your application for production, Create React App and Vite take different approaches. Create React App uses webpack to bundle your code and generates an optimized build that you can deploy to a server or a content delivery network (CDN). However, if you want to customize the webpack configuration, you need to eject the app, which can be a significant undertaking.

Vite, on the other hand, uses Rollup to bundle your code, which is known to be faster and builds in milliseconds than webpack. Vite's build process is also highly configurable, and you can fine-tune the settings according to your needs. This makes it easier to optimize your application for performance and reduce its bundle size, which is critical for improving the user experience.

In conclusion, both Create React App and Vite are excellent tools for developing React applications, and the choice between them ultimately depends on your needs and preferences. If you want a simple and easy-to-use development environment that gets you up and running quickly, Create React App is an excellent choice. However, if you want a faster and more flexible development experience with better performance and optimization options, Vite might be the way to go. Ultimately, it's up to you to weigh the pros and cons of each tool and choose the one that fits your requirements best.

Whether you're a beginner or an experienced developer, using the right tools is crucial to the success of your project. Create React App and Vite are both excellent options for building React applications, and they both have their strengths and weaknesses. By carefully considering the features of each tool, you can make an informed decision that will help you build better applications faster.

Reference:
https://beta.reactjs.org/learn/start-a-new-react-project
https://vitejs.dev/guide/

5 free resources to jumpstart your career in Frontend Development.

Esther Itolima — Thu, 09 Mar 2023 20:03:43 +0000

Frontend programming is a fascinating field that involves developing the user interface of websites and applications. It requires a range of skills, including proficiency in HTML, CSS, and JavaScript. However, learning frontend programming can be an expensive endeavor, especially if you opt for paid courses or boot camps. Fortunately, there are many free resources available online that can help you learn frontend programming without spending more or a dime. In this blog post, we will explore some of the top free resources to learn frontend programming.

JavaScript Info
JavaScript Info is a widely recognized and comprehensive online learning platform for JavaScript programming language. It offers a vast range of beginner to advanced tutorials, interactive exercises, and practical projects to help individuals master the intricacies of JavaScript. The platform also features an active community forum for learners to discuss concepts, ask questions, and seek guidance from experienced programmers. Whether you're new to JavaScript or an experienced developer, JavaScript Info is an excellent resource for honing your skills and staying up-to-date with the latest industry developments.

JavaScript Algorithms and Data Structures
JavaScript Algorithms and Data Structures is a comprehensive online resource for learning and implementing algorithms and data structures using the JavaScript programming language. The website features detailed explanations, interactive code examples, and practical exercises to help individuals gain a deeper understanding of core computer science concepts such as sorting algorithms, data structures, and graph theory. With a focus on real-world applications, the platform equips learners with the skills and knowledge needed to solve complex programming problems and build robust software applications. Whether you're a beginner or an experienced developer, JavaScript Algorithms and Data Structures is an excellent resource for expanding your technical skills and advancing your career.

Frontend Mentor
Frontend Mentor is an online platform that provides designers and developers with real-world design challenges to help them improve their skills in front-end development. The platform offers a wide range of projects, from simple to complex, that cover various topics such as HTML, CSS, and JavaScript. Users can choose from various skill levels, including beginner, intermediate, and advanced, and work on the challenges at their own pace. Frontend Mentor also provides detailed design specifications, style guides, and assets to help users create pixel-perfect designs. Additionally, the platform features a community forum where users can share their work, get feedback, and connect with other developers. Whether you're looking to sharpen your skills, build your portfolio, or simply enjoy the challenge of solving real-world design problems, Frontend Mentor is an excellent resource for front-end developers of all levels.

Awesome
Awesome is a community-curated list of resources and tools related to various programming languages, frameworks, libraries, and software development topics. The project was started on GitHub as a way for developers to share their favorite resources with others and has since grown into a massive collection of over 28,000 curated lists covering a wide range of topics. Users can browse through the lists to discover new resources, or contribute their own by creating a pull request on GitHub. The project's aim is to make it easier for developers to find high-quality resources and tools, save time, and ultimately improve their productivity. Whether you're a beginner or an experienced developer, Awesome is an excellent resource for discovering new tools and staying up-to-date with the latest industry developments.

CodeWars
CodeWars is an online platform that provides developers with a fun and challenging way to improve their coding skills by solving programming challenges known as "katas." Users can choose from a wide range of katas that cover various programming languages and skill levels, including beginner, intermediate, and advanced. Each kata presents a unique coding problem that users must solve using the programming language of their choice. Users can then submit their solutions and compare their code with others to learn new techniques and improve their problem-solving skills. CodeWars also features a leaderboard that tracks users' progress and provides an incentive to continue improving. Whether you're looking to improve your coding skills, learn a new programming language, or simply enjoy the challenge of solving complex programming problems, CodeWars is an excellent resource for developers of all levels.

In conclusion, learning frontend programming doesn't have to be expensive. With the help of these free resources, you can acquire the skills needed to build engaging and interactive user interfaces for websites and applications. Choose the resource that best suits your learning style and start your frontend development journey today. Remember to practice regularly and apply your knowledge to real-world projects to solidify your understanding.

useEffect vs useEffectOnce

Esther Itolima — Wed, 08 Mar 2023 15:29:17 +0000

As a developer, you've probably encountered React's useEffect hook, which is used for handling side effects in functional components. While useEffect is a powerful tool, you may not be aware of its more specialized variant, useEffectOnce. In this post, we'll explore the differences between these two hooks and when to use each one.

useEffect()

The useEffect hook is a tool that allows you to execute side effects in functional components. Side effects are actions that occur outside of a component's state updates, such as fetching data, setting timers, or updating the DOM.

When you use useEffect, you provide a callback function that will be executed after each render cycle. This function may have side effects that need to be cleaned up when the component is unmounted or re-rendered. To do this, you can return a cleanup function from the useEffect callback

Here's an example of how to use useEffect to fetch data from an API:

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://my-api.com/data');
      const jsonData = response.data;
      setData(jsonData);
    }

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}


export default MyComponent

In this example, we define a state variable called data and initialize it to null. We then use useEffect to fetch data from an API and update the data state variable with the response. The [] empty array as second argument tells React to only execute the callback once, after the initial render.

useEffectOnce

While useEffect is a great general-purpose tool, there are cases where you only need to execute a side effect once, when the component is mounted. This is where useEffectOnce comes in.

useEffectOnce is a custom hook that wraps useEffect and provides a more concise way to execute a side effect only once.

_A custom hook is simply a JavaScript function that starts with the prefix "use". This prefix is important, as it tells React that this function is a hook and can be used with the use keyword within a functional component. Custom hooks can use other built-in hooks such as useState, useEffect, useCallback, etc., to build the desired functionality.
_

Here's what the implementation looks like:

import { EffectCallback, useEffect } from 'react'

export function useEffectOnce(effect: EffectCallback) {
  useEffect(effect, []);
}

As you can see, useEffectOnce accepts a single argument, which is the callback function that will be executed once. It then calls useEffect with the same callback and an empty array as the second argument, which tells React to only execute the callback once, after the initial render.

Here's an example of how to use useEffectOnce to initialize a third-party library:

import { useEffectOnce } from './useEffectOnce';



function MyComponent() {
const [data, setData] = useState({
name: 'John Doe'
});

  useEffectOnce(() => {
    console.log('Triggered only once, on mount', { data })
  });

  return <div>My Component</div>;
}

In this example, we import the useEffectOnce hook from a separate file and use it to display the data. The callback function is executed only once, after the initial render.

When to use useEffect or useEffectOnce?

So, when should you use useEffect and when should you use useEffectOnce?

As a general rule, you should use useEffect for side effects that need to be executed on every render, such as updating the DOM based on state changes or fetching data from an API based on props. Use useEffectOnce for side effects that need to be executed only once, such as initializing a third-party library or registering event listeners.

If you're unsure which hook to use, you can always start with useEffect and refactor to useEffectOnce if you find it necessary to use.

In conclusion, both useEffect and useEffectOnce are powerful tools for handling side effects in React functional components. Knowing when to use each hook is important for writing efficient and maintainable code. As a general rule, use useEffect for side effects that need to be executed on every render, and useEffectOnce for side effects that need to be executed only once.

By understanding the differences between these two hooks and using them appropriately, you can write cleaner and more effective code in your React projects.

Do well to comment which one you have used.

Reference
https://reactjs.org/docs/hooks-effect.html
https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/
https://blog.logrocket.com/useeffect-hook-complete-guide/
https://www.turing.com/blog/custom-react-js-hooks-how-to-use/
https://www.freecodecamp.org/news/how-to-create-react-hooks/
https://blog.logrocket.com/create-your-own-custom-react-hooks/
https://betterprogramming.pub/react-custom-hooks-with-real-life-examples-c259139c3d71
https://morioh.com/p/2784310361ef

Scribe Chrome Extension: The Ultimate Tool for Documenting Your Processes

Esther Itolima — Tue, 07 Mar 2023 10:25:42 +0000

In today’s fast-paced business world, effective process documentation is essential for streamlining workflows and increasing productivity. The Scribe Chrome Extension is the ultimate tool for documenting your processes, making it easier than ever to capture and organize key information and collaborate with team members. With its advanced features, including automatic recording of user activity, manual note-taking and tagging, audio and video recording, and integration with project management tools, the Scribe Chrome Extension is the perfect solution for any individual or team looking to improve their productivity and achieve their goals more efficiently.

What is Scribe?
Scribe is a productivity tool that is available as a Chrome extension. It is designed to help users capture and organize information in a structured and efficient manner. With Scribe, users can create workspaces to organize their projects, documents to capture information, and tags to categorize and search for their content. The extension also includes a rich text editor that allows users to format text, add images, and embed links to external resources. Scribe can be used for a variety of use cases, such as process documentation, project management, and knowledge management. It is a versatile tool that can help users streamline their workflow and increase productivity. Scribe was founded in 2019

Scribe generates a step-by-step guide through your cursor clicks and the keystroke. Scribe is totally free and you can also use Scribe on your desktop by simply upgrading to the premium version which includes some additional features like customizing screenshots, branded guides, etc.

Key features of the Scribe Chrome Extension.
The Scribe Chrome Extension offers a range of powerful features for documenting your processes, including:

Automatic recording of user activity: Scribe records every action you take on your computer, including website visits, mouse clicks, and keyboard strokes, making it easy to capture and analyze your workflow.

Manual note-taking and tagging: You can also manually take notes and tag them with keywords and labels, making it easy to find and organize your information.

Audio and video recording: Scribe allows you to record audio and video notes, enabling you to capture spoken information, presentations, and other content that might be difficult to capture in writing.

Integration with project management tools: Scribe integrates with popular project management tools like Asana and Trello, allowing you to create tasks and track your progress directly from the extension.

Collaboration features: Scribe makes it easy to collaborate with your team members, allowing you to share notes and recordings, assign tasks, and leave feedback and comments.

Centralised information: Scribe creates a centralised repository of information, making it easy to access and share knowledge across your organisation.

Privacy and security: Scribe takes privacy and security seriously, encrypting all data and giving you control over who has access to your information.

Use cases of Scribe

Scribe can be used to document processes, workflows, and procedures in a clear and organized way. This can help teams optimize their processes and improve collaboration.
Scribe can be used to capture and organize knowledge within an organization. This can include best practices, procedures, and company policies.
Scribe can be used to document project plans, tasks, and milestones. This can help teams stay on track and ensure that projects are completed on time and within budget.
Scribe can be used to document customer support procedures, such as troubleshooting steps and best practices. This can help support teams resolve issues more efficiently and effectively.
Scribe can be used to create training materials and documentation for new hires. This can help new employees get up to speed more quickly and become productive members of the team.

How to use the Scribe Chrome Extension for documenting your processes

Install the Scribe Chrome Extension from the Chrome Web Store.
Click on the Scribe icon in your browser toolbar to open the extension.
Click on ‘Start recording’ in the extension dropdown.
Click on the blinking red button in the corner of your screen and select ‘Complete Recording’
You can create a new workspace for your project and give it a descriptive name.
Add a new document to your workspace by clicking on the “New Document” button.
Give your document a title that reflects its content.
Use the rich text editor to add text, images, and links to your document.
Use the “Tags” feature to organize your documents by topic or category.
Use the “Export” feature to download your document as a PDF or text file.
Use the “Share” feature to collaborate with team members or share your document with others.
Use the “Search” feature to quickly find information within your workspace.

In conclusion, the Scribe Chrome Extension is a powerful tool for documenting your processes. With its intuitive interface and robust feature set, it makes it easy to capture and organize information in a way that is accessible and actionable. Whether you are a business owner, project manager, or team leader, Scribe can help you streamline your processes, improve collaboration, and boost productivity. By using Scribe to document your processes, you can ensure that your team is aligned, your workflows are optimized, and your projects are successful. So if you’re looking for a tool that can help you take your process documentation to the next level, look no further than the Scribe Chrome Extension.

Reference:
https://scribehow.com/page/Getting_Started_With_Scribe__eR6WdPtoTOuhiSZ3EcGLmw

Manipulating the browser's history in react

Esther Itolima — Sun, 05 Mar 2023 03:09:53 +0000

Manipulating the browser's history stack can be a powerful tool for building more interactive and seamless web applications. The history object provided by the browser's DOM API allows you to add, remove, and modify entries in the history stack, enabling you to create custom navigation flows and advanced features like back/forward functionality. In this article, we'll explore how to use the history object to manipulate the browser's history stack and build more powerful web applications.

React Router provides several hooks to manipulate the browser's history, including useHistory, useLocation, and useNavigate. These hooks allow you to programmatically navigate to different routes, go back and forth in the history stack, and even modify the history stack to achieve a custom user experience. In this article we will be focusing on manipulating the browser's history using useHistory

useHistory is available in react-router v5 and for you to use useHistory you need to properly setup your application in other to use React router -https://v5.reactrouter.com/web/api/Hooks/usehistory

Wrapping the entire application with <BrowserRouter> is indeed a necessary step to access the history object. This provides a global history object that can be accessed using the useHistory hook.

Additionally, it is important to note that when using the history.push method, you need to provide a valid route instead of a relative file path. This can be set up using the component provided by React Router.

Here are some common scenarios where you might want to manipulate the browser's history:

Programmatic navigation: You might want to navigate to a different route in response to a user action or a component state change.
Conditional navigation: You might want to conditionally navigate to a different route based on some logic, such as whether the user is authenticated or the user input is valid.
Redirects: You might want to redirect the user to a different route or an external URL.
Modifying the history stack: You might want to add, remove, or replace entries in the history stack to achieve a custom navigation experience.

React Router provides the following methods to manipulate the browser's history:

push: Adds a new entry to the history stack and navigates to the specified route.

replace: Replaces the current entry in the history stack with a new one and navigates to the specified route.

go: Moves back or forward in the history stack by the specified number of entries.

goBack: Moves back one entry in the history stack.

goForward: Moves forward one entry in the history stack.

Let's take a look at an example of how to use useHistory hook to push a new entry to the history stack:

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/new-route");
  };

  return (
    <div>
      <button onClick={handleClick}>Go to new route</button>
    </div>
  );
};

You can use similar code with the replace method to replace the current entry in the history stack with a new one. The go, goBack, and goForward methods allow you to move back and forth in the history stack.

Conclusion
we have successfully explore how to use the history object to manipulate the browser's history stack so as to build more powerful web applications.

useHistory is a hook in React Router v5 for navigating pages in your react application
we explore the different methods we can use to manipulate browser' history

How to pass and access data from one route to another with useLocation, useNavigate, useHistory hooks.

Esther Itolima — Fri, 03 Mar 2023 23:14:51 +0000

When building a React application with multiple routes, passing data between routes can be challenging. Fortunately, React Router provides several hooks that allow you to pass props and access data from one route to another, including useNavigate, useHistory, and useLocation.

With these hooks, you can easily pass data between components, and retrieve data from the current location object.

In this article, we'll explore how to use these hooks to pass props and access data from one route to another in your React application. We'll cover how to pass data using state and how to retrieve data from the location object.

Whether you're building a simple single-page application or a complex multi-page application, these hooks can help you build more efficient and user-friendly navigation while also allowing you to easily pass and access data between routes.

In the course of this article, I will be using 2 different components for my illustration. The first component is the sending component (ProfileOne) and the other is the receiving component(ProfileTwo). I will be showing you the different ways you can achieve it.

useHistory()

We will create a component called ProfileOne and define the data that you want to pass.
Use the useHistory hook to push the new route and pass the state object as the second argument.
In the receiving component, use the useLocation hook to access the state object and retrieve the passed data.

Note that by default the location variable have some key values in which we can use to achieve what we want.

pathname, search, hash, state, key

and in the course of this article we will be using state as a prop with the data you want to pass along when calling our hook.

import { useHistory } from "react-router-dom";

const ProfileOne = () => {
  const history = useHistory();
  const data = { name: "John", age: 30 };

  const handleClick = () => {
    history.push({ pathname: "/profile-two", state: data });
  };

  return <button onClick={handleClick}>Go to ProfileTwo</button>;
};

export default ProfileOne;

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const data = location.state;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
};

export default ProfileTwo;

useNavigation
Same process except importing useNavigation instead of useHistory in step 2.

import { useNavigate } from "react-router-dom";

const ProfileOne = () => {
  const navigate = useNavigate();
  const data = { name: "John", age: 30 };

  const handleClick = () => {
    navigate("/profile-two", { state: data });
  };

  return <button onClick={handleClick}>Go to ProfileTwo</button>;
};

export default ProfileOne;

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const data = location.state;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      Hello
    </div>
  );
};

export default ProfileTwo;

Bonus point
You can also use Link element to pass data from one route to another by including the state prop inside of the Link element.

import { Link } from "react-router-dom";

const ProfileOne = () => {
  const data = { name: "John", age: 30 };

  return (
    <Link to="/profile-two" state={{ fromHome: { data } }}>
      Go to ProfileTwo
    </Link>
  );
};

export default ProfileOne;

fromHome indicate where the data is coming and you can decide to use any name of your choice.

import { useLocation } from "react-router-dom";

const ProfileTwo = () => {
  const location = useLocation();
  const { fromHome } = location.state;
  let data = fromHome.data;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
};

export default ProfileTwo;

In conclusion, passing props and accessing data from one route to another is an essential part of building complex web applications with React. React Router provides several hooks, including useNavigation, useHistory, and useLocation, to help you navigate between routes and pass data along the way.

By mastering these hooks, you can build complex, interactive web applications that provide a seamless user experience. Whether you're building a simple blog or a full-fledged e-commerce site, React Router's navigation hooks provide the tools you need to build your app's navigation logic. So go ahead and start exploring these hooks to take your React applications to the next level!

Reference

https://ui.dev/react-router-pass-props-to-link
https://v5.reactrouter.com/core/api/Hooks/usehistory