HTML to React JS Basic Functions

Hey, this blog post was specifically written for the viewers of my youtube video. please check the video to get more understanding

Download Node : Link

Create new React app

npx create-react-app appname

 

React Functional Component

import React from 'react'

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

 

Add Inline Style

<div style={{width: '18%',height:150,}}> </div>

 

React Router Dom

npm i react-router-dom

Import code 

import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';

Sample App.js Source Code

import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';

import Homepage from './app/Homepage';
import About from './app/About';
import Header from './app/Header';
import Contact from './app/Contact';

function App() {
  return (  
    <Router>
    <Header/>
    <div className="container">
      
      <h1> hello world</h1>

      <Routes>
        <Route  exact path='/' element={<Homepage />} />
        <Route  exact path='/about' element={<About />} />
        <Route  exact path='/contact' element={<Contact />} />
      </Routes>

    </div>  
    </Router>
  );
}

export default App;

 

Htaccess file for uploading cpanel

Create .htaccess file in your domain root directory

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

 

 

Post Your Questions on our forum

Post a question on Forum

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

Share with your friends:

Comments are closed.

HTML to React JS Basic Functions

Hey, this blog post was specifically written for the viewers of my youtube video. please check the video to get […]

24 February, 2022

HTML Form to Email Using JavaScript and SMTP server 🚀

Hello Everyone, 🙋‍♂️ In this tutorial, we are going to look at how to send emails from HTML Form to […]

22 September, 2021

Submit Form Without Refreshing Page PHP and Javascript

Hello Everyone, In this tutorial, we are going to learn, How to submit a form without reloading. yeah, that’s so […]

18 September, 2021

HTML to PDF Conversion easiest way using JavaScript

Lets Do HTML to PDF Conversion Hello everyone,  in this tutorial we are going to learn how to make an […]

3 September, 2021

Digital Marketing Toolkit

Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits

Get Free Access Now