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]