iT邦幫忙

0

React學習筆記-基礎使用

  • 分享至 

  • xImage
  •  

VScode簡寫

rfc =>直接export 元件
rfce =>export default 元件名稱


nextJS設定
jsconfig設定後可簡化路徑

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
      //底層路徑
      "@component/*": ["./component/*"]
      //其他路徑
    }
  }
}
//範例
import '@/public/css/index.scss';

nextJS基本插入

import Script from 'next/script';
<Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() => console.log(`腳本正確地載入,window.FB 已被定義`)}
/>
//安裝插件
import Link from 'next/link';
//切換路由
import Head from 'next/head';
<Head>
        <link rel="icon" href="/favicon.ico" />
</Head>
//Head Tag補充

開頭寫'use client'才能使用hook


layout.js布局
每層都可以有layout,loading、error都可在此額外設定,最外層一定要有html與body tag

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] })
export default function RootLayout({ children }) {
//解構children
  return (
    <html lang="en">
      <body className={inter.className}>
//引入google字體並使用
        <Header />
        <main>{children}</main>
      </body>
    </html>
  );
}

meta設定

export const metadata = {
  title: "標題",
  description: "敘述",
};

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言