Tag: learn react

Show UI if a variable is true – React JS

Posted on by adnanafzal565

In this article, we will discuss how you can hide or show any UI if the value of a variable is true in React JS. Following this tutorial, you will also learn how to use the if condition in React JS. You just need to do 3 things:

  1. Import useState from “react”
  2. Create a variable
  3. Show UI only if that variable is true

Here is the code:

import { useState } from "react"

function App() {

  const [showButton, setShowButton] = useState(false)

  return (
    <button>Always show</button>

    { showButton && (
        <button>
          Show only when required
        </button>
    ) }
  )
}

export default App

By default, you will not see the second button because the default value is false. Try changing the value of the variable from false to true, you will start seeing the UI.

Check out our more tutorials on React JS.

Routing in React JS

Posted on by adnanafzal565

Routing in React JS can be achieved using a module “react-router-dom”. This module provides all the functionality required for creating links and displaying components based on the current route.

Installing “react-router-dom”

First, you need to install this module by running the following command at the root of your project:

npm install react-router-dom

Creating routes

Then open the “src/App.js” file and import BrowserRouter from “react-router-dom”.

// src/App.js

import { BrowserRouter } from "react-router-dom"

Then wrap all the tags of function App() inside BrowserRouter.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

Then import Routes from “react-router-dom” and create its tag where you want to display the component when a specific link is accessed.

import { BrowserRouter, Routes } from "react-router-dom"

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Routes>
            
          </Routes>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

After that, import Route from “react-router-dom” and create as many routes as required inside the Routes tag.

import { BrowserRouter, Routes, Route } from "react-router-dom"

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Routes>
              <Route path="/" element={ <Home /> } />
              <Route path="/About" element={ <About /> } />
          </Routes>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

Then you need to import these components.

import Home from "./components/Home"
import About from "./components/About"

function App() {
	...
}

Creating components

Create a folder named “components” inside your “src” folder and create 2 files in it.

  1. src/components/Home.js
  2. src/components/About.js

Following will be the code of these 2 files.

// src/components/Home.js

function Home() {
	return (
		<h1>Home</h1>
	)
}

export default Home
// src/components/About.js

function About() {
	return (
		<h1>About</h1>
	)
}

export default About

At this point, you will see the Home component at the main route.

Routing in React JS - Home route
Routing in React JS – Home route

Creating navigation links

Now we need to create navigation links for each route. So import the Link from “react-router-dom” and create 2 links from it.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom"

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Routes>
              <Route path="/" element={ <Home /> } />
              <Route path="/About" element={ <About /> } />
          </Routes>

          <Link to="/" style={{
            color: "white"
          }}>
            Home
          </Link>

          <Link to="/About" style={{
            color: "white"
          }}>
            About
          </Link>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

If you refresh the page now, you will see 2 links. On clicking any link, you will see that its relevant component is displayed.

Routing in React JS - Navigation links
Routing in React JS – Navigation links

Additional: Lazy load components

You can also lazy load your components, which means that your component will only be imported when it is accessed. It is great for larger apps where a large number of components are being created. For that, first, you need to import lazy from “react”.

import { lazy } from "react"

Then you need to change the way you are importing your components.

// import Home from "./components/Home"
// import About from "./components/About"

const Home = lazy(function () {
  return import ("./components/Home")
})

const About = lazy(function () {
  return import ("./components/About")
})

When lazy loading your components, you need to wrap your <Routes> tag inside Suspense. So import it and wrap your routes inside it.

import { lazy, Suspense } from "react"

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Suspense fallback={ <h3>Loading...</h3> }>
            <Routes>
              <Route path="/" element={ <Home /> } />
              <Route path="/About" element={ <About /> } />
            </Routes>
          </Suspense>

          <Link to="/" style={{
            color: "white"
          }}>
            Home
          </Link>

          <Link to="/About" style={{
            color: "white"
          }}>
            About
          </Link>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

fallback is used to display a UI component until the actual component gets loaded.

So that’s it. That’s how you can create routing in your React JS app. If you face any issues in following this, kindly do let me know. I created a Social Networking website in React JS that uses this routing mechanism. You can download it from here for free.

How to create a new React JS project

Posted on by adnanafzal565

Many people want to learn React JS, but they don’t know where to start. The most basic thing is to start by creating a new project in React JS. To create a new React JS project, you first need to make sure you have Node.js installed in your system. If you do not have Node.js installed in your system, you can download it from here. Try downloading the LTS version.

Once you have Node.js installed in your system, run the following command:

npm install -g npx

This will install the NPX module globally. NPX is a command-line tool used to run NPM packages directly without needing to install them locally or globally.

Then run the following command to create a new folder for your React JS project:

npx create-react-app my-react-app

Replace “my-react-app” with the folder name you want to be created. If you are planning to give spaces in the name of the folder, enclose them in double quotes “”. This will create a new folder named “my-react-app”. Open the terminal inside this folder and run the React JS project.

cd my-react-app
npm start

At this point, you will see the following page. It will automatically be opened in your browser:

Create new React JS project
Create new React JS project

We created a free Social Network project in React JS. You can download it and see the code to learn more.