사이트 시리즈 1 섹션 만들기: Routes 및 Navbar로 React 설정

안녕하십니까? 저는 처음부터 저의 훈련 캠프 프로젝트를 재건하려고 합니다. 지금은 더 좋은 창고 개발 기술이 생겼습니다.나는 기능이 완비되고 배치된 사이트를 만드는 절차를 기록하고 있다.
만약 당신이 계속하고 싶다면, 다음은 당신이 알아야 할 것이다.
시작 전:

기술 스택은 React 및 Node입니다.js, 그러니 컴퓨터에 이것들을 설치하십시오.나는 VS 코드를 사용하고 Mac에서 일한다.

Install React
Install Node.js

이 강좌는 명령행/단말기의 사용을 익혀야 합니다.만약 이것에 대해 확실하지 않다면, 이 기능을 어떻게 사용하는지에 관한 강좌를 검색해 보십시오.나는 이미 나의 단말기에 Zsh를 설치했기 때문에 이 강좌의 화면 캡처를 볼 때 이 점을 기억해 주십시오.

이건 내 repo 이 프로젝트

섹션 1은 다음과 같습니다.

특정 프로젝트를 포함하는 새 React 프로젝트를 만듭니다

새 프로젝트를 Github에 연결

React 구성 요소로 간단한 페이지 만들기

이러한 페이지에 라우팅(링크) 추가

사이트

에 스타일 및 기능 탐색 모음 추가

단계 1 - 항목을 작성하고 패키지 추가 -

A, 항목을 만들 올바른 폴더에 있는지 확인하기 위해 VS 코드 내의 터미널을 엽니다(입력 ls.
B, React 프로젝트를 만듭니다.아래에 표시된 마지막 부분은 프로젝트의 제목이기 때문에 "bird banders"를 입력할 필요가 없습니다. 그러나 제 파일 이름을 따른다면 다음 단계에서 더 쉽게 따를 수 있습니다.터미널 유형:npx create-react-app bird_bandersC, cd 새로운react 프로젝트 진입
D. 터미널에서 언제든지 입력하거나npm start 로컬 호스트에서 사이트를 실행할 수 있습니다.
명령 요약:

npx create-react-app bird_banders
cd bird_banders
npm start

E, 이 React 프로젝트는 이 강좌의 기능을 실현하기 위해 추가 패키지가 필요합니다.
(나중에 로그인을 통해서만 볼 수 있는 보호된 페이지를 만들 수 있습니다.)
React-Router-Dom는 우리에게 기본적인 스타일을 제공해야 하는 사이트이다. 그렇지 않으면 몇 시간과 더 높은 수준의 기술이 필요할 것이다.
Bootstrap 스타일링을 더욱 간단하고 깨끗하게 한다.Sass는 또한 프로젝트에 Bootstrap 스타일을 쉽게 가져올 수 있도록 합니다.
프로젝트 유형의 터미널에서 다음을 수행합니다.yarn start npm install --save react-router-dom npm install react-bootstrap bootstrap모양새 예:
Sass Styling
F, src 폴더에서 App 이름을 바꿉니다.css에서 응용 프로그램까지.SCS, 파일 상단에 추가:npm install node-sass --saveReact가 이 모든 내용을 함께 배치하려면 @import 'node_modules/bootstrap/scss/bootstrap'; // existing bootstrap import 를 입력해야 할 수도 있습니다.

2단계 - Github repo 설정 -

A, 코드의 변경과 실현을 백업하고 추적하기 위해 원격 리포를 설정하는 것이 중요하다.이것은 매우 간단하다. 만약 당신이 이미 계좌가 있다면, 단지 이전하기만 하면 된다.
그렇지 않으면 먼저 계정을 만들고 위의 링크로 이동하십시오.
B, React는 자동으로 로컬 재구매를 생성하므로 GitHub에 추가하려면 VS 코드 터미널에서 다음 단계를 수행해야 합니다(단, 링크 사용).
https://github.com/new
다른 한편, 나는 이미 한동안 나의github 계정을 나의 단말기에 연결하지 않았기 때문에, 만약 당신이 이전에 설정한 적이 없다면, 당신은 당신의 단말기에서 추가 절차를 실행해야 할 수도 있습니다
C, GitHub 프로젝트 페이지로 이동하여 로컬 프로젝트가 GitHub에 성공적으로 저장되었는지 확인합니다.
D. 인코딩을 시작하려면 VS 코드 터미널에서react 프로젝트 폴더를 엽니다.Zsh가 설치되어 있으므로 터미널에 입력하기만 하면 됩니다npm run build.

현재 VS 코드의 사이드바는 다음과 같습니다.

단계 3 - React 구성 요소로 간단한 페이지 만들기 -

A. 서버를 시작하면 회전 아이콘이 있는 기본 React 페이지가 있음을 알 수 있습니다.나는 처음부터 시작하고 싶다. 그래서 code . 파일을 열면 불필요한 줄을 삭제할 것이다. 그래서 이것은 다음과 같다.

import React from 'react';

function App() {
  return (
    <div>

    </div>
  );
}

export default App;

B. 제가 좀 복잡한 사이트를 만들 때 노트에 와 스케치를 작성합니다.나는 사이트가 필요로 하는 핵심 기능 목록을 가지고 기본적인 네비게이션 사이트부터 시작하는 것을 좋아한다.이후, 나는 모든 페이지와 기능을 기입한다.나는 먼저 네비게이션 표시줄과 루트를 실현하기로 결정했다.
주: 디자인 파일이 완전하지 않습니다.나는 단지 하면서 보충할 뿐이지만, 이것은 내가 해야 할 모든 것을 이해하는 데 도움이 된다. 그것은 너로 하여금 미래에 어떤 강좌가 일어날지 이해하게 할 것이다.
C. 첫 페이지에서 다음을 시작합니다.
집.
사용자 프로필
조직하다
조직하다App.js를 마우스 오른쪽 버튼으로 클릭하고 src라는 새 폴더를 추가합니다.
D. pages 폴더에서 페이지 이름으로 새 js 파일을 만듭니다.완료되면 사이드바에는 다음과 같은 내용이 포함되어야 합니다.
design document
E, 모든 구성 요소의 기본 코드를 기입합니다. 모두 페이지이기 때문에 매우 비슷합니다.나는 이 프로젝트에서 갈고리를 사용하기 때문에 우리는 클래스를 사용하지 않고 기능 구성 요소를 사용한다.다음은 각 페이지 구성 요소에 포함된 내용입니다. 함수를 정확하게 명명하고 내보내십시오.

import React from 'react'

function Home() {
    return(
        <div>
            <p>Home page</p>
        </div>
    )
}

export default Home

4단계 - 페이지에 라우팅 추가 (링크) -

답: 이 페이지들이 이미 존재하는 이상 우리는 브라우저에서 이 페이지들을 실제로 볼 수 있기를 희망합니다. 가장 좋은 것은 정확한 URL을 사용하는 것입니다.간단한 방법은 React-Router-Dom 패키지를 통해 루트를 추가하는 것이다.이렇게 하려면 pages 을 열고 두 번째 줄부터 추가합니다.

import {BrowserRouter as Router, Route} from 'react-router-dom'

import Home from './pages/Home';
import Organization from './pages/Organization';
import Organizations from './pages/Organizations';
import UserProfile from './pages/UserProfile';

B, 현재, 우리는 기본적으로 라우터 기능을 활성화하고 각 페이지를 응용 프로그램에 가져옵니다.현재 우리는 페이지를 보여줄 수 있기를 희망한다.return (물체를 렌더링하는 곳) 에 다음 라우터 구성 요소를 추가합니다.App.jsC. 라우터 어셈블리 내부에 각 페이지 라우팅을 추가합니다.일반 모드:

<Route path='pathname'>
    <Name of page component/>
<Route />

라우터 구성 요소가 하나만 있는지 확인합니다.많은 경로가 있을 수 있지만 공유기는 하나입니다.<Router><Router/>의 최종 결과는 다음과 같습니다.

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom'

import Home from './pages/Home';
import Organization from './pages/Organization';
import Organizations from './pages/Organizations';
import UserProfile from './pages/UserProfile';

function App() {
  return (
    <Router>
      <Route exact path='/'>
        <Home/>
      </Route>
      <Route path='/organization'>
        <Organization/>
      </Route>
      <Route path='/organizations'>
        <Organizations/>
      </Route>
      <Route path='/UserProfile'>
        <UserProfile/>
      </Route>
    </Router>
  );
}

export default App;

이제 브라우저에/pagename를 입력하면 정확한 구성 요소를 볼 수 있습니다.

그러나 이것은 분명히 사이트를 방문하는 이상적인 방식이 아니기 때문에 내비게이션 표시줄이 필요하다.

단계 5 - 탐색 모음 -

A, 본 강좌가 곧 시작됩니다!탐색 표시줄을 추가하는 것은 상당히 간단하다.App.js 에서 src 라는 새 폴더를 만들고 ui-components 라는 js 파일을 만듭니다.
다음은 사이드바의 현재 모습입니다.

B, 본 페이지에서는 작업 원리에 대한 자세한 내용을 확인할 수 있습니다.나는 내비게이션 표시줄에만 Header과Home를 포함한다.이것은 Organizations 구성 요소에 포함된 내용입니다.

import React from 'react'
import { Nav, Navbar } from "react-bootstrap";
import { Link } from 'react-router-dom'

function Header() {
    return(
        <Navbar className="w-auto p-3 fixed-top" collapseOnSelect expand="lg" bg="dark" variant="dark">
            <Navbar.Brand as={Link} to="/">BirdBanders</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto">

                </Nav>
                <Nav>
                <Nav.Link as={Link} to="/">Home</Nav.Link>
                <Nav.Link as={Link} to="Organizations">Organizations</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Header

C. 응용 프로그램에 제목을 넣습니다.이를 위해 상단 부근Header에 추가: App.jsD. 라우터 구성 요소의 import Header from './ui-components/Header'; 내부에 App.js 를 배치합니다.모든 페이지에 있어야 하기 때문에, 루트 구성 요소의 내부로 들어가지 않습니다.

<Router>
      <Header/>
      <Route exact path='/'>
        <Home/>
      </Route>
etc...
<Router />

E. 마지막으로 탐색 모음이 각 페이지의 맨 위를 덮어쓰는 방법을 수정하여 브라우저의 페이지 제목을 덮어씁니다.<Header/>에서 div로 App.js 구성 요소를 둘러싸십시오. 여기에 <Header />의className를 추가합니다.

<div className='navbar'>
  <Header/>
</div>

F, 응용 프로그램 내.SCS 및 add:

.navbar {
  padding-bottom: 69px;
}

경탄했어이제 모든 게 정상일 거야!당신은 현재 React 사이트가 하나 있고, 페이지와 작업 내비게이션 표시줄이 하나 있습니다.지금 이곳을 거대한 놀이터로 삼아 체험해 보세요.
Bootstrap navbar
이 강좌의 내용이나 당신의 질문/평론을 알려주십시오.다음은 백엔드를 설정합니다.