그날의 영감: React Router

53468 단어 react webdev tutorial javascript

지금까지 우리는 React를 사용하여 단일 페이지의 응용 프로그램을 개발해 왔다. 우리가 SPA를 좋아하지 않는 것이 아니라 그것을 좋아하지만, 우리는 여러 페이지가 필요한 더 복잡한 응용 프로그램에 참여하는 경향이 있다. 그렇지 않니?그래서 우리는 준비를 해야 한다. 만약에 우리가 여러 페이지가 있다면, 우리는 우아하게 한 노선에서 다른 노선으로, 우아하게 한 노선에서 다른 노선으로 뛰어야 한다. 우리는 무엇을 맞혀야 합니까?

React 라우터

우리의 이번 임무는 매우 수월하다.우리는 react-router-dom 패키지를 탐색할 것이다. 이 패키지는 우리의createreact 응용 프로그램에서charm처럼 작동하기 때문에 우리를 위해 많은 고통을 절약할 수 있다.
react 라우터dom에서 제공하는 네 가지 기본 구성 요소를 연습합니다.

브라우저 라우터
다른 경로를 지정할 수 있도록 이 구성 요소에 맨 윗부분이나 루트 요소를 봉인해야 합니다.보통, 나는 항상 응용 프로그램 구성 요소를 응용 프로그램의 출발점으로 사용하기 때문에, 그것은 매우 좋은 곳이 될 것이다.

변환
인코딩 과정에서 만났던 다른 switch 문장과 같이, 이것은 우리가 여러 가지 선택을 비교하고, 누가 이긴지 알려주며, 현재 URL을 우리가 지정한 루트와 일치하도록 사용할 수 있습니다.

노선
우리의 교환기는 이러한 선택이 루트 구성 요소가 되어야 한다. 이 구성 요소에서 우리는 선택한 경로를 지정하고 해당하는 구성 요소와 연결할 수 있다.

링크
우리는 그것을 사용해서 우리의 일반적인 닻 라벨을 대체한다. 우리가 실제적으로 특정한 경로를 가리킬 때, 그것은 엔진 뚜껑 아래의 모든 것을 처리하고, 우리를 위해 닻 라벨을 만들 것이다.

문자는 공유기의 기능을 진정으로 실현할 수 없지만 웹 응용 프로그램을 구축하면 이를 할 수 있다!

무엇을 구축합니까?

우리는 때때로 시각적 영감을 필요로 한다. 대유행 이후 실내에 쓰는 시간이 실외보다 많기 때문에 나는 이 인터넷 응용 프로그램에 실외의 물건을 추가하기로 결정했다.
우리는 우리의 무료한 눈을 위해 영감 획득기를 세울 것이다.이것은 API를 통해 unsplash.com에서 무작위 이미지를 가져와 우리에게 필요한 시각적 지원을 제공하여 하루를 보내게 할 것이다.
그날의 영감 얻기HERE

계획이 뭐예요?

우리는 세 개의 홈페이지가 있기를 희망한다.

홈 페이지
그곳에서 우리는 우리가 얻은 무작위 그림을 보여 준다

단일 이미지 페이지
홈페이지에서 클릭한 이미지를 확대해서 촬영자의 이름과 연결하는 페이지입니다.

포토그래퍼 페이지
단일 이미지 페이지에서 사진작가의 이름을 눌렀을 때 사진작가의 기본 정보를 표시하고 최신 작품을 보여주는 페이지입니다.

너무 좋아요.우리는 자신의 페이지가 있다.우리는 단지 다른 구성 요소만 필요로 한다. 왜냐하면 우리는 홈페이지와 사진작가 페이지에 이미지 격자를 표시해야 하기 때문이다. 우리는 이미지라고 부른다!
코델란드에게!

집.

createreact 프로그램을 설치하고 초기화한 후, 첫 번째 페이지, 즉 홈페이지를 만듭니다.
우리는 unsplash.com 에서 무작위 이미지를 추출하여 격자에 표시할 계획이다.
API를 사용하려면 무료 애플리케이션 키가 필요합니다.이것은 간단한 과정입니다. Unsplash official docs 에서 더 많은 정보를 얻을 수 있습니다.
우리의 프로젝트 구조에 대해 이번에 우리는 새로운 페이지를 추가했다.우리는 구성 요소에서 페이지를 분리할 것이다.그것들은 여전히 정상적인 반응 성분이지만, 그것들의 저장 위치에 차이가 있다.우리는 어떤 가능한 혼란도 피하기 위해 자신의 조직성을 유지하기를 바란다.
페이지의 경우 구성 요소 폴더 구조와 유사한 폴더 구조를 만듭니다.우리는 먼저 src 폴더에 페이지 폴더를 만들고 메인 폴더를 만든 다음에 그 폴더에서 우리 홈페이지에 들어갈 것입니다.js와 Home.css
우리 집에 있어요.js는 API 단점과 통신하여componentDidMount에서 12개의 무작위 이미지를 가져오고 응답을 이미지라고 하는 상태로 설정합니다.

import React from "react";
import "./Home.css";

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      images: [],
    };
  }
  componentDidMount() {
    fetch("https://api.unsplash.com/photos/random?count=12", {
      headers: {
        Authorization: `Client-ID YourApiKey`,
      },
    })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          images: data,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    return
        (<div className="home">
            <h1 className="header">Inspiration Of The Day</h1>
         </div>);
  }
}

export default Home;

현재, 우리는 우리의 페이지를 완성하기 위해 일치 동의한 이미지 구성 요소를 만들어야 하지만, 우선, 응용 프로그램에 우리의 홈페이지를 포함해야 한다.js 파일은 우리가 변경한 것을 표시합니다!

import React from "react";
import "./App.css";
import Home from "./pages/Home/Home";

class App extends React.Component {
  render() {
      return (
        <div className="app">
          <Home />
        </div>
      );
    }
}

export default App;

이미지

src 폴더에components 폴더를 만들고 이미지 폴더를 포함하면 그림을 채울 수 있습니다.js와 그림.css 파일은 우리의 고무적인 이미지를 보여 줍니다.
우리는 간단한 그림 격자를 가지고 있으며, 이 그림들을 도구의 진열로 우리에게 전달할 계획이다.

import React from "react";
import "./Images.css";

class Images extends React.Component {
  render() {
    return (
      <div className="images">
        {this.props.images.map((data) => (
          <img key={data.id} alt={data.description} className="image" src={data.urls.small} />
        ))}
      </div>
    );
  }
}

export default Images;

아름답다이제 홈페이지에 그림 구성 요소를 포함하고 이 그림을 도구로 전달합시다!

render() {
    return (
      <div className="home">
        <h1 className="header">Inspiration Of The Day</h1>
        <Images images={this.state.images} />
      </div>
    );
  }

보기 좋다!하지만 만약 우리가 여기와 저기에 CSS를 좀 놓는다면 그것은 더욱 좋아 보일 것이다
이미지css

.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 2rem;
  padding: 0 5% 5% 5%;
  align-items: stretch;
}

.images .image {
  width: 100%;
  height: 100%;
  max-height:350px;
  border: teal 10px solid;
}

.image img{
    width: 100%;
    height: 100%;
}

응용 프로그램.css

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
* {
  box-sizing: border-box;
}

html,
body,
#root,
.app {
  height: 100%;
}

body {
  background-color: #ff5c5c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='65.5' stroke-opacity='0.1' %3E%3Ccircle fill='%23ff5c5c' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23f3535d' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23e64b5e' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23d9435e' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23cb3b5d' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23be355c' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23b02f5a' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23a22958' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23942455' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23862052' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23781b4e' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%236a1849' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%235d1444' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%2350103e' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23430d38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23370a32' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232b062b' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  /* background by SVGBackgrounds.com */
  font-family: "Pacifico", cursive;
  color: #c2bcc7;
}

집.css

.home .header {
  text-align: center;
  font-size: 3rem;
  text-shadow: -11px -1px 5px #210024;
}

아름다웠어우리 첫 페이지 생겼어!이제 이 모든 것을 연구할 때가 됐어, 우리의 공유기.
콘솔에서 다음 명령을 실행합니다.

npm install react-router-dom

이제 앞서 언급한 네 개의 어셈블리 중 세 개를 선택하여 응용 프로그램이 시작될 때 가져옵니다.회사 명

import { BrowserRouter, Switch, Route } from "react-router-dom";

우리는 약속에 따라 우리의 응용 프로그램 내용을 BrowserRouter 구성 요소에 봉하여 공유기가 어디에서 찾는지 알려야 한다.여러 라우팅 경로를 추가하기 위해 라우팅 구성 요소를 패키지화한 스위치 구성 요소를 생성해야 합니다.

return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <div className="app">
        <Switch>
             <Route path="/" exact component={Home} />
        </Switch>
      </div>
    </BrowserRouter>
  );

추가 basename 는 로컬 환경에 아무런 영향을 주지 않을 수도 있고, 코드 없이도 정상적으로 작동할 수 있지만, 나중에 배치할 때 저에게 감사를 드립니다.create react 응용 프로그램은 PUBLIC\u URL env 변수에 정확한 절대 경로를 설정하지만, 이 변수를 모든 루트 경로에 미리 설정하거나 BrowserRouter 구성 요소에 전달하지 않으면 자동으로 선행을 처리합니다.따라서 서버에 URL을 엉망진창으로 만들고 싶지 않다면 이 단계를 기억하세요.
현재 우리는 또 다른 키워드basename를 사용했다.라우팅 구성 요소에 전달할 때, 지정한 구성 요소로만 지정한 경로에 응답하도록 알려 줍니다.만약 우리가 그 키워드를 추가하지 않았다면, 우리는 임의의 단어나 파라미터를 경로에 추가할 수 있으며, 이것은 여전히 홈 구성 요소로 응답할 것이다.

단폭 이미지

클릭한 이미지를 확대하기 위해 SingleImage 페이지를 만들어야 합니다. 그러나 그 전에 이미지 구성 요소를 조정하고 각 이미지에 우리가 언급한 네 번째 구성 요소, 링크를 추가해야 합니다.
우리는 exact 라벨을 포장하고 이 경로를 단일 이미지로 가리킬 것입니다.또한 우리가 어떤 그림을 보고 있는지 알기 위해 얻은 데이터에서 얻은 이미지 id를 전달합니다.

import React from "react";
import "./Images.css";
import { Link } from "react-router-dom";

class Images extends React.Component {
  render() {
    return (
      <div className="images">
        {this.props.images.map((data) => (
         <Link key={data.id} to={"/single-image/"+data.id} className="image" > <img alt={data.description} src={data.urls.small} /></Link>
        ))}
      </div>
    );
  }
}

export default Images;

이제 SingleImage 페이지를 추가합니다.우리의 페이지에는 이 확대된 그림만 있고 촬영자를 가리키는 링크도 있다.
링크에 전달된 img 매개 변수를 사용하여 이미지 데이터를 가져옵니다.우리는 Link 링크 구성 요소에서 보내는 매개 변수에 접근할 수 있다

import React from "react";
import "./SingleImage.css";
import { Link } from "react-router-dom";

class SingleImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: {},
    };
  }
  componentDidMount() {
    fetch("https://api.unsplash.com/photos/" + this.props.match.params.id, {
      headers: {
        Authorization: `Client-ID ${process.env.REACT_APP_API_KEY}`,
      },
    })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          image: data,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    if (this.state.image.user && this.state.image.urls) {
      return (
        <div className="single-image">
          <figure>
            <img
              alt={this.state.image.description}
              src={this.state.image.urls.full}
            />
            <figcaption>
              Photographed By{" "}
              <span className="image-photographer">
                <Link to={"/photographer/" + this.state.image.user.id}>
                  {this.state.image.user.name}
                </Link>
              </span>
            </figcaption>
          </figure>
        </div>
      );
    }
    return "";
  }
}

export default SingleImage;

나는 문제가 생겼다. 때때로 끼워 넣은 대상이 정의되지 않았기 때문에, 모든 데이터가 준비되었을 때만 렌더링을 하기 위해if 조건을 추가했다.나는 또한 사진작가에게 우리가 이미지를 처리하는 방식과 같은 링크 구성 요소를 추가했다.
모든 것을 똑똑히 보기 위해 SingleImage에 CSS를 추가합니다.css, 그리고 사진작가 페이지로 이동!

.single-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.single-image figure {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.single-image figcaption,
.single-image figcaption .image-photographer {
  text-align: center;
  color: #c2bcc7;
  font-family: "Pacifico", cursive;
}
.single-image figcaption {
  font-size: 2rem;
  text-shadow: -11px -1px 5px #210024;
}

.single-image figcaption .image-photographer {
  text-shadow: none;
  font-size: 3rem;
}
.single-image figcaption .image-photographer a {
  color: #c2bcc7;
}

.single-image figure img {
  width: 70%;
  height: 80%;
}

Purrfect!어플리케이션에 스위치 구성 요소의 경로를 정식으로 추가할 수 있습니다.js 파일!

render() {
    return (
      <BrowserRouter>
        <div className="app">
          <Switch>
            <Route path="/single-image/:id" component={SingleImage} />
            <Route path="/" exact component={Home} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }

얘가 일하고 있어!

포토그래퍼

우리의 사진작가 페이지에 대해 우리는 두 가지 서로 다른 유형의 데이터, 사진작가의 기본 정보와 사진작가의 최신 사진을 얻어야 한다.
우리의componentDidMount에서, 우리는 두 개의 단점을 호출하여 우리가 이렇게 할 수 있도록 하고, 결과 데이터로 우리의 상태를 업데이트할 것이다.

import React from "react";
import "./Photographer.css";
import Images from "../../components/Images/Images";

class Photographer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      images: [],
    };
  }
  componentDidMount() {
    fetch(
      "https://api.unsplash.com/users/" + this.props.match.params.username,
      {
        headers: {
          Authorization: `Client-ID ${process.env.REACT_APP_API_KEY}`,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        this.setState({
          user: data,
        });
      })
      .catch((error) => console.error(error));

    fetch(
      "https://api.unsplash.com/users/" +
        this.props.match.params.username +
        "/photos?order_by=latest",
      {
        headers: {
          Authorization: `Client-ID ${process.env.REACT_APP_API_KEY}`,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        this.setState({
          images: data,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    return (
      <div className="photographer">
        <div className="info">
          <h1 className="header">{this.state.user.name}</h1>
          <div className="info-block">
            <p className="header">Bio</p>
            <p>{this.state.user.bio}</p>
          </div>
          <div className="info-block">
            <p className="header">Location</p>
            <p>{this.state.user.location}</p>
          </div>
          <div className="info-block">
            <p className="header">Portfolio</p>
            <p><a href={this.state.user.portfolio_url}>{this.state.user.portfolio_url}</a></p>
          </div>
        </div>
        <div className="photographer-images">
          <h1 className="header"> Latest Work</h1>
          <Images images={this.state.images} />
        </div>
      </div>
    );
  }
}

export default Photographer;

정상적으로 작동하지만 사진작가에게는 CSS가 필요합니다.css

.photographer {
  display: grid;
  grid-template-columns: 2fr 8fr;
}

.photographer .info {
  margin-left: 2rem;
}

.info .info-block .header {
  font-weight: 900;
  color: teal;
}

.info .info-block a {
  color: #c2bcc7;
}

.photographer .photographer-images .header {
  text-align: center;
}

우리 끝났어!우리는 매일 영감이 있다!
코드를 찾을 수 있습니다 HERE
이 작은 영감 아래, 나는 위대함을 향해 여섯 번째 걸음을 내디디며, 우리가 다른 세계에서 만날 때까지.
모든 피드백이나 건의를 환영합니다.여기, 저기, 어디든지, 나에게 도움의 손길을 내밀어라!

RanaEmad 회사 / 그날의 영감

unsplash API를 사용하여 대량의 무작위 이미지를 가져와 사용자가 확대된 이미지를 보고 최신 작품의 사진작가 페이지를 볼 수 있도록 하는 React 스크립트입니다.

Reference

이 문제에 관하여(그날의 영감: React Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ranaemad/inspiration-of-the-day-react-router-46f3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

동적 로드yui treeview

Nuxt JS에서 SASS 전역 변수 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다