crapthings · March 2, 2023 06:06 · Mar 2, 2023 · Mar 2, 2023 · Mar 2, 2023 · Mar 2, 2023
diff --git a/tut.md b/tut.md
@@ -22,7 +22,7 @@ class Something extends React.Component {
 
   render () {
     return (
-      <div></div>
+      <div>hi</div>
     )
   }
 }
@@ -353,3 +353,36 @@ console.log(router)
 * 动态路由，前端
 
 * 动态路由 api 端
+
+### 额外
+
+* tailwind css
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+
+```
+
+```js
+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: [],
+}
+```
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
diff --git a/tut.md b/tut.md
@@ -1,5 +1,33 @@
 * 暂不介绍后端渲染 ssr
 
+* 不介绍 react 早期 类写法
+
+```jsx
+class Something extends React.Component {
+  constructor () {
+
+  }
+
+  componentDidMount() () {
+
+  }
+
+  shouldComponentUpdate () {
+
+  }
+
+  componentDidUpdate () {
+
+  }
+
+  render () {
+    return (
+      <div></div>
+    )
+  }
+}
+```
+
 * 如何安装 next.js
 
 

diff --git a/tut.md b/tut.md
@@ -11,7 +11,7 @@ npm install next react react-dom
 
 * 如何设置启动脚本
 
-package.json
+> package.json
 
 ```json
 "scripts": {
@@ -33,7 +33,7 @@ src
 
 * 第一个 react 页面
 
-
+> src/pages/index.js
 ```jsx
 export default function Component () {
   return (
@@ -44,6 +44,7 @@ export default function Component () {
 
 * 其他页面
 
+> src/pages/about.js
 ```jsx
 export default function About () {
   return (
@@ -94,7 +95,7 @@ const onClick = () => Router.push('/')
 
 * 布局管理        导航这些页面
 
-src/pages/_app.js
+> src/pages/_app.js
 
 ```jsx
 import Link from 'next/link'
@@ -178,6 +179,30 @@ export default function Component () {
 ```
 
 * react dom 事件
+
+```jsx
+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
 
 

diff --git a/tut.md b/tut.md
@@ -154,6 +154,29 @@ export default function Component () {
 ```
 
 * react 原生状态管理
+
+```jsx
+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 事件
 * 生命周期 hook on mount
 

diff --git a/tut.md b/tut.md
@@ -1,16 +1,16 @@
 * 暂不介绍后端渲染 ssr
 
-
-
 * 如何安装 next.js
 
+
 ```bash
 mkdir next-tut
 cd next-tut
 npm install next react react-dom
 ```
 
 * 如何设置启动脚本
+
 package.json
 
 ```json
@@ -24,6 +24,7 @@ package.json
 
 * 介绍 next.js 目录结构特性
 
+
 ```
 src
   pages
@@ -32,6 +33,7 @@ src
 
 * 第一个 react 页面
 
+
 ```jsx
 export default function Component () {
   return (
@@ -52,8 +54,8 @@ export default function About () {
 
 * 引用组件
 
-```jsx
 
+```jsx
 const list = [
   { name: 1 },
   { name: 2 },
@@ -76,23 +78,81 @@ function ItemComp (item, itemIdx) {
 
 * 如何用 Link 组件跳转页面
 
+
 ```jsx
 import Link from 'next/link'
 <Link href='/'>where to go</Link>
 ```
+
 * 如何程序化跳转路由、页面
 
+
 ```jsx
 import Router from 'next/router'
 const onClick = () => Router.push('/')
 ```
+
 * 布局管理        导航这些页面
+
 src/pages/_app.js
 
 ```jsx
+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
+
+
+```jsx
+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 原生状态管理
 * react dom 事件
 * 生命周期 hook on mount
@@ -130,17 +190,90 @@ export default function Component () {
   )
 }
 ```
+
 * 在 on mount hook 里抓数据，设置状态
+
+```jsx
+import { useEffect } from 'react'
+
+export default function Component () {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    console.log(count)
+  }, [count])
+
+  return (
+    <div>hello</div>
+  )
+}
+```
+
 * 渲染数据到组件，对象、数组
-* 三方状态库 zustand
+
 * 为什么不透传 props
+
+* 三方状态库 zustand
+
+
+```js
+const store = create(() => ({
+  state1: null,
+  state2: null,
+  state3: null,
+}))
+
+const doSomething = () => {
+  store.setState({ state1: 'test' })
+}
+```
+
 * 如何用 next.js 做接口
 
+
+```js
+export default function handler (req, res) {
+  res.status(200).json({ name: 'hello 1' })
+}
+```
+
 * 生命周期 hook on unmount
-* 路由管理 hook           import { useRouter } from 'next/router'
+
+```jsx
+import { useEffect } from 'react'
+
+export default function Component () {
+  useEffect(() => {
+
+    return () => {
+      console.log('unmount')
+    }
+
+    return function () {
+      console.log('unmount')
+    }
+  }, [])
+
+  return (
+    <div>hello</div>
+  )
+}
+```
+
+* 路由管理 hook
+
+
+```jsx
+import { useRouter } from 'next/router'
+
+const router = useRouter()
+console.log(router)
+```
 
 * 全局错误处理 混合到布局
+
 * 非 react 三方库，需要 dom，引用 dom
 
 * 动态路由，前端
+
 * 动态路由 api 端
diff --git a/tut.md b/tut.md
@@ -0,0 +1,146 @@
+* 暂不介绍后端渲染 ssr
+
+
+
+* 如何安装 next.js
+
+```bash
+mkdir next-tut
+cd next-tut
+npm install next react react-dom
+```
+
+* 如何设置启动脚本
+package.json
+
+```json
+"scripts": {
+  "dev": "next dev",
+  "build": "next build",
+  "start": "next start",
+  "lint": "next lint"
+}
+```
+
+* 介绍 next.js 目录结构特性
+
+```
+src
+  pages
+    api
+```
+
+* 第一个 react 页面
+
+```jsx
+export default function Component () {
+  return (
+    <div>hello</div>
+  )
+}
+```
+
+* 其他页面
+
+```jsx
+export default function About () {
+  return (
+    <div>About Us</div>
+  )
+}
+```
+
+* 引用组件
+
+```jsx
+
+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 组件跳转页面
+
+```jsx
+import Link from 'next/link'
+<Link href='/'>where to go</Link>
+```
+* 如何程序化跳转路由、页面
+
+```jsx
+import Router from 'next/router'
+const onClick = () => Router.push('/')
+```
+* 布局管理        导航这些页面
+src/pages/_app.js
+
+```jsx
+
+```
+* 如何引用原 dom
+* react 原生状态管理
+* react dom 事件
+* 生命周期 hook on mount
+
+
+```jsx
+import { useEffect } from 'react'
+
+export default function Component () {
+  useEffect(() => {
+
+  }, [])
+
+  return (
+    <div>hello</div>
+  )
+}
+```
+
+* 生命周期 hook on update
+
+
+```jsx
+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 里抓数据，设置状态
+* 渲染数据到组件，对象、数组
+* 三方状态库 zustand
+* 为什么不透传 props
+* 如何用 next.js 做接口
+
+* 生命周期 hook on unmount
+* 路由管理 hook           import { useRouter } from 'next/router'
+
+* 全局错误处理 混合到布局
+* 非 react 三方库，需要 dom，引用 dom
+
+* 动态路由，前端
+* 动态路由 api 端