反応シリーズをゼロから学ぶ - セクション 2: コンポーネントを使用してブログホームページを作成する

反応シリーズを0から学ぶ - 第1節反応ブログプロジェクトが作成され、ホームページから始めて、開発用のコンポーネントを徐々に追加します。

開始する前に、react 開発者ツールをインストールします

始める前に、ブラウザーに反応する開発者ツールをインストールしましょうインストール前に反応プロジェクトを開くと、コンソールにプロンプトが出力され、開発者ツールをインストールできるようになります。React コンポーネントとコンポーネントの小道具、状態、およびその他の情報をよりよく表示するため。

まず、公式サイトhttps://react.dev/learn/react-developer-toolsを開き、お使いのブラウザに合わせてインストールします. chrome ブラウザをクリックすると、拡張機能に直接インストールできます.ページ。インストール後、開発者ツールを閉じて F12 で再度開くと、最後のタブに 2 つの新しい React 開発者ツールが表示されます。

ここに画像の説明を挿入

1.ホームページ構造分析

トップロゴナビゲーションバー
バナーグラフィックの説明またはカルーセル
最新記事一覧
サイドバー
- 記事のリーダーボード
- 最新のレビュー記事
フッター

2. スタイル関連ツールの準備

CSS 変数 var() の仕組み

CSS3 変数の公式 Web サイトを確認してください: https://www.w3school.com.cn/css/css3_variables.asp

まず最初に、CSS 変数はグローバルスコープまたはローカルスコープを持つことができます。

グローバル変数はドキュメント全体でアクセス/使用できますが、ローカル変数はそれを宣言するセレクター内でのみ使用できます。

グローバルスコープの変数を作成するには、:root セレクターで宣言します。:root セレクターは、ドキュメントのルート要素に一致します。

ローカルスコープで変数を作成するには、それを使用するセレクターで宣言します。

:root {
    
    
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
    
     background-color: var(--blue); }

h2 {
    
     border-bottom: 2px solid var(--blue); }

.container {
    
    
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
    
    
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Sass プリプロセッサ、sass をインストールして使用する

React で sass を使用するには、まず node-sass をインストールする必要があります。ターミナルを開き、コマンドを入力します

$ npm i [email protected] -D

互換性の問題により、バージョン 4.14.1 がインストールされます。対応する node.js のバージョンを確認する必要があることに注意してください。

インストールが失敗してエラーが報告された場合は、最初にプロジェクト内の既存の node-sass をアンインストールしてから、インストールを試みることができます。

$ npm uninstall node-sass
$ npm i [email protected] -D

以前はnode.js18バージョンのターミナルを使用していましたが、エラーを報告した後、nvmを使用してnode.js14バージョンをインストールし、再試行しました。

Sass grammar チュートリアル: https://www.sass.hk/guide/、sass を使用すると、スタイルのネストが容易になり、変数やその他の操作を定義できます。

3. 次のセクションでは、コンポーネントの開発が正式に開始されます。

ツールのインストールとnode-sassのインストールに時間がかかりました。まずはここに行き、次のセクションでコンポーネントの開発を始めましょう!

このシリーズには、さらに多くの記事が引き続き記録されます
表紙絵