Month: February 2024

How to render JSX in HTML

Posted on by adnanafzal565

In this tutorial, you will learn how to render JSX in HTML.

Video tutorial:

Include JS files

First, you need to include the required JS files. The required JS files are:

  1. React
  2. React DOM
  3. Babel

You can download all these files from cdnjs.com. Make sure to include the UMD version and not CJS.

  • CJS: Common JS
  • UMD: Universal Module Definition

You might like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.10/babel.js"></script>

Render JSX

The following code will render the JSX code directly in HTML.

<div id="app"></div>

<script type="text/babel">

	function MyApp() {
		return (
			<h1>Hello JSX</h1>
		)
	}

	ReactDOM.createRoot(
		document.getElementById("app")
	).render(<MyApp />)
</script>

Make sure to set the type of script tag as “text/babel”.

Render JSX from an external JS file

To render JSX from an external JS file, you first need to include the JS file with a script tag having type as “text/babel”.

<script type="text/babel" src="js/MyApp.js"></script>

Then your “js/MyApp.js” file will look like this.

// src/MyApp.js

function MyApp() {
	return (
		<h1>Hello JSX</h1>
	)
}

ReactDOM.createRoot(
	document.getElementById("app")
).render(<MyApp />)

Check out our more tutorials on React JS. If you face any problem in following this, kindly do let me know.

Download

Media Queries in CSS

Posted on by adnanafzal565

Learn how to make your website responsive on desktops, tablets, and mobile phones, using media queries in CSS.

What are media queries ?

In CSS, media queries are used to apply styles on your website based on the properties of the user’s device. It helps you make your website responsive on all devices (desktops, tablets, and mobile phones).

Video Tutorial

If you prefer following a video tutorial, here you are:

We will be using a grid column. So let’s say you have a row container with 12 columns in it.

<div class="row">
	<div class="col">1</div>
	<div class="col">2</div>
	<div class="col">3</div>
	<div class="col">4</div>
	<div class="col">5</div>
	<div class="col">6</div>
	<div class="col">7</div>
	<div class="col">8</div>
	<div class="col">9</div>
	<div class="col">10</div>
	<div class="col">11</div>
	<div class="col">12</div>
</div>

First, we will tell that the row will be a grid having 12 columns in total. While having each column equally sized.

.row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 5px;
}

Media Query for Desktop

For desktop devices, you can write the following media query in CSS.

/* for desktop */
@media (min-width: 992px) {
	.col {
		grid-column: auto/span 1;
	}
}

It will check if the device width exceeds 992px, then it will divide the column into 12 parts. i.e. 12 / 1 = 12 columns

Media Query for Tablet

The following media query will be used for tablet devices.

/* for tablets */
@media (min-width: 768px) and (max-width: 991px) {
	.col {
		grid-column: auto/span 3; /* 12 / 3 = 4 columns for tablet */
	}
}

Media Queries for Mobile and Small Devices

For mobile devices, we will show 2 columns, and for small phones (having a resolution of less than 767px) we will show 1 column.

/* for mobile */
@media (max-width: 767px) {
	.col {
		grid-column: auto/span 6; /* 12 / 6 = 2 columns for mobile */
	}
}

/* for small devices */
@media (max-width: 320px) {
	.col {
		grid-column: auto/span 12; /* 12 / 12 = 1 column for small devices */
	}
}

That’s it. That’s how you can use media queries in CSS and make your website responsive for all devices. If you face any problem in following this, kindly do let me know.

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.

Update all dependencies at once in NPM

Posted on by adnanafzal565

To update all dependencies in your project using NPM, you need to use the module “npm-check-updates” (NCU) globally and run its command:

npm install -g npm-check-updates
ncu -u
npm install
  1. npm install -g npm-check-updates: This will install the “npm-check-updates” module globally in your system. So you will be able to run the command “ncu” directly in your terminal.
  2. ncu -u: This will update your package.json
  3. npm install: This will finally update all your modules inside the “node_modules” folder.

If you face any problem with this, kindly do let me know.