DEV Community 👩‍💻👨‍💻

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

Posted on

เริ่มต้นโปรเจคด้วย 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
Enter fullscreen mode Exit fullscreen mode

create project

หลังจากเสร็จสิ้นการทำงาน จะแสดงคำสั่งพื้นฐานเพิ่อเริ่มต้นแสดงผลโปรเจค
cd my-first-app
yarn start
Enter fullscreen mode Exit fullscreen mode

start project

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

Error

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

SKIP_PREFLIGHT_CHECK=true
Enter fullscreen mode Exit fullscreen mode

.Env

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

yarn start
Enter fullscreen mode Exit fullscreen mode

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

start react

ติดตั้ง Tailwind Css

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

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

install tailwind

craco install

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

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

craco config

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

ืnpx tailwind init
Enter fullscreen mode Exit fullscreen mode

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

ะฟรสไรืก แนืดรเ

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

  • Base
  • Component
  • Utilities

index.css

ทดสอบการทำงานของ 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>
  )
}
Enter fullscreen mode Exit fullscreen mode

app.tsx

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

successful

Credit

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.