内容をあなたの体に加える方法

4450 ワード
webdev tutorial react typescript テキストリンク

ようこそ！


我々が去ったところ－GitHub
今日やっていること
本体にコンテンツを追加する

  • チャットチャットのための時間


    今、我々はコンポーネントツリーにコンポーネントを分割し、DOMの領域をコンテンツ(本体とフッター)のために特別に開発しました.
    まず最初に、TDDの原則に従って、デザインにつき二次見出しのためにTitle.test.jsの範囲内でテストを書く必要があります.
    test('secondary header is visible', () => {
  render(<Title />)

  const secondaryHeading = 'Full-Stack Engineer'
  screen.getByText(secondaryHeading)
})
    テストを実行すると、タイトルコンポーネントにコンテンツを追加しないために失敗します.しかし、できる前にデザインをチェックする必要があります.
    私のデザインを作成するとき、私は最初に何をwireframeと呼ばれています.

    Wireframing is a way to design a website service at the structural level.


    wireframeから私は別の見出しレベルの標準的なピクセルの高さを研究し、それらの標準を念頭に置いて、これらの特定の見出しで設計を使用します.

    今、我々は2番目の見出しのための正しい見出しでwireframeを参照することができます<h3>です.
    function Title() {
  return (
    <div>
      <h1>
        Samuel Preston
      </h1>
      <h3>
        Full-Stack Engineer
      </h3>
    </div>
  )
}
    テストコンポーネントは、タイトルコンポーネントがマウントされたときにコンテンツが表示されます.しかし、タイトルコンポーネントはDOMでそれを望む場所ではありません.

    これを修正するには、タイトルを作成する必要があります.CSSファイルをインポートしてインポートすると、既にCSSを事前に開発しました.
    .title {
  color: white;
  text-align: center;
}

.main-title {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
    これはまだきれいなスタイルではありませんが、後でフォントを追加するまでは行います.

    このプロセスを本体内の残りのコンポーネントに対して継続します.
    私について
  • 私について
  • 私の技術
  • ポートフォリオ
  • のブログ
    • プロジェクトやポストチャイルドコンポーネントなどの詳細コンポーネントについては、最後に追加します.

    ギタブ


    我々がどこにいるかについて見るために、各々のポストの終わりに最終的なコミットにこのlinkに続くことができます!
    ハイプでCLIを構築する
    WindowsでJupyter研究所をPythonのためにインストールする方法?