その日、何を学びましたか-jsチュートリアル-php.cn

その日、何を学びましたか

Linda Hamilton

リリース： 2024-12-24 05:03:13

オリジナル

903 人が閲覧しました

Day , what did learn

私はゲーム開発者になるために C を学んでいますが、それを使って Web 開発を学べばいいと思い、フロントエンドを学び始めました。さあ。

簡単な参照用に、単一ページのフロントエンド開発チートシートを示します。

HTML (ハイパーテキストマークアップ言語)

基本構造:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
    </head>
    <body>
      <header></header>
      <main></main>
      <footer></footer>
    </body>
  </html>

ログイン後にコピー

要素:
- 基本タグ:
  、
  、
  -
  、
  、、、
共通属性:
- ID、クラス、ソース、href、alt、スタイル

CSS (カスケードスタイルシート)

構文:

  selector {
    property: value;
  }

ログイン後にコピー

セレクター:
- 要素、.class、#id、element.class、element#id
- 疑似クラス: :hover、:active、:focus
- 疑似要素: ::before、::after

レイアウトテクニック:

フレックスボックス:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

ログイン後にコピー

グリッド:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

ログイン後にコピー

配置:
- 静的、相対、絶対、固定、スティッキー
ボックスモデル:
- マージン、パディング、ボーダー、コンテンツ

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

ログイン後にコピー

メディアクエリ (応答性のため):

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

ログイン後にコピー

JavaScript

変数:

  let variable = "value"; // Mutable
  const constant = "value"; // Immutable

ログイン後にコピー

機能:

  function myFunction() {
    console.log("Hello");
  }

  const myArrowFunction = () => console.log("Hello");

ログイン後にコピー

DOM 操作:

要素にアクセスして変更します:

const el = document.getElementById('id');
el.style.color = "red";
el.innerHTML = 'New Content';

ログイン後にコピー

イベント処理:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
    </head>
    <body>
      <header></header>
      <main></main>
      <footer></footer>
    </body>
  </html>

ログイン後にコピー

配列メソッド:
- map()、filter()、reduce()、forEach()

  selector {
    property: value;
  }

ログイン後にコピー

React.js (基本)

コンポーネントの作成:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

ログイン後にコピー

JSX 構文:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

ログイン後にコピー

状態とプロパティ:

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

ログイン後にコピー

useEffect フック:

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

ログイン後にコピー

バージョン管理 (Git)

基本コマンド:
- git init - リポジトリを初期化します
- git status - 現在のステータスを確認します
- git add 。 - すべての変更をステージング
- git commit -m "メッセージ" - 変更をコミットします
- git Push - リモートリポジトリにプッシュします
- git pull - 更新を取得します

共通ツール

npm (ノードパッケージマネージャー) コマンド:
- npm install <パッケージ> - パッケージをインストールします
- npm start - アプリケーションを開始します
コードフォーマッタ:
- Prettier - コードの自動フォーマット
- ESLint - 潜在的なエラーを検出するためのリンティング