React를 시작하려는 시도에 대한 내 노트.

저는 주로 백엔드 개발자입니다. 내가 한 프런트 엔드 개발은 asp.net을 사용하는 웹 양식이었습니다. 강력하게 입력되고 쉽게 테스트할 수 있는 코드에 액세스할 수 있는 배경에서 이 전체 생태계에서 시작하는 것은 꽤 어려운 것 같습니다.

이것은 아마도 내가 이전에 언급한 것을 다시 해싱하는 것일 수 있지만 프런트 엔드에서는 무언가가 "좋은"방식으로 구현되는지에 대한 "의견"에 더 가깝다고 생각합니다.

어쨌든, 나는 React로 엉망이 되려고 노력하고 있습니다. 언젠가는 kritner.com에 있는 대부분의 자리 표시자 사이트를 좀 더 실질적인 것으로 바꾸고 싶습니다.

가장 먼저 시작하는 것이 합리적이라고 생각한 것은 페이지에 대한 일반적인 공유 레이아웃입니다.

실험을 위해 Code Sandbox을 사용할 것입니다. 코드 샌드박스는 한 번도 사용해 본 적이 없다면 React, Vue, TypeScript 포함 여부와 같은 다양한 기술 스택이 포함된 샘플 앱을 함께 배치하기 위한 플레이그라운드(또는 샌드박스…)를 허용합니다.

스텁 구성 요소

템플릿으로 시작React Typescript . 가장 먼저 할 일은 내 탐색이 연결될 몇 가지 페이지 스텁을 소개하는 것입니다.

About.tsx

import React from "react";

export default function About() {
  return <div>About me</div>;
}

연락처.tsx

import React from "react";

export default function Contact() {
  return <div>Contact</div>;
}

Home.tsx

import React from "react";

export default function Home() {
  return <div>Home</div>;
}

위의 경우 클래스 구성 요소https://reactjs.org/docs/components-and-props.html#function-and-class-components가 아닌 함수 구성 요소를 사용하고 있습니다. 훨씬 더 단순해 보입니다.

라우팅

URL 라우팅

이것이 라우팅을 도입하기에 가장 적합한 장소인지 확실하지 않지만(그렇지 않을 것 같습니다) 아직 React의 규칙/표준에 대해 많이 알지 못하기 때문에 이것이 제가 할 일입니다. 라우팅을 포함하도록 App.tsx를 업데이트하겠습니다.

앱의 시작 코드는 다음과 같습니다.

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

라우팅을 위해 "react-router-dom"패키지를 코드 샌드박스로 가져옵니다.



이제 URL 라우팅을 지원하는 App 구성 요소에 라우팅을 추가합니다. 먼저 가져오기(몇 가지 추가 항목이 있습니다):

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

// Also importing the components that will be routed to
import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

URL 라우팅에 BrowserRouter , Switch 및 Route 을 사용할 것입니다. 이전에 만든 "홈", "정보"및 "연락처"구성 요소로 라우팅하려면 앱 구성 요소를 업데이트해야 합니다.

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/contact" component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

루트 경로에 대한 "정확한"것이 필요해 보이지만 적어도 경로를 정의한 순서대로는 위의 내용이 매우 간단해 보일 것입니다. "/contact"는 "/"에서 첫 번째로 일치하는 것으로 보이며 정확한 값이 지정되지 않은 경우(또는 "/"가 정의된 마지막 경로인 경우) 연락처가 아닌 홈 구성 요소를 표시합니다.

이제 애플리케이션은 위에 정의된 경로에 응답해야 합니다.

내비게이션 라우팅

다음으로 링크 기반 탐색을 처리하기 위해 Link 을 사용하겠습니다.

<div>
    <Link to="/">Home </Link>
    <Link to="/about">About </Link>
    <Link to="/contact">Contact </Link>
</div>

전체App.jsx는 이제 다음과 같습니다.

import * as React from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

import "./styles.css";

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">Home </Link>
        <Link to="/about">About </Link>
        <Link to="/contact">Contact </Link>
      </div>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/contact" component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

일부 라우팅 부분을 자체 구성 요소로 가지고 놀았지만 라우터 외부의 항목을 포함하려고 하면 오류가 발생했습니다. 나는 이것이 여전히 약간 리팩토링 될 수 있다고 생각하고 다른 사람들이 어떻게하는지 궁금합니다!

분명히 위의 스타일이나 그 성격의 어떤 것도 없습니다. 이것은 제가 더 배워야 할 또 다른 것입니다 ^^


참조:

Finished CodeSandbox

ReactJS documentation Function and Class Components

React Router