En este artículo, veremos cómo crear un sitio web simple de varias páginas usando React Js.
Requisito previo:
index.js
import React from "react"; import { Nav, NavLink, NavMenu } from "./NavbarElements"; const Navbar = () => { return ( <> <Nav> <NavMenu> <NavLink to="/about" activeStyle> About </NavLink> <NavLink to="/contact" activeStyle> Contact Us </NavLink> <NavLink to="/blogs" activeStyle> Blogs </NavLink> <NavLink to="/sign-up" activeStyle> Sign Up </NavLink> </NavMenu> </Nav> </> ); }; export default Navbar;
NavbarElements.js
import { FaBars } from "react-icons/fa"; import { NavLink as Link } from "react-router-dom"; import styled from "styled-components"; export const Nav = styled.nav` background: #ffb3ff; height: 85px; display: flex; justify-content: space-between; padding: 0.2rem calc((100vw - 1000px) / 2); z-index: 12; `; export const NavLink = styled(Link)` color: #808080; display: flex; align-items: center; text-decoration: none; padding: 0 1rem; height: 100%; cursor: pointer; &.active { color: #4d4dff; } `; export const Bars = styled(FaBars)` display: none; color: #808080; @media screen and (max-width: 768px) { display: block; position: absolute; top: 0; right: 0; transform: translate(-100%, 75%); font-size: 1.8rem; cursor: pointer; } `; export const NavMenu = styled.div` display: flex; align-items: center; margin-right: -24px; /* Second Nav */ /* margin-right: 24px; */ /* Third Nav */ /* width: 100vw; white-space: nowrap; */ @media screen and (max-width: 768px) { display: none; } `;
about.js
import React from "react"; const About = () => { return ( <div> <h1> GeeksforGeeks is a Computer Science portal for geeks. </h1> </div> ); }; export default About;
blogs.js
import React from 'react'; const Blogs = () => { return ( <h1>You can write your blogs!</h1> ); }; export default Blogs;
index.js
import React from 'react'; const Home = () => { return ( <div> <h1>Welcome to GeeksforGeeks</h1> </div> ); }; export default Home;
signup.js
import React from 'react'; const SignUp = () => { return ( <div> <h1>Sign Up Successful</h1> </div> ); }; export default SignUp;
contact.js
import React from 'react'; const Contact = () => { return ( <div> <h1>Mail us on feedback@geeksforgeeks.org</h1> </div> ); }; export default Contact;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
App.js
import React from 'react'; import './App.css'; import Navbar from './components/Navbar'; import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'; import Home from './pages'; import About from './pages/about'; import Blogs from './pages/blogs'; import SignUp from './pages/signup'; import Contact from './pages/contact'; function App() { return ( <Router> <Navbar /> <Routes> <Route exact path='/' exact element={<Home />} /> <Route path='/about' element={<About/>} /> <Route path='/contact' element={<Contact/>} /> <Route path='/blogs' element={<Blogs/>} /> <Route path='/sign-up' element={<SignUp/>} /> </Routes> </Router> ); } export default App;
Publicación traducida automáticamente
Artículo escrito por namanjaingeeksforgeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA