AlanCumberbatch/react_Alan

Intro

This project is about React + JS.
Lots of basic use case are included.

Basic

• create a new react project by vite

  npm create vite@latest

  Great VS Tools:

  1. ES7+React/Redux/React-Native[template script: "tsrafce" --- For TS]
  2. Prettier -Coder formatter

• use icons

  npm i react-icons
  npm i @heroicons/react

  usage:

    import { HiAcademicCap } from "react-icons/hi";
    function Demo() {
      return (
        <>
          <HiAcademicCap/>
        </>
      )
    }

• For custom "@"

    npm i -D @types/node // path module

  Then:
   use 'path' to config costume path for "@" in vite.config.ts
  

• install & config Tailwind

  Good VS Tools:
  1. TailWind Document, cmd+crl+t 2. Tailwind CSS IntelliSense: automatic show me available props

  • “Install Tailwind CSS with vite": Official Doc for install and config Tailwind 按照link 里面操作【具体步骤文档内并未书写】 ( 期间需要清空 index.css, 删除 App.css, 并调整 App.jsx 的内容 )

     npm i -D prettier prettier-plugin-tailwindcss // 可以让自己更自由的书写 tailwind，不必必须按照 tailwind 要求的顺序书写

  创建一个 prettier.config.cjs 并更改：

  <!-- export default {
    plugins: [require("prettier-plugin-tailwindcss")]
  }; -->
  module.exports = {
     plugins: [require("prettier-plugin-tailwindcss")]
   }

  在 tailwind.config.cjs 添加配置,具体可参考这个链接

• React + React Router
  • detail project link by my own

Course Learned

• React Official: for use react more properly

Next step

• use Tailwind

• use heroicons
• Using React(JS)+Tailwind to create some common UI component-- all in /src/UIComponent
• use React Router
• custom React HOOK
• use Redux

Tips：

关于 vite启动之后不能通过ip访问项目的问题

• reference link --- 局域网内可访问

  • 具体内容：

      // 要修改vite.config.js文件, 添加 host: 0.0.0.0
      server: {
        open: true,
        port: 3005,
        host: '0.0.0.0'
      },
      // 修改 package.json 启动命令
      "scripts": {
        "dev": "vite",
        "start": "vite --host 0.0.0.0", // 这一条
        "build": "vue-tsc --noEmit && vite build",
        "serve": "vite preview"
      },

• 在公网上可访问： npm install ngrok -g

  • 在终端中： “ ngrok http 3000 ” //注意： 端口号要和当前项目的一致
  • 同时，基于Vite的项目在启动时需要使用： “vite --host 0.0.0.0”, 来让 Vite 服务器监听所有可用的 IP 地址
  • 具体链接：Forwarding对应的link