第 1 天，学到了什么

我正在学习**C++**以成为一名游戏开发人员，但我想为什么不学习 Web 开发，所以我开始学习前端，并将从现在开始发布我的旅程。

以下是一份**单页前端开发备忘单**，可供快速参考：

HTML（超文本标记语言）

基本结构：

元素：基本标签：，， - ，，，，，，，，常见属性：id、class、src、href、alt、style CSS（层叠样式表）句法：选择器：element、.class、#id、element.class、element#id 伪类：:hover、:active、:focus 伪元素：::before、::after 布局技术：Flexbox：.container { display: flex; justify-content: center; align-items: center; flex-direction: row; /* 或 column */} 网格：.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } 定位：静态、相对、绝对、固定、粘性盒子模型：边距、填充、边框、内容媒体查询（用于响应）： JavaScript 变量：功能： DOM 操作：访问和修改元素：const el = document.getElementById('id'); el.style.color = "red"; el.innerHTML = 'New Content'; 事件处理：数组方法：map()、filter()、reduce()、forEach() React.js（基础）创建组件： JSX 语法：状态和道具： useEffect 钩子：版本控制 (Git) 基本命令： git init - 初始化存储库 git status - 检查当前状态 git add . - 暂存所有更改 git commit -m "Message" - 提交更改 git push - 推送到远程存储库 git pull - 获取更新常用工具 npm（Node 包管理器）命令：npm install- 安装包 npm start - 启动应用程序代码格式化程序：Prettier - 自动格式化代码 ESLint - 用于捕捉潜在错误的 Linting

Common Attributes: id, class, src, href, alt, style

CSS (Cascading Style Sheets)

Syntax:

selector {
    property: value;
  }

Selectors: element, .class, #id, element.class, element#id Pseudo-classes: :hover, :active, :focus Pseudo-elements: ::before, ::after

Layout Techniques: Flexbox: .container { display: flex; justify-content: center; align-items: center; flex-direction: row; /* or column */ } Grid: .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

Positioning: static, relative, absolute, fixed, sticky

Box Model: Margin, Padding, Border, Content

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

Media Queries (for Responsiveness):

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

JavaScript

Variables:

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

Functions:

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

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

DOM Manipulation: Access and modify elements: const el = document.getElementById('id'); el.style.color = "red"; el.innerHTML = 'New Content';

Event Handling:

button.addEventListener('click', () => {
    alert('Button Clicked');
  });

Array Methods: map(), filter(), reduce(), forEach()

const arr = [1, 2, 3];
  const doubled = arr.map(num => num * 2);

React.js (Basics)

Creating a Component:

import React from 'react';

  const MyComponent = () => {
    return Hello React!;
  };

  export default MyComponent;

JSX Syntax:

return (
    
      Hello
      World
    
  );

State and Props:

const [count, setCount] = useState(0);  // useState hook
           // Passing Props

useEffect Hook:

useEffect(() => {
    // Runs after component renders
  }, [dependencies]);  // Rerun based on dependencies

Version Control (Git)

Basic Commands: git init - Initialize repository git status - Check current status git add . - Stage all changes git commit -m "Message" - Commit changes git push - Push to remote repository git pull - Fetch updates

Common Tools

npm (Node Package Manager) Commands: npm install - Install a package npm start - Start the application

Code Formatter: Prettier - Auto-format code ESLint - Linting to catch potential errors

CLIS.CC