Tech That Matters

Tag: react js

How To Create A Modern Website Using React Js Step-By-Step Website Tutorial

Sticky post
How To Create A Modern Website Using React Js

Are you looking to create a modern website using React? In this step-by-step tutorial, you’ll learn how to set up your development environment, and we will learn How To Create A Modern Website Using React Js .creating a new React project, and build a sleek website using React components and libraries. From installing Node.js and selecting a text editor to coding custom components and using popular libraries like React Router and Bootstrap, this tutorial covers everything you need to know to create a professional-looking website. Whether you’re a beginner or an experienced developer, this guide will help you take your web development skills to the next level. Follow along and create your own stunning website today!. Be ready of a tutorial How To Make Website a modern website using React | Create Website Header Design

App.js

Let’s start by creating an app.js file and writing all the HTML elements.Let’s begin by creating the website’s skeleton using simple HTML. The navbar must come first, followed by the header and finally the picture section of the website. You may use the code below to

import "./App.css";
function App() {
  return (
    <div className="container">
      <nav>
        <img src="images/logo.png" className="logo" alt="imaged" />
        <ul>
          <li>
            <a href="www.ziontutorial.com">Traval Guide</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Famous Places</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Contact Us</a>
          </li>
        </ul>
        <button className="btn">
          <img src="images/icon.png" alt="icon" /> Bookings
        </button>
      </nav>
      <div className="content">
        <h1>
          Beautiful
          <br />
          Places to explore
        </h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </p>
        <form>
          <input type="text" placeholder="Country Name" />
          <button type="submit" className="btn">
            Search
          </button>
        </form>
      </div>
      <p></p>
    </div>
  );
}

export default App;

Let’s write all the CSS and the landing page which will make this landing page very beautiful.

App.css

Let’s create a really simple CSS style for our header portion. As I mentioned in the previous section, we generated the navbar, header text, and header picture using HTML. Now that we have these components, let’s add some CSS to our skeleton to make the header seem lovely. I’ve listed all the code necessary to construct our header below. You may check this out and experiment with these values to see what happens.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

.container {
  width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(rgb(9, 0, 77, 0.65), rgba(9, 0, 77, 0.65));
  background-image: url("https://source.unsplash.com/random/1920x1080/?wallpaper,landscape");

  background-size: cover;
  background-position: center;
  padding: 10px 8%;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.logo {
  width: 180px;
  cursor: pointer;
}

nav ul {
  list-style: none;
  width: 100%;
  text-align: right;
  padding-right: 60px;
}

nav ul li {
  display: inline-block;
  margin: 10px 20px;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
}

.btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 5px;
  background: #f5168d;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
}

.btn img {
  width: 20px;
  margin-right: 10px;
}

.content {
  margin-top: 14%;
  color: #fff;
  max-width: 620px;
}

.content h1 {
  font-size: 70px;
  font-weight: 800;
  line-height: 85px;
  margin-bottom: 25px;
}

.content form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
}

.content form input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 16px;
  padding-left: 10px;
}

.content form .btn {
  font-size: 15px;
  padding: 10px 30px;
}

⭐ Conclusion

via GIPHY

We did it! ? Hope you like How To Create A Modern Website Using React Js. For such projects do visits and comment on which project should I pick next.

Check out this How to Install WordPress on Localhost | Xammp. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

Create Stunning User Interfaces with These Top 30 React UI libraries

Create Stunning User Interfaces with These Top 30 React UI libraries

Sticky post
React UI libraries

React is a popular JavaScript library for building user interfaces. Its flexibility, performance, and ease of use have made it a go-to choice for developers looking to create complex, dynamic applications. With the help of the extensive library ecosystem, developers can quickly and easily build out the user interface of their React applications without having to start from scratch. In this article, we will explore the top 30 React libraries that can be used to enhance the UI of your application. These libraries include a variety of tools for building everything from navigation menus and modals to calendars and image croppers. Whether you are just starting out with React or looking to take your skills to the next level, these libraries will help you build powerful, beautiful, and responsive user interfaces.

Lists Of React UI libraries

  1. React Router: React Router is a popular routing library for React that allows you to handle navigation and routing in your web application. Link: https://reactrouter.com/
  2. React Redux: Redux is a predictable state container for JavaScript apps. React Redux is the official React binding for Redux. Link: https://react-redux.js.org/
  3. Material-UI: MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. https://mui.com/

  1. React Bootstrap: React Bootstrap is a popular UI library that provides a set of reusable components for building responsive and mobile-first web applications. Link: https://react-bootstrap.github.io/
  2. Ant Design: Ant Design is a comprehensive UI library that provides a wide range of components for building high-quality web applications. Link: https://ant.design/
  3. Styled Components: Styled Components is a popular library for styling React components with CSS. It allows you to write CSS directly in your JavaScript code. Link: https://styled-components.com/
  4. React Select: React Select is a flexible and easy-to-use library for building select inputs in React. It provides a range of features such as search, async loading, and multi-select. Link: https://react-select.com/home
  5. React Toastify: React Toastify is a simple and customizable toast library for React that provides a range of notification styles such as success, warning, and error. Link: https://github.com/fkhadra/react-toastify
  6. React Virtualized: React Virtualized is a library for efficiently rendering large lists and tables in React. It provides a set of components such as List, Table, and Grid that can handle thousands of rows with ease. Link: https://bvaughn.github.io/react-virtualized/#/components/List
  7. React DnD: React DnD is a drag and drop library for React that allows you to build complex drag and drop interfaces with ease. Link: https://react-dnd.github.io/react-dnd/about
  8. React Icons: React Icons is a library of popular icons such as Font Awesome, Material Design, and Feather Icons that can be easily used in React projects. Link: https://react-icons.github.io/react-icons/
  9. React Query: React Query is a powerful and flexible library for managing and caching server state in React applications. It provides a range of features such as pagination, caching, and refetching. Link: https://react-query.tanstack.com/
  10. React Hook Form: React Hook Form is a lightweight and flexible form library for React that uses hooks to manage form state. It provides a range of features such as validation, error messages, and submission handling. Link: https://react-hook-form.com/
  11. React Helmet: React Helmet is a library for managing the head section of your React app. It allows you to dynamically set the title, meta tags, and other important information. Link: https://github.com/nfl/react-helmet
  12. React Table: React Table is a library for building advanced tables and data grids in React. It provides a range of features such as sorting, filtering, and pagination. Link: https://react-table.tanstack.com/
  13. React Query Builder: React Query Builder is a library for building complex and dynamic queries in React. It provides a range of features such as drag and drop interface, validation, and query generation. Link: https://github.com/ukrbublik/react-awesome-query-builder
  14. React Image Gallery: React Image Gallery is a flexible and customizable library for building responsive image galleries in React. It provides a range of features such as lazy loading, zoom, and fullscreen mode. Link: https://www.npmjs.com/package/react-image-gallery
  15. React Date Picker: React Date Picker is a library for building flexible and customizable date pickers in React. It provides a range of features such as range selection, disabled dates, and internationalization. Link: https://reactdatepicker.com/
  16. React Modal: React Modal is a library for building modal dialogs in React
  17. React Big Calendar: React Big Calendar is a popular library for building interactive calendars in React. It provides a range of features such as drag and drop events, date selection, and customizable views. Link: https://jquense.github.io/react-big-calendar/examples/index.html
  18. React Masonry: React Masonry is a library for building dynamic and responsive masonry layouts in React. It provides a simple and easy-to-use interface for creating grids of varying sizes and styles. Link: https://github.com/eiriklv/react-masonry
  19. React Color: React Color is a library for building customizable color pickers in React. It provides a range of features such as swatches, saturation, and hue controls. Link: https://casesandberg.github.io/react-color/
  20. React Slick: React Slick is a popular library for building responsive and customizable carousel components in React. It provides a range of features such as autoplay, infinite scrolling, and variable widths. Link: https://react-slick.neostack.com/
  21. React Beautiful Dnd: React Beautiful Dnd is a drag and drop library for React that provides a simple and easy-to-use interface for building advanced drag and drop components. Link: https://github.com/atlassian/react-beautiful-dnd
  22. React Content Loader: React Content Loader is a library for building customizable placeholder loading animations in React. It provides a range of pre-built animations that can be easily customized to fit your project. Link: https://skeletonreact.com/
  23. React Leaflet: React Leaflet is a library for building interactive maps in React using Leaflet. It provides a range of features such as zoom, pan, and markers. Link: https://react-leaflet.js.org/
  24. React Image Cropper: React Image Cropper is a library for building image croppers in React. It provides a range of features such as zoom, rotation, and aspect ratio control. Link: https://github.com/DominicTobias/react-image-crop
  25. React Elastic Carousel: React Elastic Carousel is a library for building dynamic and flexible carousels in React. It provides a range of features such as elastic scrolling, lazy loading, and customizable options. Link: https://www.npmjs.com/package/react-elastic-carousel
  26. React Native Web: React Native Web is a library that allows you to use React Native components in web applications. It provides a range of features such as platform-specific code, performance optimizations, and code sharing between web and mobile platforms. Link: https://necolas.github.io/react-native-web/docs/
  27. React Swipeable: React Swipeable is a library for building swipeable components in React. It provides a range of features such as touch and mouse support, direction detection, and velocity calculation. Link: https://github.com/FormidableLabs/react-swipeable

Conclusion

React’s popularity continues to grow, thanks to its flexibility, performance, and ease of use. With the vast array of libraries available, developers can easily create dynamic and engaging user interfaces. In this article, we have explored the top 30 React UI libraries that can be used to enhance the UI of your application. From navigation menus and modals to calendars and image croppers, these libraries offer a wide range of tools to help you build powerful, beautiful, and responsive user interfaces. By taking advantage of these libraries, developers can streamline their development process, reduce their workload, and create more compelling applications. We hope this list of libraries will inspire you to create beautiful and functional UIs in your React applications.

People are also reading:

How To Build A Simple Counter App In React

Sticky post
 Build A Simple Counter App  using react js

React is a JavaScript toolkit for building interactive user interfaces (UIs) that is becoming more and more well-liked among developers worldwide. How To Build A Simple Counter App In React after learning the language?

Prerequisites

The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:

  • Basics for HTML and CSS
  • Javascript
  • Basics of React.js in ES6

Note: join Our telegram Channel mostly available on that platform you can ask any question.

What we will Learn

Here we will discuss the basic term and concept of react js. we will learn to code a simple counter app using the React.js library. The workflow of the React counter app will be the same as below.

Video Tutorial | Build A Simple Counter App In React

Before forwarding, we need to understand some terms and concepts in React:-

1. Components :

The React component split the UI into independent, reusable pieces. Which you can use whenever you want

2. States:

Some components may need to store some values. States are used to store values specific to a component.

3. Props :

we want to pass a state from one component to another, props are used.

4. useState:

This is a hook that let you add a state to functional components

Packages to be installed

Let’s start with the first step to install the dependencies. We have to visit the material UI to install the dependencies.

Link to install material UI packages: https://mui.com/material-ui/getting-started/installation/

How To Build A Simple Counter App In React

1. Install React

After the successful installation of Nodejs, install and set up a React app using the below command.

npx create-react-app react-counter-app

Then jump to that folder eg. if your folder name is react-counter-app the type

cd react-counter-app

After that Go to the App.js file and start your coding part here we will define our state and functions which are required to increment and decrement our numbers .

2. Define the state and functions of your app

here I am defining my state in app.js

const [counter, setCounter] = useState(0);

After that lets move to function which help to make counter work .

const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1)
  }
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented 
// Also prevent to reched -1 value in this counter

    if(counter === 0)
    {
      return 0;
    }
    
    else {
    setCounter(counter - 1)
    }
  }
  const handleClick3 = () => {
    // Counter state is help to refresh and make counter value to zero
    setCounter(counter == 0);
    window.location.reload()
  }

Last but not least our return part where we have implemented our form and triggers to call functions

 return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>
 
    <div className="app">
       
      <div className='container'>           
        <div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right,  rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))`}}>
      <div className='right'>
      <svg onClick={handleClick3} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z"/></svg>
      </div> 
          <div className='card_text '>
          <h3 className='total_amount_heading'>{counter}</h3>
          </div>
        </div>
        <form >
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button   onClick={handleClick1}  variant="contained" className='btn_one'>+</Button>
          <Button   onClick={handleClick2}   variant="contained" className='btn_two'>-</Button>
          </Stack>
        </div>
        </form>
 
      </div>      
    </div>
    </>
  );

3 Source Code App.js

import './App.css';
import Box from '@mui/material/Box';
// import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'
 
function App() {

  const [counter, setCounter] = useState(0);
 
  const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1)
  }
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented

    if(counter === 0)
    {
      return 0;
    }
    
    else {
    setCounter(counter - 1)
    }
  }
  const handleClick3 = () => {
    // Counter state is incremented
    setCounter(counter == 0);
    window.location.reload()
  }

  return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>
 
    <div className="app">
       
      <div className='container'>           
        <div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right,  rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))`}}>
      <div className='right'>
      <svg onClick={handleClick3} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z"/></svg>
      </div> 
          <div className='card_text '>
          <h3 className='total_amount_heading'>{counter}</h3>
          </div>
        </div>
        <form >
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button   onClick={handleClick1}  variant="contained" className='btn_one'>+</Button>
          <Button   onClick={handleClick2}   variant="contained" className='btn_two'>-</Button>
          </Stack>
        </div>
        </form>
 
      </div>      
    </div>
    </>
  );
}
 
export default App;

4. CSS Part For This App

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}
 
.container {
  background-color: #FAF9FA;
  border-radius: 8px;
  padding: 3rem;
  margin-top: 6rem;
}
.heading_text
{
  font-size: 15px !important;
  font-weight: 400;
}
.heading_two
{
  padding-top: 5px;
}
.total_amount_card
{
  height: 537px;
  background-color: #D6FF58;
  border-radius: 27px; 
}

.right
{
  float: right;
  margin-top: -2rem;
}
.card_text {
  padding-top: 40px;
}
.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 800;
  padding-top: 10rem;
}
.total_amount_para {
  text-align: center;
  font-size: 18px !important;
  padding-top: 5px;
  color: #4B4B4B;
}
.input_area
{
  margin-top: 40px;
}
 
.input_field
{
  margin-top: 30px;
  width: 445px;
}
#outlined-basic {
  width: 410px;
}
 
.button_collection
{
  margin-top: 61px;
  margin-bottom: 1rem;
}
.btn_one {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-weight: 600;
  font-size: 20px !important;
 
}

.btn_two {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-size: 20px !important;
 
}


Also, Download the Background image file (mentioned below ) of the app is an image file and paste this file into your public folder also define your CSS with the background-CSS image part .

Background Image File

GitHub

You can always refer to the GitHub repository to clone the project we have created.

https://github.com/tinkugupta5/Counter_app

Conclusion

yeey!

We did it! ? Hope you like How To Build A Simple Counter App In React using hooks. For such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

How to Create a Responsive Navbar using ReactJS

Sticky post

ReactJS Tutorial: How to Make a Responsive Navbar

ReactJS Tutorial: How to Make a Responsive Navbar

In this article, I will share how we can build a responsive Navbar using React js. That you can use in your project.

Create a navigation bar using reactJS and using to solve the following problem. which is how to create a responsive navigation bar using react js .

The modules Required are :

  • npm
  • create-react-app

To build this navigation bar you have to install a node in your local machine because we are downloading and using some of the packages from node modules.

After installing the node just check your node version by putting this command in your terminal

node -v

If you don’t please install the latest version.

All things are done you are ready to make a project using create-react-app so open your terminal and type :

npx create-react-app my-app

Now enter the following command into the terminal to access your navigation-bar folder:

cd my-app

I hope till this point you have successfully done the structure creation. Let’s move into coding and designing our responsive navbar using react js. Just follow all the steps you will Create a Responsive Navbar using ReactJS.

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


Index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary:#3F86F8;
  --background:#f5f811;
}

.primary {
  color: var(--primary);
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}

.container {
  max-width: 1240px;
  margin: auto;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.4rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1.2rem;
}

.btn {
  padding: 14px 32px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: white;
  border-radius: 10px ;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  box-shadow:rgb(000/15%)0px 8px 24px;
}


input {
  padding:12px 32px;
  border: 1px solid var(--primary);
  background: transparent;
  border-radius: 24px 4px;
  font-size: 1rem;
  margin-right: .8rem;
  font-family: 'Poppins',sans-serif;

}


@media screen and (max-width:768px) {

  
h1 {
  font-size: 2.1rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1rem;
}

.btn{
  width: 100%;
  margin: 1rem 0;
}

input {
  width: 100%;
}

}



body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
    
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

App.js

import React, {useState} from 'react'
import {FaBars, FaTimes} from 'react-icons/fa'
import './Navbar.css'

const Navbar = () => {
const [click, setClick] = useState(false)
const handleClick = () => setClick(!click)


    return (
        <div className='header'>
            <div className='container'>
                <h1 className='logo' >Logo</h1>
                <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li>
                        <a href='/'>Home</a>
                    </li>
                    <li>
                        <a href='/'>Featured</a>
                    </li>
                    <li>
                        <a href='/'>Earn</a>
                    </li>
                    <li>
                        <a href='/'>Contact</a>
                    </li>
                </ul>
                <div className='btn-group'>
                    <button className='btn'>Connect Wallet</button>
                </div>
                <div className='hamburger' onClick={handleClick}>
                    {click ? (<FaTimes size={20} style={{color: '#333'}}/>) : (<FaBars size={20} style={{color: '#333'}} />)}
                    
                </div>
            </div>
        </div>
    )
}

export default Navbar

Let’s work on the CSS part and which make our navbar looks awesome.

App.css

.header {
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #eee;
    /* background: #fff; */
    background: #000000;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.colors {
    color: var(--primary);
}

.nav-menu {
    display: flex;
}
.logo
{
  color: #FFE600;
   font-Size: 28px;
}

.nav-menu li {
    padding: 0 1rem;
}

.nav-menu a {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.hamburger {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:1240px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        flex-direction: column;
        justify-content: start;
        top: 90px;
        right: -100%;
        width: 50%;
        height: 100vh;
        transition: 0.4s;
        z-index: 2;
        background: rgb(0, 0, 0);
        border-left: 1px solid #eee;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        padding: 1rem;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-menu a {
        font-size: 1.2rem;
    }
}

Save all files and start the server by using the command.

Conclusion

We succeeded! We hope you like our guide on using ReactJS to How to Create a Responsive Navbar using ReactJS. Visit ziontutorial.com for similar projects and provide comments on which project I should cover next.

Check out this react and hooks-based BMI calculator. If you have any questions, comment. Please leave a remark on this project in the space provided. You can also join our Telegram channel, which is primarily accessible there, and ask any questions there.

Coding is fun!

People are also reading:

Best ReactJS Projects For Beginners

Building a Simple interest calculator using React Hooks

Sticky post

Are you starting with React? I will be Building a Simple interest calculator using React Hooks. You can use this simple interest calculator for your personal project and host many calculators like this.

Simple interest calculator using React Hooks

What are we building? ?

we are going to make very basic simple interest calculator using react hooks. Basically, that will take user input and also we going to build a form and display the result along the way. Additionally, I wanted to show off the React hooks API, which lets function components use lifecycle methods and have a state behind the scenes. The sole method for managing state in earlier iterations of React was through class components. This results in a significantly improved development experience.

Design Assets Link? ?

Download: Link

YouTube Tutorial

Shall we start? ?

Section 1 – Create-React-App
Section 2 – Add some CSS ( App.css )
Section 3 – Add Logic and state ( App .js )
Section 4 – Conclusion

Section 1

We don’t need anything complicated to make this project so we’ll use the boilerplate Create-React-App gives us. To create the project, navigate to a directory of your choice and type:

npx create-react-app simple_interest_calculator

You may access the project after create-react-app has finished executing.

cd simple_interest_calculator

To launch the project in Visual Code (or any editor of your choice):

code .

Let’s install Material UI is a library of React UI components that implements Google’s Material Design. So that we can use their components. By following this doc here I am using npm you can use either yarn too for installing this

npm install @mui/material @emotion/react @emotion/styled

Section 2 ( App.css )

The emphasis of this tutorial won’t be on styling, so feel free to add additional styling or copy this CSS into your App.css if you’d like. You may also see examples of how I used my classes on my GitHub repository.

src/App.css
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #0e0e0e;
}

.container {
  /* box-shadow: 0px 0px 12px rgb(255, 255, 255); */
  background-color: #FAF9FA;
  width: 519px;
  /* height: 672px; */
  border-radius: 8px;
  padding: 3rem;
}
.heading_text
{
  font-size: 10px;
  font-weight: 400;
}
.heading_two
{
  padding-top: 5px;
}
.total_amount_card
{
  width: 445px;
  height: 138px;
  background-color: #D6FF58;
  margin-top: 22px;
  
}
.card_text {
  padding-top: 40px;
}
.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
}
.total_amount_para {
  text-align: center;
  font-size: 12px;
  padding-top: 5px;
  color: #4B4B4B;
}
.input_area
{
  margin-top: 40px;
}

.input_field
{
  margin-top: 30px;
  width: 445px;
}
#outlined-basic {
  width: 410px;
}

.button_collection
{
  margin-top: 61px;
  margin-bottom: 1rem;
}
.btn_one {
  background-color: #1F1F1F;
  width: 200px;
  height: 75px;

}

Section 3 ( App .js )

Let’s make our form using material UI in app.js. Here we will make all your logic here .

import './App.css';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'

function App() {

  const [num1,setNum1] = useState(0);
  const [num2,setNum2] = useState(0);
  const [num3,setNum3] = useState(0);
  const [Add,setAdd] = useState("");

  const calcSum = (e) => {
    e.preventDefault()
    console.log(e);

    if(num1===0 || num2===0 || num3===0)
      {
        alert("please enter a valid weight and height")
      }
      
      else
      {
        let Add = parseInt(num1)*parseInt(num2)*parseInt(num3)/100;
        console.log(typeof(Add));
        setAdd(parseInt(Add))
      }

  }

  const handleClick = (e) => {
    setAdd(0);
    window.location.reload();

  }

  return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>

    
   
    
    <div className="app">
      
      <div className='container'>
        <div className='heading_text'>
          <h1 className='heading_one'>Simple Calculator</h1>
          <p className='heading_two'>Calculate your simple interest Easily</p>
        </div>
        <div className='total_amount_card'>
          <div className='card_text '>
          <h3 className='total_amount_heading'>₹ {Add}</h3>
          <p className='total_amount_para'>Total simple interest</p>
          </div>
        </div>
        <form onSubmit={calcSum}>

        <div className='input_area'>
            <div className='input_field'>
            <TextField type="number" value={num1 || ""} onChange={(e) => setNum1(e.target.value)} id="outlined-basic" label="₹ Principal amount" variant="outlined" />
            </div>
            <div className='input_field'>
            <TextField type="number" value={num2 || ""} onChange={(e) => setNum2(e.target.value)} id="outlined-basic" label="Rate of interest (p.a) %" variant="outlined" />
            </div>
            <div className='input_field'>
            <TextField  type="number" value={num3 || ""} onChange={(e) => setNum3(e.target.value)} id="outlined-basic" label="Time period ( Yr )" variant="outlined" />
            </div>
        </div>
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button type='submit' className='btn_one' style={{backgroundColor: 'black'}} variant="contained">Calculate</Button>
          <Button className='btn_one'  onClick={handleClick}  variant="outlined">Reset</Button>
          </Stack>
        </div>
        </form>

      </div>      
    </div>
    </>
  );
}

export default App;

Section 4 ( Conclusion )

yeey!

We did it! 😀 Now you can make any calculator  for your next project. It works on mobile too! I hope you like Building a Simple interest calculator using React Hooks. for such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project

Happy coding!

People are also reading:

React Router v6 in React Js

React Router v6 in React Js With Complete Project Of 2022

Sticky post
React Router v6 in React Js

React Router is a library for routing in React js. It allows the navigation between views of various components in React Application, Which allows changing the browser URL. In this blog, we will learn about react routing or navigate through different pages by using react-router-dom. Last but not least we will make React Router v6 in React Js With a Complete Project in complete explanation.

Let’s create a simple React application to understand the flow of react-router.
In this application, the components would be the Home component, About component and the last one is Contact component so that we can jump or navigate to different components easily. You can refer to the below example of how it looks at the end of this tutorial. Or you can Follow the Youtube tutorial also.

YouTube Tutorial Video :

Let’s start making Our application by jumping to the first step


Setting Our Environment of React Application:

Create a React Application Using create-react-app. Let’s call it ziontutorial and you can use any name instead of this name. In the below example, I am using git bash you can also use cmd ( normal command prompt ) inbuilt into your system.

After the Development environment is ready. Now let’s move into the folder and open the terminal of your project and install this React Router in your Application.

Let’s Install the React Router Dom in your Application.

App.js

Here you have to import these important dependencies for performing the react routing[ import { BrowserRouter, Routes, Route } from ‘react-router-dom’; ] By importing these components you are able to perform routing easily.

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';

function App() {
  return (
    <div className="App">
      
       <BrowserRouter>
       <Navbar/>
       <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
       </Routes>
       </BrowserRouter>
       
    </div>
  );
}

export default App;

Here is the List of React Router Components

  • BrowserRouter: To keep your UI in sync with the URL, BrowserRouter is a router solution that makes use of the HTML5 history API (pushState, replaceState, and the popstate event). All of the other components are stored in the parent component.
  • Routes: Routes is the new component introduced in version 6. Switch is replaced by this routes component.
  • Route: it conditionally shows components and it works when routes match to the rendered components.
  • Links: The Links component facilitates navigation inside the application by creating links for various paths. It functions like an anchor tag in HTML.

Now let’s make other components Like Home.js, About.js, and Contact.js so that we can jump over different components by using react-router-dom.

Navbar.js

import React from 'react'
import {Link,NavLink} from 'react-router-dom';

// import Navbar from './Navbar';

const Navbar = () => {
  return (
    <div className='navbar_start'>
        
     <nav className="navbar navbar-expand-lg  p-4">
  <div className="container-fluid">
    <NavLink className="navbar-brand" to="/">

       

</NavLink>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">

      <ul className="navbar-nav">

        <li className="nav-item">
          <NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
        </li>

        <li className="nav-item">
          <NavLink className="nav-link" exact to="/about">About</NavLink>
        </li>

        <li className="nav-item">
          <NavLink className="nav-link" exact to="/contact">Contact</NavLink>
        </li>
       
      </ul>
    </div>
    <Link className='btn btn-outline-primary' to='/user/add'>
        Add User
    </Link>

  </div>
     </nav>
     
    </div>
  )
}

export default Navbar

Home.js

import React from 'react'

const Home = () => {
  return (
    <>
    <div class="px-4 py-5 my-5 text-center">
    

    <h1 class="display-5 fw-bold">Hellow People</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Getting Started</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Contact-Us</button>
      </div>
      
    </div>
  </div>
  </>
  )
}

export default Home

About.js

import React from 'react'

const About = () => {
  return (
    <>
    <div>
    <div className="container">
    <h1 className="mt-5">About Us</h1>
    <p className="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
  </div>
   
      </div>
    </>
  )
}

export default About

Contact.js

import React from 'react'

const Contact = () => {
  return (
    <>
    <div className='container form-signin w-100 m-auto text-center px-4 py-5 my-5 text-center'>
     <div className='row'>
    <main className=" ">
  <form>
  
    <h1 className="h3 mb-3 fw-normal">Please sign in</h1>

    <div className="form-floating">
      <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com"/>
      <label for="floatingInput">Email address</label>
    </div>
    <div className="form-floating py-5">
      <input type="password" className="form-control" id="floatingPassword" placeholder="Password"/>
      <label for="floatingPassword">Password</label>
    </div>

    <div className="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"/> Remember me
      </label>
    </div>
    <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
    <p className="mt-5 mb-3 text-muted">© 2017–2022</p>
  </form>
</main>
</div>
</div>
</>
  )
}

export default Contact

Route: Route component will now help us to establish the link between the component’s UI and the URL. To include routes to the application, add the code given below to your app.js.

Also, match or type the same Url in navbar.js with to=”” with same as path too .

Finally Output Look like this I hope you like this blog and if you have any problem regarding this project you can connect and comment in the comment box.

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used react router dom to navigate to different URL . By making React Router v6 in React Js With Complete Project project you learn new things.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

How to connect with database locally with mongo DB | MERN

Sticky post
How to connect with database locally with mongo DB

In this tutorial, we will learn how to connect databases locally with mongo DB . if you want to learn new things in react do comment in the post which post you would like to learn. So without wasting any time let’s start the how to connect with the database locally with mongo DB | MERN.

Let’s start with the first step to connect with mongo DB locally.

First, we have to pass the process file.

const mongoose = require("mongoose");
require("colors");

//connectDB function // this function is basically used to connect with the data base and the make a connection with the data base locaally
const connectDb = async () => {

    try {
    const conn = await mongoose.connect(process.env.MONGO_URI);
    console.log(`MongoDB Connected ${conn.connection.host}`.bgYellow);
    } 
    catch (error) {
        console.log(`Error : ${error.message}`.bgRed);
        process.exit(1);
    }

};


module.exports = connectDb;

Conclusion

So there we have it. If you want to easily connect your database do follow these above steps. To learn more about mongo DB and other tutorials do comment on this . Hope you learn a lot from this.

People are also reading:

React JS Mini-Project Creating Simple Sum Calculator

React JS Mini-Project #2 Creating Simple Sum Calculator | Absolute beginners useState Hook & Conditionals ??

Sticky post
React JS Mini-Project Creating Simple Sum Calculator
Build A Sum Calculator in React JS – use State Hook & Conditionals.

In this half of the tutorial, we will focus on the fronted part of the application. The code for this React JS Mini-Project Creating Simple Sum Calculator project is on my git Github if you want that source code just comment in the comment box . we make these projects because I decided to take a deep dive into reacting js hooks part, Gain a better understanding of its use case and figure out how to make it play nice with these technologies and I like to play with it so I decided to make this simple project with react which is Creating Simple Sum Calculator using React js | Mini React Js Project. in my point of view if you want to learn something then you have to make something so that you have a better understanding of that technologies and clear understanding of that technologies. -after that write about it and teach about it to some so that other people can gain knowledge and they figure out and do some suggestions for you.

We are going to build a simple React JS Mini-Project Creating Simple Sum Calculator | Mini project. We will be using Hooks’ concept in this project like how to use state and conditional statements together so that you can figure out the concept and better understanding this jargon.

Lets get to work !

we are going to need to install a our application with these simple commands . and then start our application building. create a new folder and run the following commands in your terminal:

npx create-react-app  simple_sum_calculator

This is our application Folder structure after making this lets move to another part of our application building part.

Now place the following code on your index.html file.

<!DOCTYPE html>
<html>
    <head>
        <title>BMI Calculator</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Let’s jump into the app.js part where all the logic of our application

App.js

let’s jump into our App.js where all the magic happens and we discuss our application logic .

import { useState } from 'react';
import './App.css';

function App() {
  
  const [num1, setNum1] = useState()
  const [num2, setNum2] = useState()
  const [Add, setAdd] = useState('')

    const calcSum = (event) => {
      event.preventDefault() 
      console.log(event);
      if(num1===0 || num2===0)
      {
        alert("please enter a valid weight and height")
      }

      else
      {
        let Add = parseInt(num1)+parseInt(num2);
        console.log(typeof(Add));
        setAdd(parseInt(Add))
      }
    }

  return (
  <div className='app'>
    <div className='container'>
      <h2 className='center'>Sum Calculator</h2>
      <form onSubmit={calcSum}>
        <div>
        <label>Number 1</label>
        <input type="text" placeholder='Enter Number1 value' value={num1} onChange={(e) => setNum1(e.target.value)} />
        </div>
        <div>
        <label>Number 2</label>
            <input type="text" placeholder='Enter Number2 value' value={num2} onChange={(e) => setNum2(e.target.value)} />
        </div>
        <div>
            <button className='btn' type='submit'>Submit</button>
        </div>
      </form>
      <div className='center'>
          <h3>Your Sum is: {Add}</h3>
      </div>
    </div>
  </div>
  );
}

export default App;

App.css

let’s make this form beautiful using CSS. Just copy the below code and make your style work. So this is the Simple Sum Calculator where we can implement our CSS to make this application interactive.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #E3EFEB;
}
.container {
  box-shadow: 0px 0px 12px rgb(255, 255, 255);
  background-color: #0F1217;
  border-radius: 8px;
  padding: 3rem;
  
}

h2,h3
{
  color: white;
}

label
{
  color: white;
  font-size: 13px;
}
input {
  width: 100%;
  font-size: 1rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 6px;
  outline: none;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;   
  background-color: rgb(241, 241, 241);
}

.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */
.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}
.center {
  text-align: center;
  margin: 24px 0;
}
p {
  margin: 10px 0;
}
.img-container {
  text-align: center;
}
.img-container img {
  height: 200px;
}

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used use state hook to manage the state of the application . By making React JS Mini-Project Creating Simple Sum Calculator project you learn new things.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

How to Build A BMI Calculator in React JS - useState Hook & Conditionals

How to Build A BMI Calculator in React JS – useState Hook & Conditionals

Sticky post

This is a simple responsive BMI calculator using react js I am damn sure you will be learning a lot from this small project. We used use state hook to manage the state of the application. let’s start to Build A BMI Calculator in React JS .

Building a body mass index calculator with react js using basic class-based components and understand state and props too in a very easy way.

What Is BMI ?

Lets understand what the BmI is then we can move to the development part of this BMI calculator. it is a measurement of a person’s leanness or obesity based on their height and weight. There are many tools which helps to identify the your body bmibut in todays session we can build our own bmi calculator. Hope you are excited to do this build.

Let’s Begin making the project

Open the command prompt, go to a comfortable spot, and enter the command as follows to build the example project for this example:

create-react-app bmicalculator

Now, as indicated below, head to the project folder and open the folder in your fav editor. and jump to the main folder by typing

cd bmicalculator

Now just replace the placeholder content of App.js with the given below content :

let’s create this amazing BMI calculator which I have given below

How to Build A BMI Calculator in React JS – useState Hook & Conditionals
How to Build A BMI Calculator in React JS – useState Hook & Conditionals

App.js

import './App.css';
import './index.css'
import React, {useState} from 'react'

function App() {

  // state
  const [weight, setWeight] = useState(0)
  const [height, setHeight] = useState(0)
  const [bmi, setBmi] = useState('')
  const [message, setMessage] = useState('')

  let calcBmi = (event) => {
    //prevent submitting to the server
    event.preventDefault()

    if (weight === 0 || height === 0) {
      alert('Please enter a valid weight and height')
    } else {
      let bmi = (weight / (height * height) * 703)
      setBmi(bmi.toFixed(1))

      // Logic for message

      if (bmi < 25) {
        setMessage('You are underweight')
      } else if (bmi >= 25 && bmi < 30) {
        setMessage('You are a healthy weight')
      } else {
        setMessage('You are overweight')
      }
    }
  }


  let reload = () => {
    window.location.reload()
  }

  return (
    <div className="app">
    <div className='container'>
      <h2 className='center'>BMI Calculator</h2>
      <form onSubmit={calcBmi}>

        <div>
          <label>Weight (lbs)</label>
          <input value={weight} onChange={(e) => setWeight(e.target.value)} />
        </div>

        <div>
          <label>Height (in)</label>
          <input value={height} onChange={(event) => setHeight(event.target.value)} />
        </div>

        <div>
          <button className='btn' type='submit'>Submit</button>
          <button className='btn btn-outline' onClick={reload} type='submit'>Reload</button>
        </div>
      </form>

      <div className='center'>
        <h3>Your BMI is: {bmi}</h3>
        <p>{message}</p>
      </div>
    </div>
  </div>
  );
}

export default App;

In the above code, we are not using any lib for any of the logic you just create this app by making this logic to your app that’s it. It’s a very simple application of BMI and I hope you will understand the logic I will provide you with the detailed concept of this tutorial on my youtube channel just go and watch it for making this simple calculator.

Now just replace the boilerplate of index.js with the given below content :

Index.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.container {
  box-shadow: 0px 0px 12px #ccc;
  border-radius: 8px;
  padding: 3rem;
}

input {
  width: 100%;
  font-size: 1.2rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 8px;
}

.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */

.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}

.center {
  text-align: center;
  margin: 24px 0;
}

p {
  margin: 10px 0;
}

.img-container {
  text-align: center;
}

.img-container img {
  height: 200px;
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used use state hook to manage the state of the application let’s start to Build A BMI Calculator in React JS.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

Unterminated JSX contents

Parsing error: Unterminated JSX contents | React Js [ Updated Solution ]

Sticky post

Hi, guys today I go through this error in my react page Unterminated JSX contents and after some, I found the solution to this error below I have mentioned the answer to this problem below you can check it out and clear you dought in a easy way

Problem Statement: Unterminated JSX contents in react problem

Solution of this problem :

Either you just forget to complete your HTML Semantics in my case I have just forgotten to close my div in my scenario that’s why I got this error message about Unterminated JSX contents in react application.

Now I have fixed it and my solution look like this after adding the one closing div to my app.

Conclusion

Hope you like this article and share with your friend you face this problem .

People are also reading:

Powered by ziontutorial & DEV Community 👩‍💻👨‍💻 © 2016 - 2023. ziontutorial.com