どのように私は次を使用してスタック推測ツールを作成しました.js

28254 ワード
watercooler react nextjs テキストリンク
私はすべてのものを学ぶの唯一の目的のために面白いツールを作成することです.
この記事では、このスタックを作成するプロセスをガイドします.js
スタック推測のウェブサイトは次のように動作します.
  • 人が名前を入力
  • アプリケーションのユーザー名をリダイレクトする
  • スクリプトは、自分の名前のユニークな文字を抽出し、各文字の関連するツールをプログラミングを見つける
  • ユーザーがスタックを表示できます

    • Find your guilty pleasure stack

    プロジェクトの設定
    基本から始めましょう.次はボイラー板が必要です.以下の依存関係を持つアプリケーション
  • Tailwind
  • React icons

    • I won't go into detail for each installation, but you'll get a detailed article by clicking on the above links.


    次は新しいものを作ろう.JSプロジェクト
    npx create-next-app
    次に、作成したプロジェクトに移動し、次のテール風関連の依存関係を追加します.
    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
    我々がここにいる間、Tailwindを初期化しましょう.
    npx tailwindcss init -P
    と同様にアイコンを返します.
    npm i react-icons
    あなたの頭にtailwind.config.js ファイルを追加します.
    module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
    今すぐ開くstyles/global.css と変更します.
    @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

    ホームページの作成
    それで、ホームページはAから成りますNext.js form ユーザーが最初の名前を入力できる場所.
    HTMLパーツを設定しましょう.
    import Head from 'next/head';

export default function Home() {
  return (
    <div className='p-8 min-h-screen bg-gray-100 flex'>
      <Head>
        <title>Find your guilty pleasure dev stack</title>
        <meta name='description' content='Find your guilty pleasure dev stack based on your name' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main className='flex flex-col justify-center h-auto w-full items-center  rounded-xl border-4 border-white p-8'>
        <h1 className='text-4xl mb-4 font-black'>Find your <span className='italic text-purple-300'>guilty pleasure</span> dev stack</h1>
        <p className='mb-4 font-semibold'>We all know you got one 😏</p>
        <form className='shadow-lg rounded-2xl p-6' onSubmit={findDevStack}>
          <input name='name' placeholder='Enter your firstname' className='p-4 mr-2 rounded-xl' required autoComplete='name' />
          <button type='submit' className='bg-purple-600 font-semibold text-white p-2 w-32 rounded-full hover:bg-purple-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300 m-2 uppercase'>
            Find it
          </button>
        </form>
      </main>
    </div>
  );
}
    これは、基本的なフォームをレンダリングします.ご覧の通り、我々はonSubmit フォームへのハンドラ.
    提出されるとfindDevStack メソッドが呼び出されます.
    一旦提出されると、ページはhttp://ourwebsite/{first name} ここで、最初の名前は動的です.
    import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const findDevStack = async (event) => {
    event.preventDefault();
    const name = event.target.name.value;
    router.push(name);
  };

  return ();
}
    見てみましょう

    一度提出すると、我々は/chris ; しかし、この経路は存在しない.

    スタック推測ページの作成
    上記の通り、このルートはどんな名前でもありえます.
    この仕事をするNext.js pages 我々は、使用する必要があります[name].js 形式.
    次へ進む[name].js あなたのファイルpages ディレクトリ.
    このページではgetStaticPaths しかし、我々のケースでは、我々はblocking 我々の結果を待つフォールバック.
    export async function getStaticPaths() {
  return { paths: [], fallback: 'blocking' };
}
    また、使用したいgetStaticProps これは実際のデータロードを行う関数です.
    export async function getStaticProps({ params }) {
  const { name } = params;
  const stack = await getStack(name);
  return { props: { stack: stack, name: name } };
}
    ここで我々はパラメータ(URL)から名前を抽出します.関数を呼び出しgetStack . この関数を少し作成します.
    スタックと名前を実際のページに返します.
    スタックはアイテムの配列になります.

    GetStack関数の作成
    まず先へ行きましょうgetStack 関数.
    私はlib フォルダと配置getStack.js ファイルの中に.
    以下のようにアルファベット文字列を定義しました.
    const devABC = {
  a: {
    title: 'Angular',
    icon: 'DiAngularSimple',
  },
  b: {
    title: 'Bootstrap',
    icon: 'DiBootstrap',
  },
  // etc
};
    以下のように関数のエクスポートを開始します.
    export default async function getStack(name) {
  // Todo code
}
    私たちがしなければならないことがいくつかあります.
  • すべての数値文字と奇妙な文字を削除し、入力を小文字にする必要があります.
    • name = name.toLowerCase().replace(/[^a-z]/gi, '');
  • 我々は、ユニークな文字を持つ必要があるので、すべての重複を削除するSet 方法
    • const nameSet = new Set(name);
  • 我々はそれぞれのユニークな文字をマップし、各文字の上記の文字のオブジェクトを返す必要があります.
    • const output = [...nameSet].map((abc) => devABC[abc]);
  • 未定義値をフィルタアウトする必要があります
    • const output = [...nameSet].map((abc) => devABC[abc]).filter(Boolean);
  • 出力を返す必要があります.
    • return output;
    完全な関数の作成は以下のようになります.
    export default async function getStack(name) {
  name = name.toLowerCase().replace(/[^a-z]/gi, '');
  const nameSet = new Set(name);
  const output = [...nameSet].map((abc) => devABC[abc]).filter(Boolean);
  return output;
}
    ヘッドに戻る[name].js ファイルの先頭部分にこの関数をインポートします.
    import getStack from '../lib/getStack';

    実際のページのレンダリング
    これでページの実際のリターンについて作業できます.
    我々が必要とするものの残りを輸入することから始めましょう.
    import Head from 'next/head';
import * as Devicons from 'react-icons/di';
import Link from 'next/link';
    私たちのページは、再びstack , and name このようなプロパティとして:
    export default function Name({ stack, name }) {

}
    このページのメインレンダリングを設定しましょう.
    export default function Name({ stack, name }) {
  return (
    <div className='flex min-h-screen p-8 bg-gray-100'>
      <Head>
        <title>Find your guilty pleasure dev stack</title>
        <meta
          name='description'
          content='Find your guilty pleasure dev stack based on your name'
        />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main className='flex flex-col items-center justify-center w-full h-auto p-8 border-4 border-white rounded-xl'>
        <h1 className='mb-4 text-4xl font-black'>
          Hey <span className='italic text-purple-300'>{name}</span> this is it!
        </h1>
        <p className='mb-4 font-semibold'>Your guilty pleasure stack!</p>
        <div className='p-4 mb-6 bg-gray-200 border-2 border-white shadow-lg rounded-xl'>
          <ul>
            {stack.map((item, index) => (
              // Todo render a item
            ))}
          </ul>
        </div>
        <Link href='/'>
          <a className='italic underline'>Find your own stack</a>
        </Link>
      </main>
    </div>
  );
}
    ご覧の通り、私は、各アイテムに対して行われたレンダリングを除外しました.
    各項目は、アイコンとツールの名前を表示する必要があります.
    私たちがダイナミックなアイコンをレンダリングする必要があるので、私はそれがこれのようにそれ自身のコンポーネントにそれを抽出するのにより意味があると思いました:
    export default function Name({ stack, name }) {
  const DevItem = ({ item }) => {
    const ICON = Devicons[item.icon];
    return (
      <li className='flex items-center text-xl'>
        <ICON className='mr-2 text-4xl' />
        {item.title}
      </li>
    );
  };

    return ()
}
    これは動的に各アイコンをロードし、それをレンダリングします.その後、我々のレンダリングに戻ることができますし、追加するDevItem 各スタック項目.
    <ul>
    {stack.map((item, index) => (
      <DevItem key={index} item={item} />
    ))}
</ul>
    そして、あなたが行くと、我々は今、スタックの例で見られるようなユニークな名前のレンダリングを取得!
    また、完全なコードを見つけることができますGitHub またはresult here .

    読んでいただきありがとうございます、接続しましょう!
    私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
    iOS開発のLottie--クールなダイナミック
    ハウツーとスタイルの良いボタンを作る