Scribd
Upload
3 views4 pages

React Routerscripts2022

This document provides instructions for setting up and running a React application using create-react-app. It includes commands for installing necessary packages, setting up routing with react-router-dom, and defining components for Home, About, and Contact pages. The document also contains code snippets for the main App component and styled components using styled-components.

Uploaded by

pushpa.g
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views4 pages

React Routerscripts2022

This document provides instructions for setting up and running a React application using create-react-app. It includes commands for installing necessary packages, setting up routing with react-router-dom, and defining components for Home, About, and Contact pages. The document also contains code snippets for the main App component and styled components using styled-components.

Uploaded by

pushpa.g
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Commands to run react app in command prompt/terminal

npx create-react-app rec4 //happy hacking

cd rec4

Install additional packages before run the react

npm install react-router-dom –save

npm i styled-components

If you found errors follow the command

npm audit fix --force

[Link]

import logo from './[Link]'

import './[Link]'

import {styled} from "styled-components";

import { NavLink } from "react-router-dom";

import {StyledLink} from "./[Link]"

import React from "react"

import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom"

import Home from "./Home"

import About from "./About"

import Contact from "./Contact"


class App extends [Link]{

render(){

return(

<Router>

<div><StyledLink to="/">Home</StyledLink></div>

<div><StyledLink to="/about">About Us</StyledLink></div>

<div><StyledLink to="/contact">Contact Us</StyledLink></div>

<Routes>

<Route path="/" element={<Home/>} />

<Route path="/about" element={<About/>} />

<Route path="/contact" element={<Contact/>} />

</Routes>

</Router>

);

export default App;

[Link]

import styled from "styled-components";

import { NavLink } from "react-router-dom";

export const StyledLink = styled(NavLink)`

margin-right: 10px;

`;

export default StyledLink;


[Link]

import React from "react"

const Contact = () => {

return(

<section className="Contact">

<h1>This is contact page</h1>;

</section>

export default Contact;

[Link]

import React from "react"

const About = () => {

return(

<section className="About">

<h1>This is about page</h1>;

</section>

export default About;


[Link]

import React from "react"

const Home = () => {

return(

<section className="Home">

<h1>This is Homepage</h1>;

</section>

export default Home;

[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

[Link](
<App />,
[Link]('root')
);

You might also like