tailwndcss+React로 카드 디자인 초상화 사이트를 만들어 보세요.

입문

React에 카드를 배열하는 초상화 사이트를 만들고 싶으므로tailwindcss를 사용하여 설치해 보세요.
인상은 이런 느낌이에요.

https://scrapbox.io/help-jp/

개발 환경

VsCode
npm 6.12.1
tailwindcss
react-router-dom

설치하다

필요한 라이브러리를 설치한 전제에서 진행하다.

구성 요소 설계

index.js
--App.js
----HomePage.js
------ContentCard.js   //カードコンポーネント
--------SNSSample.js　 //カードから遷移する先のコンポーネント
--------ShopSample.js  //カードから遷移する先のコンポーネント

카드에서 마이그레이션할 구성 요소 만들기

우리 먼저 과도적인 구성 요소를 만들자.
ShopPage.js

import React from "react";

export function ShopPage() {
  return (
    <div className="ShopPage">
        ShopPage is working!
    </div>
  );
}

SNSPage.js

import React from "react";

export function SNSPage() {
  return (
    <div className="SNSPage">
        SNSPage is working!
    </div>
  );
}

App.js 라우팅

다음은 App입니다.js에서 생성된 구성 요소에 대한 루트를 진행합니다.
App.js

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { HomePage } from "./HomePage";
import { SNSPage } from './SNSPage';
import { ShopPage } from './ShopPage';
import { Header } from './Header';


function App() {
  return (
    <Router>
      <div className="App">
        <Header/>
        <Route exact path="/" component={HomePage} />
        <Route path="/sns" component={SNSPage} />
        <Route path="/shop" component={ShopPage} />
      </div>
    </Router>
  );
}

export default App;

BrowserRouter 라벨로Route 포위 표시를 통해 표시에서 경로를 지정할 수 있습니다.

카드 구성 요소를 만듭니다.

다음은 배열에 사용할 카드 구성 요소를 만듭니다.
ContentCard.js

import React from "react";

export function ContentCard(props) {
  return (
    <div className="ContentCard p-4">
      <div class="max-w-sm rounded overflow-hidden shadow-lg text-center">
        <img
          class="w-full"
          src="https://source.unsplash.com/random/1600x900/"
          alt="Sunset in the mountains"
        ></img>
        <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">{props.pageName}</div>
          <p class="text-gray-700 text-base">
            {props.description}
          </p>
        </div>
      </div>
    </div>
  );
}

이 녀석은 통용적으로 사용하고 싶어서 부모 구성 요소로부터props를 받아서 그걸 표시합니다.

HomePage.js에서 플러그인 구성 요소를 호출합니다.

다음은 홈 페이지입니다.js에서 만든 CardContents입니다.props를 js한테 맡기면서 불러.
HomePage.js

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

export function HomePage() {
  return (
    <div className="HomePage flex mb-4">
      <Link to="/sns" className="w-1/3">
        <ContentCard
          pageName="SNS"
          pageUrl=""
          cmpName=""
          imgSrc=""
          description="SNSSample page!"
        />
      </Link>
      <Link to="/shop" className="w-1/3">
        <ContentCard
          pageName="Shop"
          pageUrl=""
          cmpName=""
          imgSrc=""
          description="ShopSample page!"
        />
      </Link>
    </div>
  );
}

호출 시.를 클릭하면 마이그레이션됩니다.

동작 확인

여기까지 하면 완성이야.
서버를 부팅해서 확인해 보세요.

npm start

나는 이런 느낌이라고 생각한다.
두 개만 있으면 외롭기 때문에 카드를 늘리고 제목을 붙이면 기분이 좋다.

(이미지가 함께 있는 것을 용서해 주십시오.)

끝날 때

github에서 코드를 열거했으니 이렇게 하는 것이 좋겠다!있으면 알려주세요!
https://github.com/Anno328/Dev/tree/master/portrait/src