こんにちは!J-THEBです~今日はReactですjsでページFooter/Headerを作成したいです!TailwindCSSの構成について議論し、対応する部分のコードを作成しようとします.

1.react-APpの作成

+)紗を敷いていない人はここへ!
+)反応していない人はここへ!

まず最初にしなければならないのはreact-appを作成することです.私は線で生成します.npmでインストールした人がnpm create-react-app <web이름>と入力すればいいです.

yarn create react-app webstructure

インストールが完了すると、次の文が表示されます.(WebStructureというディレクトリを作成したので、別のディレクトリ名を設定しましたが、WebStructureに移動して残りの作業を続けます)

以降、以下の入力語を入力して反応させる.jsが始まりました!では第一段階はもう終わりました~!

yarn start

2.TailwindCSSのインストール

TailwindCSSはCSSフレームワークです.プロパティを別のタグに入れるように設計します.既存のCSSはコンテンツをカスタマイズする必要があるが,Tailwindcssはコンテンツをあらかじめ定義しておくことで開発時間を短縮している.コードが長く、表示が難しいという欠点がありますが、簡単なページを実現し、迅速な開発が必要な場合は、使いやすいフレームワークです.

はまた、通常のCSSのようにカスタマイズできる拡張性を有する.

2.1 TailwindCSSのインストール

では、インストールしましょうか.次の入力方法でインストールできます.自分用の取り付けで大丈夫です

yarn add -D tailwindcss postcss autoprefixer
npm install -D tailwindcss

下図のように、私たちが使用するCSSのインストールも完了しました!
今は尾風config.jsファイルを追加!次のコマンドtailwindを追加してください.config.jsファイルが追加されていることがわかります!

npx tailwindcss init

tailwindcssファイルを以下のように変更してください.すべてコピーして、すべての既存の内容を削除して入ればいい~!

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

あとsrc>indexcssファイルにアクセスしてクリアし、追加します:)

// index.css 파일 내부 내용
@tailwind base;
@tailwind components;
@tailwind utilities;

3.Cracoのインストール

create-act-appはPostCSSをサポートしていますが、再定義できないため、TailwindCSSの使用には様々な制限があります.そこで、CRACO,cracoをインストールします.config.jsファイルを追加することで、さまざまなカスタマイズが簡単に行えます.
以下はダウンロード可能なコマンドです.

yarn add @craco/craco
npm install  @craco/craco

これも出たらインストール完了~!
これで、cracoを使用してcraco.config.jsファイルを作成し、PostCSSを使用することができます.コードは以下の通りです.

module.exports = {
    style: {
        postcssOptions: {
            plugins: [require('tailwindcss'), require('autoprefixer')],
        },
    },
};

以下に示すように、一番上のディレクトリに保存する必要があります.

最後にpackage.jsonでこの部分をこのように修正しました!

"start": "craco start",
"build": "craco build",
"test": "craco test"

上のコードで該当する部分を見つけて貼り付けます:)
では、すべての設定が終わりました!HeaderとFooterを作ろうか?

4.HeaderとFooterの作成

今日はHeaderとFooterを作ります私の書いたコードを勝手に入れてください.react-scriptを5に更新するには、実行不良が多いはずです.cracoは問題が特に多いと言った.Cracoを早く更新してほしい...以下に従ってください.問題があれば連絡してください.試験がんばれ~

4.1書類の整理

私たちは今アプリです.cssファイルは必要ありません!src上のアプリケーション.cssファイル、アプリケーションを削除します.jsの次の文を削除します!

import './App.css'

4.2

App.jsファイルを変更します.以下に示します.すべてを削除してコピーを貼り付けます.

import logo from './static/photo/logo.png';
import './index.css';

function App() {
  const currentDay = new Date();
  const currentYear = currentDay.getFullYear();

  return (
    <div className="App">
      <header className="fixed inset-x-0 top-0 z-50 left-0 bg-white text-gray-700 body-font border-b border-gray-200">
        <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
          <div
            className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
          >
            <img alt="logo" src={logo} className="w-8 h-8 -mr-1" />
            <span className="ml-3 text-xl text-indigo-500">동글동글 코인 지표 인덱스</span>
          </div>
          <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
            <div className="mr-5 hover:text-gray-900">
              Speedometer
            </div>
            <div className="mr-5 hover:text-gray-900">
              Graph
            </div>
            <div className="mr-5 hover:text-gray-900">
              Chart
            </div>
          </nav>
        </div>
      </header>
      <section className="containe mb-8 mt-24">
        Speedometer가 들어갈 자리입니다!
      </section>
      <section className="containe mb-8 mt-8">
        Graph가 들어갈 자리입니다!
      </section>
      <section className="containe mb-8 mt-8">
        Chart가 들어갈 자리입니다!
      </section>
      <footer className="text-gray-700 body-font">
        <div className="bg-gray-200">
          <div className="container mx-auto pt-4 px-5 flex flex-wrap flex-col sm:flex-row">
            <p className="text-gray-500 text-sm text-center sm:text-left">
              © {currentYear} 동글동글
            </p>
            <span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">
              경기도 용인시 처인구 모현읍 외대로 81, 한국외국어대학교
            </span>
          </div>
          <div className="container mx-auto pb-4 px-5 flex flex-wrap flex-col sm:flex-row">
            <span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">
              Developed by 김도영, 김주원, 김태우, 정서영
            </span>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;

あとはyarn startかnpm run startをクリックしてスタート!次の同じ画面で、必要に応じてデザインを変更します!
ファイル構造とコードは以下のアドレスで見つけることができます!
+)ファイル構造とコードチェックに移動します。
ソース:
Tailwindcss Documentation installation
あなたのブログ