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

React Native Изучение

В этой статье мы увидим, как создать простой многостраничный веб-сайт с помощью 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

Читайте также:  Внедрение GitOps для доставки нативных облачных приложений
Оцените статью
bestprogrammer.ru
Добавить комментарий