Coders Support

React Installation and Page Create

--------------------------------
React js install in your system
--------------------------------

Atfirst install Node.js in your system ====> Then in windows start button type cmd ===> click on command prompt ===> open cmd dialog box, then type in cmd
-------------------------------------------------------------

C:\Users\USER'S NAME>cd Desktop

C:\Users\USER'S NAME\Desktop>mkdir project

C:\Users\USER'S NAME\Desktop>cd project

C:\Users\USER'S NAME\Desktop\project>npx create-react-app my-first-app  ======> Enter

.
.
.
.
.
.
.

C:\Users\USER'S NAME\Desktop\project>cd my-first-app

C:\Users\USER'S NAME\Desktop\project\my-first-app>npm start

-----------------------------------------
Note: also, install react router dom for menu create
-----------------------------------------

C:\Users\USER'S NAME\Desktop\project\my-first-app>npm i react-router-dom

----------------------------------------------------------------------------------------------------------------------
then you will see that the project will be start in your browser.

----------------------------
to start any react project
----------------------------

1) open cmd ==> open your project folder ==> project folder name > npm start
example: C:\Users\USER'S NAME\Desktop\project\my-first-app>npm start

or,

2) open visual studio code ==> click Terminal from menu icon ==> click on New Terminal ==> npm start
example: C:\Users\USER'S NAME\Desktop\project\my-first-app>npm start

------------------------
React js create Project
------------------------

Open Visual Studio Code => Download Extension in Visual Studio Code *ES7+ React/Redux/React-Native snippets* => open //// file > open folder > my-first-app > open

Create *Component* folder in "src" folder ==> create Header.js, Footer.js
Create *Pages* folder in "src" folder ==> create Home.js, About.js, Contact.js

------------------------
App.js
------------------------

import './bootstrap.min.css';
import './style.css';
import './responsive.css';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact';
import Header from './Components/Header';
import Footer from './Components/Footer';

function App() {
  return (
   <>
   <Router>
    <Header />
    <Routes>
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/" element={<Home />} />
    </Routes>
    <Footer />
  </Router>
   </>  );
}

export default App;

-----------------------
Header.js
------------------------
press *rfc* --> this is the shortcut of react functional component.
or,
press *rfce* --> this is the shortcut of react functional export component.

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

export default function Header() {
  return (
    <>
   <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="about">About</Link>
          </li>
          <li>
            <Link to="contact">Contact</Link>
          </li>
        </ul>
      </nav>
  </>
  )
}

------------------
Footer.js
------------------

press *rfc* --> this is the shortcut of react functional component.
or,
press *rfce* --> this is the shortcut of react functional export component.

import React from 'react'

export default function Footer() {
  return (
    <>I am Footer</>
  )
}

------------------
Home.js
------------------

press *rfc* --> this is the shortcut of react functional component.
or,
press *rfce* --> this is the shortcut of react functional export component.

import React from 'react'

export default function About() {
  return (
    <>I am Home page.</>
  )
}

------------------
About.js
------------------

press *rfc* --> this is the shortcut of react functional component.
or,
press *rfce* --> this is the shortcut of react functional export component.

import React from 'react'

export default function About() {
  return (
    <>I am About page.</>
  )
}

------------------
Contact.js
------------------

press *rfc* --> this is the shortcut of react functional component.
or,
press *rfce* --> this is the shortcut of react functional export component.

import React from 'react'

export default function About() {
  return (
    <>I am Contact page.</>
  )
}

With Bootstrap Coding

Atfirst Install Bootstrap with "react bootstrap" command.

Then Install React Router DOM with "react router dom" command.

Download any image like "logo.svg", "oxygen4fun-masking-cover.jpg" in src folder. After that follow the process:

src > index.js

src > App.js

src > Components > Header.js

import React from 'react'
import { Link } from "react-router-dom";
import LogoName from '../../src/logo.svg'

const mystyle = {
    width: "80px",
    display: "block"
  };

export default function Header() {
  return (

<nav className="navbar navbar-expand-sm bg-dark navbar-dark">
<div className="container-fluid">
<a style={mystyle} className="navbar-brand" href="/"><img src={LogoName} alt="" /></a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span className="navbar-toggler-icon"></span>
    </button>
<div className="collapse navbar-collapse" id="collapsibleNavbar">
    <ul className="navbar-nav ms-auto">
      <li className="nav-item">
      <Link to="/" className='nav-link'>Home</Link>
      </li>
      <li className="nav-item">
      <Link to="/about" className='nav-link'>About</Link>
      </li>
      <li className="nav-item">
      <Link to="/contact" className='nav-link'>Contact</Link>
      </li>
    </ul>
  </div>
  </div>
</nav>
  )
}

src > Components > Footer.js

src > Pages > Home.js

import React from 'react'
import Footer from '../Components/Footer'
import Header from '../Components/Header'
import { Button, Container, Row, Col } from 'react-bootstrap';
import OxygenImage from '../../src/oxygen4fun-masking-cover.jpg'

export default function Home() {
return (
<div>
<Header />
<section className='pt-5' style={{
backgroundColor: "rgb(255 226 226)",
padding: "0 2em"
}}>
<Container>
    <Row>
        <Col className='text-center col-lg-6 col-6 mb-5'>
            <img className='w-100' src={OxygenImage} alt="" />
            <Button className='mx-auto mt-3 btn btn-lg btn-danger'>{5+5}</Button>
        </Col>
        <Col className='text-center col-lg-6 col-6 mb-5'>
            <img className='w-100' src={OxygenImage} alt="" />
            <Button className='mx-auto mt-3 btn btn-lg btn-success'>{5+5}</Button>
        </Col>
        <Col className='text-center col-lg-6 col-6 mb-5'>
            <img className='w-100' src={OxygenImage} alt="" />
            <Button className='mx-auto mt-3 btn btn-lg btn-primary'>{5+5}</Button>
        </Col>
        <Col className='text-center col-lg-6 col-6 mb-5'>
            <img className='w-100' src={OxygenImage} alt="" />
            <Button className='mx-auto mt-3 btn btn-lg btn-danger'>{5+5}</Button>
        </Col>
    </Row>
</Container>
</section>
<Footer />
</div>
)
}

React Documentation

React Installation and Page Create

With Bootstrap Coding

src > index.js

src > App.js

src > Components > Header.js

src > Components > Footer.js

src > Pages > Home.js

src > Pages > About.js

src > Pages > Contact.js