เริ่มต้นโปรเจคด้วย 反応するタイプ

ในบทความนี้จะอธิบายถึงขั้นตอนพื้นฐานการเริ่มต้นโปรเจคด้วย 反応するและ 風車
เกริ่นนำ
โดยปกติ 反応するเป็น ジャバスクリプトライブラリตัวหนึ่งที่ช่วยในการสร้าง UIหรือส่วนที่ติดต่อกับ 利用者ที่มีความซับซ้อน โดยการแบ่งย่อยเป็นส่วนเล็กๆ เป็นอิสระแยกจากกัน หรือที่เรียกกันว่า コンポーネントโดยอาศัยภาษา ジャバスクリプトเป็นหลัก แต่ในบทความนี้เราจะเปลี่ยนการเขียนจากภาษา ジャバスクリプトมาเป็นภาษา タイプスクリプト

ในที่นี้ผู้เขียนใช่ระบบปฏิบัติการ Mac os และตัวช่วยในการจัดการ Package Manager ของ Javascript ด้วย Yarn ส่วนโปรแกรมประเภื Text Editer ทางผู้เขียนใช้งานด้วย Visual Code

เริ่มต้นโปรเจค 反応+タイプスクリプト
เริ่มต้นโดยการเปิด teminalเพื่อเรียกใช้งาน コマンドラインหลังจากนั้นทำการพิมพ์คำสั่งเพื่อทำการสร้างโปรเจค

yarn create react-app my-first-app --template typescript

หลังจากเสร็จสิ้นการทำงาน จะแสดงคำสั่งพื้นฐานเพิ่อเริ่มต้นแสดงผลโปรเจค

cd my-first-app
yarn start

หากทำการพิมพ์คำสั่งข้างบนแล้วเกิดข้อความแสดง エラーตามรูปนั้น ให้ลองทำตามคำแนะนำขั้นต้น

หากทำตามแล้วใม่หายให้ทำการเปิดการใช้งานโปรแกรม テキストエディタตามที่ผู้อ่านถนัด พร้อมสร้างไฟล์นามสกุล .envอยู่ในไดเร็กทอรี่นอกสุดของโฟลเดอร์โปรเจคของผู้อ่าน หลังจากนั้นให้ทำการพิมพ์คำสั่งข้างล่างลงในไฟล์ .envนั้น เพื่อข้ามการตรวจสอบในส่วนนี้ไป

SKIP_PREFLIGHT_CHECK=true

หลังจากนั้นให้ทำการเกิด 端末โดยการเลือกเมนู 端末>新しい端末หากไดเร็กทอรี่ปัจจุบันไม่ใช่ที่อยู่เดีญวกับโปรเจคของผู้อ่าน ให้ทำการเลือกมาที่ไดเร็กทอรี่เดียวกันหลังจากนั้นพิมพ์คำสั่งตามนี้

yarn start

หากไม่มี エラーเกิดขึ้น จะแสดงผลหน้าเว็บที่เป็นค่าเริ่มต้นของ 反応するขึ้นมา

ติดตั้ง CSS
เริ่มต้นโดยการเปิด teminalหลังจากนั้นพิมพ์คำสั่งเพื่อติดตั้งลงไป

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add @craco/craco

หลังจากทำการติดตั้ง クラコเสร็จแล้วจะปรากฏไฟล์ クラコ.設定.jsขึ้นมาในไดเร็กทอรี่ให้ทำการใส่การตั้งค่าลงไปในไฟล์ ดังนี้

module.exports = {
    style: {
        postcss: {
            plugins: [
                 require('tailwindcss'),
                 require('autoprefixer')
            ],
        },
    },
}

หลังจากนั้นให้ทำการพิมพ์คำสั่งลงไปใน 端末เพื่อทำการสร้างไฟล์สำหรับ CSSの設定

ืnpx tailwind init

หลังจากนั้นจะปรากฏไฟล์ そよ風設定.jsขึ้นมาในไดเร็กทอรี่

ทำการเปิดไฟล์ インデックス.CSSขั้นมาพร้อมทำการ インポートパッケージของ 風車เข้ามา

ベース

コンポーネント

ユーティリティ

ทดสอบการทำงานของ CSSโดยไปที่ไฟล์ アプリ.TSXหลังจากนั้นทำการวางโค้ดลงไปในไฟล์แล้วทำการบันทึก

import React from 'react';
import './App.xss';

function App() {
  return (
    <div className='container m-auto'>
      <div className='flex justify-center items-center h-screen bg-green-50'>
        <label className='text-3xl font-bold'>FIRST MY APP</label>
      </div>
    </div>
  )
}

หากไม่มี エラーเกิดขึ้นจะปรากฏหน้าเว็บขึ้นดังนี้

信用

การติดตั้ง React + Typescript

การติดตั้ง Tailwind Css