reactでSNS 01-2 Hello Nextを作成js

9109 ワード
React テキストリンク
3.ページとレイアウトpages構想サイトのページファイルをフォルダに追加

pagesフォルダに新しいフォルダを作成し、ファイルを追加することもできます.
住所はcomponents再使用や不要なレンダリングを防ぐために構成部品を分割
→フォルダ名がコンポーネントである必要はありません
汎用Layoutの作成
components/AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>공통메뉴</div>
      {children}
    </div>
  );
};
AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};
export default AppLayout;
{children}計画には、使用するページまたはその他のコンポーネントが含まれています.PropTypesReactでタイプをチェックするためのライブラリ
取付npm i prop-types PropTypes.node.isRequired .node:number、string、element、array/fragmentなど、レンダリング可能なすべてのコンテンツ.isRequired:必要な支柱とみなされ、値がないか無効な場合は、コンソールウィンドウでエラーを確認できます.
pages/index.js

import React from "react";
import AppLayout from "../components/AppLayout";

const Home = () => {
  return (
    <AppLayout>
      <div>Hello, Next!</div>
    </AppLayout>
  );
};

export default Home;
4.Linkおよびeslintnext/linkNextは自分のルーターを持っています
読み込みリンクラベル:import Link from 'next/link';
components/AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>
        <Link href="/"><a>블로그</a></Link>
        <Link href="/profile"><a>내 프로필</a></Link>
        <Link href="/signup"><a>회원가입 페이지</a></Link>
      </div>
      {children}
    </div>
  );
};

...
eslintコードを分析して構文エラーやパターンを検索し、一貫したコードスタイルで作成するのに役立ちます.
設定
npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D
-D:開発のみ.eslintrcファイルの作成
{
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "import",
    "react-hooks"
  ],
  "rules": {
  }
}
IF-2つの配列を結合する
パイレーツ・パイソン/フラスコ・バン