Как создать многостраничный сайт с помощью React.js?

В этой статье мы увидим, как создать простой многостраничный веб-сайт с помощью React Js.

Предпосылка:

1. npm
2. create-react-app
3. react-router-dom
4. styled components

Подход: мы создадим простой веб-сайт с разными страницами и навигационной панелью. Мы создадим несколько страниц: домашнюю страницу, страницу «О нас», страницу блога, страницу регистрации и страницу контактов, а затем мы увидим, как перемещаться между этими страницами. Мы будем использовать следующие пакеты и компоненты:

• response-router-dom: react-router-dom — это пакет responseJS, он позволяет вам реализовать динамическую маршрутизацию на веб-странице.
• BrowserRouter: он использует API истории HTML5 для синхронизации пользовательского интерфейса с URL-адресом.
• Route: его ответственность заключается в отображении пользовательского интерфейса, когда его путь совпадает с текущим URL-адресом.
• Switch: отображает первый дочерний маршрут или перенаправления, соответствующие местоположению.
• Styled-components: Styled-component Module позволяет нам писать CSS в JavaScript в очень модульном и многократно используемом виде в React.

Ниже представлена ​​пошаговая реализация:

Шаг 1. Мы начнем новый проект с помощью приложения create-response-app, поэтому откройте свой терминал и введите:

npx create-react-app react-website

Шаг 2: Теперь перейдите в свою папку, набрав указанную команду в терминале:

cd react-website

Шаг 3: Установите зависимости, необходимые в этом проекте, набрав данную команду в терминале.

npm install react-router-dom 
npm install --save styled-components

Шаг 4: Теперь создайте папку компонентов в src, затем перейдите в папку компонентов и создайте новую папку с именем Navbar. В папке Navbar создайте два файла index, js и NavbarElements.js. Создайте еще одну папку на страницах src name и на страницах создайте файлы с именем about.js, blogs.js, index.js, signup.js, contact.js

Структура проекта: структура проекта будет выглядеть следующим образом:

Шаг 5: Теперь мы создадим панель навигации и стилизуем ее.

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;

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;

  }

`;

Шаг 6: Теперь мы будем редактировать различные страницы проекта в src / pages.

import React from "react";

 

const About = () => {

  return (

    <div>

      <h1>

        GeeksforGeeks is a Computer 

        Science portal for geeks.

      </h1>

    </div>

  );

};

 

export default About;

import React from 'react';

 

const Blogs = () => {

  return (

    <h1>You can write your blogs!</h1>

  );

};

 

export default Blogs;

import React from 'react';

 

const Home = () => {

  return (

    <div>

      <h1>Welcome to GeeksforGeeks</h1>

    </div>

  );

};

 

export default Home;

import React from 'react';

 

const SignUp = () => {

  return (

    <div>

      <h1>Sign Up Successfull</h1>

    </div>

  );

};

 

export default SignUp;

import React from 'react';

 

const Contact = () => {

  return (

    <div>

      <h1>Mail us on feedback@geeksforgeeks.org</h1>

    </div>

  );

};

 

export default Contact;

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

 

ReactDOM.render(

<React.StrictMode>

    <App />

</React.StrictMode>,

document.getElementById('root')

);

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;

Шаг для запуска приложения: Теперь, чтобы запустить приведенный выше код, откройте терминал и введите следующую команду.

npm start