tut.md

• 暂不介绍后端渲染 ssr

• 不介绍 react 早期 类写法

class Something extends React.Component {
  constructor () {

  }

  componentDidMount() () {

  }

  shouldComponentUpdate () {

  }

  componentDidUpdate () {

  }

  render () {
    return (
      <div>hi</div>
    )
  }
}

• 如何安装 next.js

mkdir next-tut
cd next-tut
npm install next react react-dom

• 如何设置启动脚本

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

• 介绍 next.js 目录结构特性

src
  pages
    api

• 第一个 react 页面

src/pages/index.js

export default function Component () {
  return (
    <div>hello</div>
  )
}

• 其他页面

src/pages/about.js

export default function About () {
  return (
    <div>About Us</div>
  )
}

• 引用组件

const list = [
  { name: 1 },
  { name: 2 },
]

<ListComp items={list} />

function ListComp ({ items, ...props }) {
  return (
    <div>items?.map(ItemComp)</div>
  )
}

function ItemComp (item, itemIdx) {
  return (
    <div key={item.id || itemIdx}>{item.name}</div>
  )
}

• 如何用 Link 组件跳转页面

import Link from 'next/link'
<Link href='/'>where to go</Link>

• 如何程序化跳转路由、页面

import Router from 'next/router'
const onClick = () => Router.push('/')

• 布局管理 导航这些页面

src/pages/_app.js

import Link from 'next/link'

export default function App ({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => (
    <Layout>
      {page}
    </Layout>
  ))

  return getLayout(<Component {...pageProps} />)
}

export default function Layout ({ children }) {
  return (
    <div>
      <Nav />
      {children}
    </div>
  )
}

export default function Nav () {
  return (
    <div>
      <Link href='/'>home</Link>
      <Link href='/about'>about</Link>
    </div>
  )
}

• 如何引用原 dom

import { useRef, useEffect } from 'react'

export default function Component () {
  const ref = useRef()

  const handleOnClick = () => {
    console.log(ref)
  }

  useEffect(() => {
    console.log(ref)
  }, [])

  return (
    <div ref={ref} onClick={}>hello</div>
  )
}

• react 原生状态管理

import { useEffect } from 'react'

export default function Component () {
  const [count, setCount] = useState(0)

  const onClick = () => {
    setCount(count + 1)
  }

  useEffect(() => {
    console.log(count)
  }, [count])

  return (
    <div>
      <button onClick={onClick}>click here {count}</button>
    </div>
  )
}

• react dom 事件

import { useEffect } from 'react'

export default function Component () {
  const [count, setCount] = useState(0)

  const onClick = () => {
    setCount(count + 1)
  }

  useEffect(() => {
    console.log(count)
  }, [count])

  return (
    <div>
      <button onClick={onClick}>click here {count}</button>
      <input type='text' onChange={(evt) => console.log(evt)} />
    </div>
  )
}

• 生命周期 hook on mount

import { useEffect } from 'react'

export default function Component () {
  useEffect(() => {

  }, [])

  return (
    <div>hello</div>
  )
}

• 生命周期 hook on update

import { useEffect } from 'react'

export default function Component () {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(count)
  }, [count])

  return (
    <div>hello</div>
  )
}

• 在 on mount hook 里抓数据，设置状态

import { useEffect } from 'react'

export default function Component () {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(count)
  }, [count])

  return (
    <div>hello</div>
  )
}

• 渲染数据到组件，对象、数组

• 为什么不透传 props

• 三方状态库 zustand

const store = create(() => ({
  state1: null,
  state2: null,
  state3: null,
}))

const doSomething = () => {
  store.setState({ state1: 'test' })
}

• 如何用 next.js 做接口

export default function handler (req, res) {
  res.status(200).json({ name: 'hello 1' })
}

• 生命周期 hook on unmount

import { useEffect } from 'react'

export default function Component () {
  useEffect(() => {

    return () => {
      console.log('unmount')
    }

    return function () {
      console.log('unmount')
    }
  }, [])

  return (
    <div>hello</div>
  )
}

• 路由管理 hook

import { useRouter } from 'next/router'

const router = useRouter()
console.log(router)

• 全局错误处理 混合到布局

• 非 react 三方库，需要 dom，引用 dom

• 动态路由，前端

• 动态路由 api 端

额外

• tailwind css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;