React Tailwind 갤러리

안녕! 어떻게 지내? 정말 멋진 일을 하고 계시길 바랍니다! 당신이 허락한다면 당신의 시간 5분을 (간신히) 훔치러 여기 있습니다.

tailwind css를 사용하는 첫 번째 반응 앱이 있습니다. 이 멋진 프로젝트에 대한 간단한 아이디어를 드리겠습니다.

아름다운 이미지 세트를 가져와서 화면에 렌더링하기 위해 Pixabay의 API를 사용했습니다. 사용자 입력에 따라 이 프로젝트는 사용자 쿼리와 일치하는 이미지를 다시 렌더링합니다. 아주 간단하죠?



구축을 시작합시다

반응 앱 만들기

먼저 프로젝트에 react를 설치해야 합니다. PC에 노드를 설치했다고 가정합니다.

1) 프로젝트 생성

"react-tailwind-gallery"라는 폴더를 만들고 vs 코드 편집기를 연 다음 터미널을 엽니다.

npx create-react-app . (Windows용 명령어)

2) Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss 초기화 -p

3) tailwind.config.js 파일을 구성합니다.

"tailwind.config.js"라는 파일을 만들고 아래 코드를 복사하여 붙여넣기만 하면 됩니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4) CSS에 Tailwind 지시문을 추가합니다.

./src/index.css 파일에 아래 코드를 추가합니다.

베이스;
구성 요소;
유용;

5) 빌드 프로세스 시작

npm 시작 실행

이제 반응 프로젝트를 만들고 프로젝트에 tailwind를 통합했습니다. 시원한. 내 루트 구성 요소 App.js가 오류 없이 실행되고 있는지 확인하겠습니다.

App.js

import { useState, useEffect } from "react";
import ImageCard from "./components/ImageCard";
import ImageSearch from "./components/ImageSearch";

function App() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [term, setTerm] = useState('');

  useEffect(() => {
    fetch(`https://pixabay.com/api/?key={your-pixabay-key}&q=${term}&image_type=photo&pretty=true`)
    .then(response => response.json())
    .then(data => {
      setImages(data.hits);
      setIsLoading(false);
    })
    .catch(err => console.log(err));
  }, [term]);

  return (
    <div className="container mx-auto">
      <ImageSearch searchText = {(text) => setTerm(text)} />

      {!isLoading && images.length === 0 && <h1 className="text-5xl text-center mx-auto mt-32">No Images Found</h1>}

      {isLoading ? <h1 className="text-6xl text-center mx-auto mt-32">Loading...</h1> 
      : <div className="grid grid-cols-3 gap-4">
        {images.map(image => (
          <ImageCard key = {image.id} image = {image} />
        ))}
      </div>}
    </div>
  );
}

export default App;

코드에 대해 걱정하지 마십시오. 꽤 간단합니다. pixabay에서 제공한 키를 사용하여 API pixabay를 사용하여 이미지 배열을 렌더링하려고 합니다. 그런 다음 응답을 저장하고 페이지가 렌더링되는 즉시 이미지라는 배열에 데이터를 로드합니다(useEffect 후크의 도움으로 가능함).

이미지카드.js

import React from 'react'

const ImageCard = (props) => {
    const tags = props.image.tags.split(',');

  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img src={props.image.webformatURL} alt="random" className="w-full" />
      <div className="px-6 py-4">
        <div className="font-bold text-red-500 text-xl mb-2">
          Photo by {props.image.user}
        </div>
        <ul>
          <li>
            <strong>Views: </strong>
            {props.image.views}
          </li>
          <li>
            <strong>Downloads: </strong>
            {props.image.downloads}
          </li>
          <li>
            <strong>Likes: </strong>
            {props.image.likes}
          </li>
        </ul>
      </div>
      <div className="px-6 py-4">
        {tags.map((tag,index) => (
            <span key = {index} className="inline-block bg-gray-200 rounded-full px-3 
            py-1 text-sm font-semibold text-gray-700 mr-2">
              #{tag}
            </span>
        ))}
      </div>
    </div>
  )
}

export default ImageCard;

이것은 각각의 모든 이미지 카드를 렌더링하는 데 사용하는 구성 요소입니다. 여기에서는 그리드 정렬을 사용하여 이미지 카드가 열에서 3개로 렌더링되고 원하는 만큼의 행으로 렌더링되도록 했습니다.
반응의 모든 기본 사항입니다(알고 계시기를 바랍니다).

ImageSearch.js

import React, { useState } from 'react';

const ImageSearch = (props) => {
  const [text, setText] = useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    props.searchText(text);
  }

  return (
    <div className='max-w-sm rounded overflow-hidden my-10 mx-auto'>
      <form onSubmit={onSubmit} className="w-full max-w-sm">
        <div className="flex items-center border-b border-b-2 border-teal-500 py-2">
            <input onChange={e => setText(e.target.value)} className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Image Term..." />
            <button className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded" type="submit">
                Search
            </button>
        </div>
      </form>
    </div>
  )
}

export default ImageSearch; 

이것이 우리 프로젝트의 핵심입니다. 사용자가 쿼리를 입력할 수 있는 입력 필드를 제공합니다. 예를 들어 사용자가 고양이와 관련된 이미지만 렌더링하도록 "고양이"를 입력했습니다.



매번 사용자의 쿼리를 기반으로 이 프로젝트는 pixabay에서 API의 데이터를 가져와서 useEffect 후크를 사용하여 관련 이미지 카드를 렌더링합니다.

그것은 그것에 달려 있습니다. 나는 자랑하거나 깊이 들어가고 싶지 않습니다. 내 github 저장소와 라이브 배포 링크를 통해 재미를 경험할 수 있습니다!

Repo ⚡
Live ⚡

프로젝트가 끝나면 여기서 끝낼 수 있습니다. 배포 부분에 대해 이야기하고 싶었습니다. 여기서는 이 프로젝트를 GitHub Pages에 배포했습니다.

전개

1) 먼저 프로젝트 이름으로 github에 repo를 만듭니다.

2) 아래와 같이 터미널에 명령어를 입력합니다.

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/JagadeeshKJ/gallery.git
git push -u origin main

3) 이 명령을 사용하여 GitHub 페이지 종속성 패키지를 추가합니다.

npm install --save gh-pages

4) package.json 파일에 홈페이지 속성 추가

"homepage": "https://{username}.github.io/{your-repo-name}/"

5) package.json 파일에 배포 스크립트 추가

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

6) 애플리케이션을 GitHub 페이지에 배포

이제 아래 명령을 실행하여 반응 애플리케이션을 GitHub 페이지에 배포합니다.

npm run deploy

그게 다야. 터미널(vs code)에서 이와 같은 것을 얻을 수 있습니다.

gh-pages -d build
Published
Done in 18.14s

이제 package.json에 추가한 홈페이지 링크를 사용하여 라이브 배포 링크에 액세스할 수 있습니다.

(이렇게 생겼습니다) "https://JagadeeshKJ.github.io/react-tailwind-gallery/ "

곧 봐요!