Forem: Andrew Ezeani

How To Create a React Application on an Android Device: A Step-by-Step Guide

Andrew Ezeani — Sun, 24 Sep 2023 13:08:50 +0000

Table of Content

Introduction
Prerequisites
Setting up your Android Phone
Developing the Todo App with Acode
- Importing the project into Acode
- Building the Todo App
Configuring Git and GitHub
Debugging the Application
Conclusion

Introduction

Getting access to a computer is a huge hurdle that discourages most people from learning how to code. I can relate to this because when I started my journey as a frontend developer, all I had was my smartphone. I started by learning HTML and CSS on SoloLearn where I utilized their in-app text editor. Then I proceeded to learn JavaScript on Freecodecamp, where I made use of their interactive code editor. Fortunately, I was able to get access to a computer while learning React. However, I still use my phone when building small React applications. In this article, you're going to learn how to build a React application using your smartphone by building a Todo application. But before we proceed, here is a glimpse of what you will be building:

Prerequisites

An Android phone (Android version 7.0 or higher)
Basic familiarity with the command line
Basic knowledge of React and Git
A GitHub account

Setting up your Android Phone

Follow the below steps to setup your Android device for building React projects:

Step 1: Install Termux

Termux Is a terminal emulator for Android. You can download the application from f-droid

Step 2: Upgrade the Termux packages

When you launch Termux, it will install necessary packages from a remote server. After installation, update the packages to the latest versions by running this command:



apt update && apt upgrade

Accept the maintainer's version for all prompts.

Step 3: Grant access to local storage

Termux requires access to your device storage. Grant this access by running this command:



termux-setup-storage

Tap Allow when prompted to grant Termux access to your device's storage.

Step 4: Install Node.js

Run the below command to install Node.js:



pkg install nodejs

#To check node version
node -v

Step 5: Create a React application using Vite

Run the below command to scaffold a React application using Vite:



npm create vite@latest <your_app_name> -- --template react

You'll be prompted to install Vite. After installation, download the necessary dependencies and start the development server by running these commands:



#To change directory to our application directory
cd <your_app_name>

#To install necessary dependencies
npm install

#To start the development server
npm run dev

Copy the development server URL and open it in your device's browser. You should see a screen like the one below on your phone:

Step 6: Install Acode

Acode is a popular text editor widely used for coding on Android. You can download it from the Android play store

Developing the Todo App with Acode

To build the Todo application, you first have to import the Project into the Acode editor.

Importing the project into Acode

Launch the Acode application, then follow these steps to import your React application:

Step 1: Tap on the Hamburger menu on the top-left corner of the app

A menu that contains a open Folder button should slide in from the left

Step 2: Tap the Open Folder button

Step 3: Tap the Add a storage button

A popup with two input fields, Select folder and Folder name will appear.

Step 4: Tap on the select folder input field

This will open up your device file manager.

Step 5: Tap on the hamburger menu on the top-left corner of your phone

Termux will show up as one of the storage options on the menu that slides in.

Step 6: Tap the Termux storage option

This will display the folders available in the Termux storage directory. Tap your project folder and then tap on the Use this folder button at the bottom of your screen.

Tap Allow once prompted to grant Acode permission to access files in your project folder.

Tap OK once you're taken back to step 3 but with both the Select folder and the Folder name input fields filled with the necessary details.

This should take you back to step 1 but with your project folder being displayed.

Step 7: Tap on your project folder

Once in your project folder, click on the checkmark at the bottom-right corner of your screen.

Tap OK once prompted to confirm if you want Acode to list the files in your project folder.

You should now see the files in your project folder listed in the Acode editor as shown below:

Building the Todo App

Step 1: Create a new components folder

To create a new folder, simply tap on the kebab menu to the right of the src directory.

Then tap on the NEW FOLDER on the displayed menu. Tap Ok after entering components as the name of the folder. Your new folder should appear under the src directory.

Step 2: Create Three New Components

You are creating three new components: Input, Todos, and TodoItem. To create a new file in the components directory, tap the kebab menu to the right of the components folder and then tap on the NEW FILE option. Click OK after typing the name of the file.

Step 3: Edit the App.jsx file

Open the App.jsx file in the editor, paste the code below in the file, and save it.



import { useState } from "react"
import Input from "./Components/Input"
import Todos from "./Components/Todos"
import './App.css';

const INITIAL_TODO = [
    {
      id: crypto.randomUUID(),
      title: "Type your first todo"
    }
  ]

function App() {
  const [todos, setTodos] = useState(INITIAL_TODO)

  return (
    <div>
      <h1>Todo App</h1>
      <Input setTodos={setTodos} />
      <Todos todos={todos} />
    </div>
  )
}

export default App

Step 4: Edit the Input.jsx File

Open the Input.jsx file in the editor, paste the code below in the file, and save it:



import { useState } from "react"

function Input({setTodos}) {
  const [text, setText] = useState("")

  const handleSubmit = (e) => {
    e.preventDefault()

    setTodos((prevTodos) => ([
     ...prevTodos,
        { id: crypto.randomUUID(), title: text }
      ])
    )

    setText("")
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} placeholder="Type your Todo" onChange={(e) => setText(e.target.value)} />
    </form>
  )
}

export default Input;

Step 5: Edit the Todos.jsx File

Open the Todos.jsx file in the editor, paste the code below in the file, and save it.



import TodoItem from "./TodoItem"

function Todos({todos}){

  return (
      <ul>
        {todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
      </ul>
    )
}

export default Todos

Step 6: Edit the TodoItem.jsx file

Open the TodoItem.jsx component in the editor, paste the code below, and save it.



function TodoItem({todo}) {

  return (
      <li>
        <p>{todo.title}</p>
       <button>Delete</button>
      </li>
    )
}

export default TodoItem

Step 7: Add CSS styles

You will make minor changes to the default styles that comes with the scaffolded project. Open the App.css file in the code editor, paste the styles below in the file, and save it.



#root {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

ul {
  all: unset;
  width: 100%;
}

li {
  border: 2px solid gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-radius: 5px;
  max-width: 100%;
  padding: 0 10px;
}

input {
  width: 90%;
  padding: 15px;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}

p {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

Open the index.css file and paste the below styles in the file and save it.



:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  width: 100vw;
  text-align: center;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.2em .6em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  color: red;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  button {
    background-color: #f9f9f9;
  }
}

If you have followed the instructions correctly, you should be seeing the image below in your browser.

Configuring Git and GitHub

GitHub is the most popular web-based hosting platform for git repositories. You need to install and configure git before you can push your repositories to GitHub from Termux. Follow the steps below to configure git, and connect to GitHub:

Step 1: Install git and gh

GIT is a widely-used version control system commonly used for software development and other collaborative projects.
While gh helps us to access GitHub features such as pull requests, issues, and other GitHub concepts from the termux terminal.

Stop the development server by pressing ctrl + c on your keyboard. Then run the command below to install git and gh:



pkg install git gh

Step 2: Adding Git user Credentials

To use git, you first have to tell git who you are by adding your user credentials to git. Run the following command to add your username and email address to git:



#To setup git username
git config --global user.name <your_username>

#To confirm
git config --global user.name

#To setup git email
#It must be the same as the email 
#associated with your github account
git config --global user.email <your_email>

#To confirm
git config --global user.email

Step 3: Initialize git

Run the following commands to initialize and commit your files to git



#Initialize git
git init

#To add your files to git
git add .

#To commit all changes to git
git commit -m "initial commit"

Step 4: Authenticate with GitHub

Run the command below to authenticate your account:



gh auth login

Follow the prompts to authenticate your account with GitHub.

Step 5: Push your local repository to GitHub

To add your local repository to GitHub, simply follow the instructions here.

If you followed the instructions correctly, your project should show up on your GitHub repository once you refresh your browser.

Debugging the Application

Let's learn how to debug a React application on an Android device by making the the delete button functional.

Open the TodoItem.jsx file, paste the below code into it, and save the file.



const handleDeleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter(todo => id !== todo.id))
  }

The TodoItem.jsx file should now contain the below code:



function TodoItem({todo}) {

  const handleDeleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter(todo => id !== todo.id))
  }

  return (
      <li key={todo.id}>
        <p>{todo.title}</p>
        <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
      </li>
    )
}

export default TodoItem

If you click on the delete button, you will notice that the todo doesn't get deleted as expected because of an error in our code. Typically, when you encounter a bug when building a web application on a computer, you will open up your browser DevTools to find error messages logged to the console that will help you in fixing the bug. However, since you are developing on an Android Phone without access to the traditional browser DevTools, how do you debug the issue?. You can debug your React application using your Android phone by following the below steps:

Step 1: Download Eruda

Eruda is a browser-like application that gives you access to traditional browser DevTools found on computers through your Android phone. You can download the application from the google play store

Step 2: Open the development url in the Eruda browser

Simply copy the development url from your device browser and open it in the Eruda browser application.

Step 3: Click on the delete button

When you click on the delete button, you will notice that a devtool opens up in the Eruda browser with an error message logged to the Eruda console. The Eruda browser devtool contains the essential tools you will need to help debug your application on Android.

Step 4: Fixing the bug

According to the error message in the console, the delete button is not functioning as expected because the setTodos function used in the handleDeleteTodo is not defined. To fix the error, you simply have to pass the the setTodos function as a prop from the App component to the Todo component



import { useState } from "react"
import Input from "./Components/Input"
import Todos from "./Components/Todos"
import './App.css';

const INITIAL_TODO = [
    {
      id: crypto.randomUUID(),
      title: "Type your first todo"
    }
  ]

function App() {
  const [todos, setTodos] = useState(INITIAL_TODO)

  return (
    <div>
      <h1>Todo App</h1>
      <Input setTodos={setTodos} />
      {/*Passed the setTodos function as a 
      prop to the Todos component*/}
      <Todos todos={todos} setTodos={setTodos} />
    </div>
  )
}

export default App

And then you also pass the setTodos function as a prop to the TodoItem component as well:



import TodoItem from "./TodoItem"

function Todos({todos, setTodos}){

  return (
      <ul>
      {/*Passed the setTodos function to the 
      TodoItem Component*/}
        {todos.map((todo) => <TodoItem key={todo.id} todo={todo} setTodos={setTodos} />)}
      </ul>
    )
}

export default Todos

The TodoItem component should now look like this:



function TodoItem({todo, setTodos}) {

  const handleDeleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter(todo => id !== todo.id))
  }

  return (
      <li key={todo.id}>
        <p>{todo.title}</p>
        <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
      </li>
    )
}

export default TodoItem

The delete button should now work as expected.

Conclusion

Building web applications on an Android phone is not an easy task. Depending on your chosen Android code editor, you might miss the auto-completion, IntelliSense, and other powerful features typically found in desktop code editors. However, I hope that the knowledge you've gained in this article – from building React applications to sharing them on GitHub and debugging your React applications on an Android phone – has made it a little bit easier.

Bugs, Errors, and Lessons: A Beginner's Debugging Experience

Andrew Ezeani — Tue, 01 Aug 2023 11:24:02 +0000

When I began my career as a frontend developer, dealing with bugs and errors during the development of my personal projects was my greatest fear. The most daunting were those elusive bugs that do not throw any error messages, leaving me puzzled and reinforcing my imposter syndrome. I found that this was a common feeling among new developers when I spoke with others.
However, I soon realized that dreading these bugs will stunt my growth as a developer and will not make the bugs disappear. Instead, I overcame my fear by seeing these bugs as opportunities to learn and improve my skills. In this article I will share some bugs I encountered, how I successfully debugged them, and the invaluable lessons I learned throughout the process.

CSS Styling Issue

After completing my HTML and CSS lessons on Sololearn, I felt confident enough to tackle a simple project. A friend suggested Frontend Mentor, a platform that takes care of the design and allows you to focus on building projects. I registered and chose a simple QR code card component project for beginners. I downloaded the necessary file, created a new project folder, and opened it in VS Code. I started by writing the HTML markup and then moved on to the CSS styles. That was when I encountered my first bug - the browser was not updating the CSS styles I had written.
To debug the problem, I initially waited for a couple of minutes, assuming that my slow computer was responsible for the delay in the browser updates. But, even after waiting for some time, the changes were still not reflected in the browser. I then checked if I had used the correct selectors and scanned for any typographical errors in my code, but everything seemed fine.
To troubleshoot further, I changed the background colour property of the body element to red, saved the changes, and checked the browser again. There was still no change. I confirmed that the body tag was present by looking through the HTML document. This left me puzzled. I had correctly used the body tag as a selector in the CSS style sheet yet the browser did not reflect the styles. What could be the problem? I asked myself. Was CSS experiencing downtime? I pondered.
I realized the bug was not caused by a CSS downtime when to my surprise, the background colour changed to blue when I changed the background colour property of the body tag to blue using inline CSS. This piqued my interest, I converted the CSS style from an inline to an internal style and this time I opted for a purple background colour. Once again, the background colour changed to purple.
Feeling frustrated, I took a break from the project. While resting, I realized I had not checked if I linked my external CSS style sheet to the HTML document. I quickly booted up my computer, opened VS Code, and inspected the HTML document. To my surprise, I discovered I did not link the CSS style sheet to the HTML document.
Eager to rectify my mistake, I looked through my notebook for the syntax for linking a CSS style sheet to an HTML document. I added the code to the HTML document, saved it, and eagerly checked my browser. However, the background colour remained purple instead of the expected red from the external style sheet. I became confused for a moment, and I almost resumed my break. Then I realized, I had forgotten to remove the internal CSS styles I had previously written. Without hesitation, I immediately removed the internal CSS from the HTML document. The background colour of the webpage finally changed to red in the browser. This moment was particularly fulfilling for me, as it marked the resolution of my first bug without external help.
This experience taught me the importance of double-checking if the code generated using VS Code Emmet or any other shorthand extensions produces the code I intended. Here, I used VS Code Emmet to generate the boilerplate code for the HTML document and mistakenly assumed that it also linked my CSS style sheet to the HTML document. As a result, verifying if the CSS style sheet is linked to the HTML document was not the first step I took, leading to this oversight.

Inaccessible DOM elements

I was working on the FAQ section of a project from Frontend Mentor when I encountered another bug that puzzled me. The JavaScript code responsible for the FAQ functionality seemed perfect, but when I clicked on the button meant to expand the question panel to reveal the answer there was no response.
To troubleshoot this issue, I carefully checked my code for typographical errors, but I couldn't find any. I also verified that the CSS selectors used to target the DOM elements in the JavaScript file matched those in the HTML markup.
To gain more insight, I commented out the code within the event-listener function and logged a message to the browser when the button is clicked. However, when I clicked the button and checked the browser console, there was no message. I tried isolating the problem by verifying if the other sections of the website were responding to interactivity. After a quick examination, it became apparent that the issue was specific to the FAQ section. This discovery left me puzzled.
To be honest, finding the solution to this bug was a coincidence. As I carefully reviewed my HTML document, I realized I had placed the script tag below other sections but above the FAQ section. Remembering what I had consistently done in previous projects, I moved the script tag to the bottom of the file, just above the closing body tag and then saved the file. I then restarted my live server. On clicking the button after the page has loaded, I found to my surprise; the message logged to the console.
At first, I thought the bug was from the live server extension I was using because it was only after the live server extension had been restarted did the message get logged to the console. But then I remembered, that I had also changed the location of the script tag. In order to confirm where the bug originated from, I moved the script tag back to its previous location and then I restarted the live server extension. When I clicked on the button after the page has loaded, there was no message logged to the console. I then moved the script tag to the previous location where clicking on the button logged the message to the console but this time, I did not restart the live server. Upon clicking the button once again, the message was now logged to the console. That was when I realized that the position of the script tag on the HTML document caused the bug and not the live server extension.
By resolving this bug, I gained valuable knowledge regarding the importance of script tag placement. Script tags are typically positioned below all HTML elements within the body tag or in the head tag with the defer attribute if the order of execution is important or an async attribute if it isn't. This ensures sequential page loading, allowing the JavaScript code to access the fully created DOM elements. The initial placement of the script tag before the FAQ section hindered my ability to interact with the DOM elements because the JavaScript file is loaded and executed before the FAQ section DOM elements are created.

Unexpected Behavior in Product Gallery Navigation

I was working on the product gallery page for this project when I encountered unexpected behaviour in the gallery section. In desktop view, clicking on the main product image opens an overlay with a product gallery, which was functioning as intended. When the next button or previous button is clicked, both the main image in the overlay gallery and the background gallery were supposed to change simultaneously. This also worked as expected. However, I noticed that when I clicked on the next button and then clicked on the previous arrow, the displayed image is the next image in the array instead of the previous image. But subsequent clicks of the previous button exhibited the expected behaviour. Similarly, when I clicked on the previous button and then clicked on the next button, the displayed image is the previous image in the array instead of the next image. However, subsequent clicks of the next button produced the expected behaviour. You can see a preview of this behaviour below:

To fix this bug, I followed my debugging routine. First, I checked for any typographical errors in the code but found none. Then, I examined the functions responsible for handling the behaviour when either the next arrow or previous arrow was clicked, searching for any errors. During this examination, I noticed that both of the functions handle state updates. So I decided to take a break and learn more about the useState hook in React.
I started by watching YouTube videos, but I found that the information presented was already familiar to me. Therefore, I turned to Google and looked for articles specifically about the useState hook in React. Personally, I preferred articles when learning programming concepts when I can't find a good video tutorial to reading the official documentation. I normally find official documentation to be less engaging, clear or just written with an assumed minimum technical knowledge. After reading a few articles and not discovering anything new or different from what I already knew about the useState hook, I finally resorted to reading the official documentation.
While reading the useState hook section of the official React documentation, I found the reason for the bug. It turned out that I was setting a new value for the state while simultaneously trying to access that new value. In both the showNextImage and the showPreviousImage functions, I was updating two states simultaneously, where the value of productHeroImage depended on obtaining the updated value of index to work properly. The code snippet below, taken from theProductImageCarousel.jsx file, highlights the issue:

import "../styles/product-image-carousel.css";
import arrowIcon from "../assets/icon-next.svg";
import useAppContext from "../hooks/useAppContext";

function ProductImageCarousel() {
  const {
    setIndex,
    index,
    productImages,
    productHeroImage,
    setProductHeroImage
  } = useAppContext();

  const showNextImage = () => {
    setIndex((prevIndex) => prevIndex + 1);
    setProductHeroImage(productImages[index].img);
  };

  const showPreviousImage = () => {
    setIndex((prevIndex) => prevIndex - 1);
    setProductHeroImage(productImages[index].img);
  };

  return (
    <div className="hero-image-container">
      <div className="carousel-control-container">
        <button onClick={showPreviousImage}>
          <img src={arrowIcon} alt="" className="arrow prev" />
        </button>
        <button onClick={showNextImage}>
          <img src={arrowIcon} alt="" className="arrow next" />
        </button>
      </div>
      <img src={productHeroImage} alt="" />
    </div>
  );
};

export default ProductImageCarousel;

Based on my understanding of how the useState hook worked, I thought that since the state would be updated before re-rendering, the setProductHeroImage state updater function would have access to the updated index value just before the re-rendering occurred. Subsequently, it would update its own value, causing a re-render. In this scenario, react would re-render twice because I changed the state in the function twice. However, upon reading the official React documentation, I learned that React batches state updates and does not immediately re-render when it encounters multiple state changes within a function. Instead, it runs all the code in the function call, updates the state changes, and then re-renders the component and its children. After improving my knowledge of how React handles state updates, I removed the unnecessary productHeroImage state from the context of my app and instead I displayed the correct image by making sure that the image src is the same as the image path at the current value of index in the productImages array.

import "../styles/product-image-carousel.css";
import arrowIcon from "../assets/icon-next.svg";
import useAppContext from "../hooks/useAppContext";

function ProductImageCarousel(){
  const { setIndex, index, productImages } = useAppContext();

  return (
    <div className="hero-image-container">
      <div className="carousel-control-container">
        <button onClick={() => setIndex((prevIndex) => prevIndex - 1)}>
          <img src={arrowIcon} alt="" className="arrow prev" />
        </button>
        <button onClick={() => setIndex((prevIndex) => prevIndex + 1)}>
          <img src={arrowIcon} alt="" className="arrow next" />
        </button>
      </div>
      <img src={productImages[index].img} alt="" />
    </picture>
  );
};

export default ProductImageCarousel;

The product gallery is now functioning as expected.

This experience taught me the significance of reading documentation. I have learnt to accept the fact that, although I enjoy learning new programming concepts via videos and articles, they sometimes neglect or briefly explain important information that good documentation provides in detail. I now always refer to documentation whenever I need further insights on any programming concept implementation. The React docs, in particular, have captured my attention with their clarity and aesthetically pleasing design, making them my go-to resource.

Conclusion

The turning point in my learning journey came when I embraced bugs as learning opportunities instead of something to dread. In this article, I shared my experiences of encountering and fixing various bugs, each contributing to my growth as a developer.
Now, I see error messages as helpful guides, that lead me to the source of my problem, rather than signboards announcing that I am an imposter. Having a change of mindset regarding bugs has made writing code more interesting; the satisfaction of fixing each bug serves as a dopamine boost, fueling my passion for development.
If you feel like an imposter when you encounter bugs, don't be discouraged. It's part of the learning process. For every bug you fix, your skills improve and your confidence is boosted. As you continue on your coding journey, remember that continuous learning and practice are essential components for your growth as a developer.

How To Create Absolute Imports In Vite React App: A step-by-step Guide

Andrew Ezeani — Fri, 24 Feb 2023 16:28:35 +0000

Introduction
The Problem
Prerequisite
Setting up the Vite React project for absolute imports
- Creating a Vite React app
- Configuring the project to use absolute imports
- Configuring VS Code IntelliSense
Practical Tips from Readers
Conclusion

Introduction

Relative imports are the default way to reference source files in JavaScript projects. However, as the codebase becomes more extensive and complex, it can become difficult to locate the correct source file when you need to make changes or during debugging. Absolute imports provide a clear and consistent way to locate and reference source files, making organising and maintaining your project easier.

In this guide, I will teach you how to create absolute imports in a Vite-powered React app, step by step. I will also teach you how to set up your project, configure the Vite.config.js file to resolve absolute imports in your app, how to import components using absolute paths, and how to configure vscode Intellisense to recognize absolute imports. By the end of this guide, you'll have learnt how to configure and use absolute imports in your Vite React app.

The problem

When building applications in React, depending on the level of complexity and file structure, an import statement could end up looking like this import Button from "../../../components/Button"; when importing components:

If during reorganization, the Button component is moved to a new folder, the app breaks down because the app can no longer locate the Button component in the current import path. Therefore, the import path needs to be updated to reflect the change.

To fix it, an extra ../ is added to enable the app locate the Button component. This means that, whenever there is a change in the codebase all the import statements relating to the changed file will have to be updated. This could lead to longer time spent trying to locate a component when debugging the app.

Absolute imports on the other hand, reference source files using a fixed file path, regardless of the location of the file making the import. Absolute imports make it easier to locate the source file you're looking for, especially in larger codebases. In a Vite-powered React app, you can create absolute imports by configuring the Vite.config.js file to to resolve absolute imports in your app. For example the same Button component can be imported using the the absolute path syntax below:

import Button from "src/components/Button;

Prerequisite

The reader should have both Nodejs and Vite installed
The reader should be familiar with the es6 import and export syntax.
The reader should also know the basics of react

Setting up the Vite React project for absolute imports

To set up a Vite React project for absolute imports, you'll need to first create a React app using Vite. I will quickly walk you through the process below:

Creating a Vite React app

To create a Vite React app, simply run the below command in the command line:

npm create vite@latest – –template react demo-app

The command will create a boilerplate code for our react app. I named mine demo-app. You can name yours any name you want. Next, we move into our project directory by running the below code in the command line:

cd demo-app

Once you're in the project directory, run the below command to install all the necessary dependencies needed for the app to work

npm install

After the dependencies have been installed, simply run the command below to start up the development server

npm run dev

If you followed the instructions correctly, you should be seeing the below image in your browser

Let's make some changes to the project. Create two new folders named components and pages respectively in the src directory. In the components directory create a new folder named Button. In this new folder, create a new file named Button.jsx, copy and paste the below code in it and save the file.



function Button() {
  return (
    <button>Random Button</button>
  )
}

export default Button

Also create a new folder in the pages folder named Home. In this new folder, create a new file named Home.jsx, copy and paste the below code in it, then save the file.



function Home() {
  return (
    <>
      <h1>This is The HomePage</h1>
    </>
  );
}
export default Home;

The next step, is to replace the boilerplate code present in the App.jsx file with the code below:



import "./App.css";
import Home from "./pages/Home";

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;

With this changes saved, this is what you should now see in your browser.

Configuring the project to use absolute imports

To configure your app to use absolute import, you need to make some changes to the vite.config.js file, which is found at the root of your project directory.

Add the code below to the vite.config.js file



resolve: {
    alias: {
      src: "/src",
    },
  },

Your vite.config.js should now look like this:



import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: "/src",
    },
  },
});

The development server will restart once you save the file. Now that absolute import has been configured for the project, any file can be imported using the alias created in the vite.config.js file.

Here's an example of how the Button component in our app can be imported:



import Button from "src/components/Button/Button"

Now, whenever vite sees src at the beginning of our import path during the development or build process, it is resolved to ./src because of the configurations in the vite.config.file. This makes it easier to locate the component, even as your codebase grows.

Configuring VS Code IntelliSense

Currently, when you try to import the Button component, VS Code intelliSense still suggest file paths using relative path.

For example if you try importing the Button component in our Home page in the pages folder. VsCode still uses the relative import syntax to suggest the location of the component.

This is because we have not yet configured VsCode intelliSense to recognize absolute import paths. To configure VS Code intelliSense, you simply need to create a new file named jsconfig.json in the root directory of your project and add the following code to the file:



{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["./src/*"],
    }
  }
}

The intellisense configurations for your Vscode will automatically be updated once the file is saved. Now, when the Button component is being imported again, the file path suggestion provided by VsCode intelliSense is the absolute import path.

Practical Tips from Readers

This section was added to spotlight helpful tips provided by readers that might otherwise get lost in the comment section.

This tip by @divensky, is a good solution for fixing issues with Typescript not recognizing path aliases

Conclusion

By following the steps outlined in this guide, you have learnt how to set up a vite React app, how to configure the vite.config.js file to resolve absolute paths in your app, how to import components using absolute imports and how to configure VsCode intellisense to recognize absolute import path in your app.

Forem: Andrew Ezeani

How To Create a React Application on an Android Device: A Step-by-Step Guide

Table of Content

Introduction

Prerequisites

Setting up your Android Phone

Developing the Todo App with Acode

Importing the project into Acode

Building the Todo App

Configuring Git and GitHub

Debugging the Application

Conclusion

Bugs, Errors, and Lessons: A Beginner's Debugging Experience

CSS Styling Issue

Inaccessible DOM elements

Unexpected Behavior in Product Gallery Navigation

Conclusion

How To Create Absolute Imports In Vite React App: A step-by-step Guide

Table of Contents

Introduction

The problem

Prerequisite

Setting up the Vite React project for absolute imports

Creating a Vite React app

Configuring the project to use absolute imports

Configuring VS Code IntelliSense

Practical Tips from Readers

Conclusion