เริ่มต้นโปรเจคด้วย React Typescript + Tailwind Css

ในบทความนี้จะอธิบายถึงขั้นตอนพื้นฐานการเริ่มต้นโปรเจคด้วย React และ Tailwind

เกริ่นนำ

โดยปกติ React เป็น Javascript Library ตัวหนึ่งที่ช่วยในการสร้าง UI หรือส่วนที่

ติดต่อกับ Users ที่มีความซับซ้อน โดยการแบ่งย่อยเป็นส่วนเล็กๆ เป็นอิสระแยกจากกัน หรือที่เรียกกันว่า Component โดยอาศัยภาษา Javascript เป็นหลัก แต่ในบทความนี้เราจะเปลี่ยนการเขียนจากภาษา Javascript มาเป็นภาษา Typescript

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

เริ่มต้นโปรเจค React + Typescript

เริ่มต้นโดยการเปิด Teminal เพื่อเรียกใช้งาน Command Line หลังจากนั้นทำการ

พิมพ์คำสั่งเพื่อทำการสร้างโปรเจค

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

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

cd my-first-app
yarn start

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

ตามคำแนะนำขั้นต้น

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

SKIP_PREFLIGHT_CHECK=true

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

yarn start

หากไม่มี Error เกิดขึ้น จะแสดงผลหน้าเว็บที่เป็นค่าเริ่มต้นของ React ขึ้นมา

ติดตั้ง Tailwind Css

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

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

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

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

หลังจากนั้นให้ทำการพิมพ์คำสั่งลงไปใน Terminal เพื่อทำการสร้างไฟล์สำหรับ Config Tailwind Css

ืnpx tailwind init

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

ทำการเปิดไฟล์ index.css ขั้นมาพร้อมทำการ import Package ของ tailwind เข้ามา

• Base
• Component
• Utilities

ทดสอบการทำงานของ Tailwind Css โดยไปที่ไฟล์ app.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>
  )
}

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

Credit

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