เริ่มต้นโปรเจคด้วย React Typescript + Tailwind Css 
Published: 2021-09-02 06:54:14

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

**เกริ่นนำ**
<dl>
  <dd>โดยปกติ React เป็น Javascript Library ตัวหนึ่งที่ช่วยในการสร้าง UI หรือส่วนที่</dd>ติดต่อกับ Users ที่มีความซับซ้อน โดยการแบ่งย่อยเป็นส่วนเล็กๆ เป็นอิสระแยกจากกัน หรือที่เรียกกันว่า Component โดยอาศัยภาษา Javascript เป็นหลัก แต่ในบทความนี้เราจะเปลี่ยนการเขียนจากภาษา Javascript มาเป็นภาษา Typescript</dd>
</dl>


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


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

<dl>
  <dd>เริ่มต้นโดยการเปิด Teminal เพื่อเรียกใช้งาน Command Line หลังจากนั้นทำการ</dd>พิมพ์คำสั่งเพื่อทำการสร้างโปรเจค 
</dl>

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

![create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8470vzf0a1lz78emaowq.png)

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

```
cd my-first-app
yarn start
```

![start project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4xvmm6bmw8e3fsknxwb.png)

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

![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq737yf0n1kl8t2ovjnr.png)

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

```
SKIP_PREFLIGHT_CHECK=true
```

![.Env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz9ezbpzkvd6y217xr21.png)

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

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

![start react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmgd753gnnmrlqotdsl2.png)

**ติดตั้ง Tailwind Css**

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

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

![install tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjnq5nf9vggk7sod7pn2.png)

![craco install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc7023bbxqv5wvw9is3u.png)

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

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

![craco config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thqziuiky6as5p15hlua.png)

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

```
ืnpx tailwind init
```

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

![ะฟรสไรืก แนืดรเ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhgumvmxcyokaf3jwwh5.png)

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

![index.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b0qyx23sp4ite1aklwv.png)

ทดสอบการทำงานของ Tailwind Css โดยไปที่ไฟล์ app.tsx หลังจากนั้นทำการวางโค้ดลงไปในไฟล์แล้วทำการบันทึก

```javascript
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>
  )
}
```

![app.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8v22uunzy8nt6scyqpj.png)

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

![successful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3n26zbo8963cch3pq6p.png)

**Credit**
* [การติดตั้ง React + Typescript](https://create-react-app.dev/docs/adding-typescript/)
* [การติดตั้ง Tailwind Css](https://tailwindcss.com/docs/guides/create-react-app)