จะติดตั้ง React บน Windows ได้อย่างไร? คู่มือฉบับสมบูรณ์

ReactJS เป็นไลบรารี JavaScript แบบโอเพ่นซอร์สฟรีที่เปลี่ยนแปลงเทคนิคการพัฒนาส่วนหน้าแบบเก่าอย่างเห็นได้ชัด เปิดตัวสู่สาธารณะในปี 2556 React เป็นโครงการภายในของ Facebook ตั้งแต่นั้นมา React ก็ถูกนำมาใช้โดยองค์กรและสตาร์ทอัพต่างๆ นักพัฒนาส่วนหน้าที่มีความรู้เพียงพอเกี่ยวกับ JavaScript, HTML และ CSS สามารถสร้างส่วนต่อประสานผู้ใช้แบบโต้ตอบสำหรับทั้งเว็บและแอปพลิเคชันมือถือ ข้อได้เปรียบที่ใหญ่ที่สุดอย่างหนึ่งของ ReactJS คือวิธีการที่อิงตามองค์ประกอบ การสร้างส่วนประกอบแบบห่อหุ้มที่ใช้ซ้ำได้ซึ่งมีสถานะเป็นอิสระจากกันทำให้ส่วนต่อประสานกับผู้ใช้ที่ซับซ้อนง่ายขึ้น

สิ่งที่น่าสนใจคืออะไรก็ตามที่เราเขียนใน ReactJS อาจดูเหมือน HTML แต่มันไม่ใช่ เป็นที่รู้จักกันในนามไฟล์ JSX, JavaScript XML JSX นี้สร้าง "องค์ประกอบ" ของ React ซึ่งแสดงผลในรูปแบบวัตถุเอกสาร ในแง่ของคนธรรมดา JSX อนุญาตให้เราเขียนตรรกะ JavaScript ภายในเนื้อหา HTML จึงทำให้ React เรียบง่ายและเข้าใจง่ายมากขึ้น

เพื่อการใช้งานที่เหมาะสมที่สุด เรามาเรียนรู้ วิธีติดตั้ง React JS ใน Windows กัน

จะติดตั้ง React JS บน Windows ได้อย่างไร?

ข้อกำหนดของระบบสำหรับ Windows

แม้ว่าการใช้ ReactJs นั้นค่อนข้างไม่เจ็บปวด แต่ขั้นตอน การติดตั้ง React JS ใน Windows นั้นค่อนข้างน่าเบื่อ เนื่องจาก ReactJS เป็นโครงการโอเพ่นซอร์ส จึงไม่ง่ายเหมือนการดาวน์โหลดซอฟต์แวร์จากอินเทอร์เน็ต ก่อนอื่น มีข้อกำหนดเบื้องต้นบางประการในการใช้ ReactJS บน Windows ของคุณ

1. เวอร์ชัน Windows: Windows XP, Windows 7 (32/64 บิต) หรือสูงกว่า
2. ต้องการ RAM ขั้นต่ำ 4 GB
3. พื้นที่ดิสก์ขั้นต่ำ 10 GB บนฮาร์ดไดรฟ์ของคุณ
4. อินเทอร์เน็ตเบราว์เซอร์ เช่น Chrome, Microsoft Edge, Firefox เป็นต้น
5. ตัวแก้ไขหนึ่งตัวสำหรับดีบักและทดสอบโค้ดที่เขียนด้วย ReactJS

เรียนรู้หลักสูตรการพัฒนาซอฟต์แวร์ออนไลน์จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม PG สำหรับผู้บริหาร โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโทเพื่อติดตามความก้าวหน้าในอาชีพของคุณอย่างรวดเร็ว

การดาวน์โหลดและติดตั้ง Node.js

Node.js เป็นเซิร์ฟเวอร์ที่ช่วยให้คุณรันโค้ด ReactJS บนระบบของคุณ เช่นเดียวกับ ReactJS มันเป็นโอเพ่นซอร์สเช่นกัน โปรแกรมติดตั้ง Node.js ประกอบด้วย NPM (Node Package Manager) ซึ่งมีโมดูลโหนดต่างๆ ที่นักพัฒนาใช้เพื่อโฮสต์และเผยแพร่โมดูลของตนเองในชุมชนโอเพ่นซอร์ส ดังนั้นโหนดจึงทำงานเคียงข้างกันกับรีจีสทรี NPM ซึ่งทำให้ง่ายต่อการติดตั้งแพ็คเกจใดๆ โดยใช้ NPM CLI โหนดจะรวมแอปพลิเคชัน ReactJS ให้เป็นหนึ่งเดียวโดยใช้เว็บแพ็คเพื่อการติดตั้งที่ง่ายดาย

ขั้นตอนการดาวน์โหลดและติดตั้ง Node.js มีดังนี้

1. หากต้องการติด ตั้ง Node.js ให้ไปที่ https://nodejs.org/en/
2. คุณต้องเลือกโปรแกรมติดตั้งที่เหมาะสม ทั้งนี้ขึ้นอยู่กับเวอร์ชันของระบบปฏิบัติการ Windows ของคุณ
3. หน้าแรกของ Node.js แนะนำเวอร์ชัน LTS โดยขึ้นอยู่กับระบบปฏิบัติการของคุณ การคลิกที่มันจะเริ่มการดาวน์โหลดโดยอัตโนมัติ
4. คุณจะพบโปรแกรมติดตั้งในโฟลเดอร์ดาวน์โหลด เรียกใช้โปรแกรมติดตั้ง
5. วิซาร์ดการตั้งค่าจะปรากฏขึ้นบนหน้าจอ ซึ่งจะถามถึงข้อตกลงสิทธิ์การใช้งานสำหรับผู้ใช้ปลายทาง ยอมรับข้อกำหนดและเงื่อนไขเพื่อดำเนินการติดตั้ง
6. จากนั้นผู้ใช้ต้องเลือกโฟลเดอร์ปลายทางด้วยเส้นทางเริ่มต้นของตัวติดตั้ง คลิกที่ถัดไปเพื่อดำเนินการต่อ
7. จากนั้นโปรแกรมติดตั้งจะแสดงคุณสมบัติที่จะติดตั้งและตั้งค่าตัวแปรพาธสภาพแวดล้อมเป็นพรอมต์คำสั่ง คลิกถัดไปเพื่อเริ่มการติดตั้ง
8. หลังจากการติดตั้งเสร็จสิ้น ให้ตรวจสอบ Node.js ในระบบของคุณโดยใช้พรอมต์คำสั่ง
9. พิมพ์ “node -v” ใน command prompt เพื่อตรวจสอบเวอร์ชันของ Node.js ที่ติดตั้ง
10. พิมพ์ “npm -v” ใน command prompt เพื่อตรวจสอบการติดตั้ง npm ด้วย

กำลังติดตั้งการตอบสนอง

หลังจากติดตั้ง Node.js แล้ว เราสามารถ ติดตั้ง React JS บน Windows ได้ โดยใช้สองเทคนิค:

• ใช้เว็บแพ็คและ Babel

1. การสร้างโฟลเดอร์รูท

ก่อนติดตั้ง ReactJS ให้สร้างโฟลเดอร์รูทด้วยชื่อ “reactFile” โดยใช้คำสั่งต่อไปนี้ใน command prompt

C:\Users\ชื่อผู้ใช้\Desktop>mkdir reactFile

C:\Users\ชื่อผู้ใช้\Desktop>cd reactFile

หลังจากสร้างไดเร็กทอรีแล้ว ให้สร้างไฟล์ package.json โดยใช้คำสั่งต่อไปนี้ในพร้อมท์คำสั่ง ไฟล์ package.json ช่วยในการสร้างโมดูล

C:\Users\ชื่อผู้ใช้\Desktop>reactFile> npm init

จากนั้นพรอมต์คำสั่งจะถามข้อมูลเกี่ยวกับโมดูล ข้ามไปโดยเลือกตัวเลือก “-y”

2. ติดตั้ง React และ react-dom

ติดตั้งแพ็คเกจ React และ react-dom โดยใช้คำสั่ง npm ต่อไปนี้ และเพิ่มแพ็คเกจลงในไฟล์ package.json โดยใช้คำสั่ง “-save”

C:\Users\ชื่อผู้ใช้\Desktop>reactFile> npm ติดตั้ง react –save

C:\Users\ชื่อผู้ใช้\Desktop>reactFile> npm ติดตั้ง react-dom –save

สำรวจหลักสูตรการพัฒนาซอฟต์แวร์ฟรีของเรา

3. ติดตั้ง Webpack

ติดตั้ง webpack, webpack-dev-server และ webpack-cli โดยใช้คำสั่งต่อไปนี้

C:\Users\ชื่อผู้ใช้\Desktop>reactFile> npm ติดตั้ง webpack webpack-dev-server webpack-cli –save

4. ติดตั้งบาเบล

Babel เป็น transpiler ที่แปลงโค้ด JavaScript เป็นสิ่งที่เบราว์เซอร์เข้าใจ ดังนั้นการติดตั้ง Babel และปลั๊กอินต่อไปนี้ ได้แก่ babel-loader, babel-preset-env, babel-preset-react และ html-webpack-plugin จึงมีความสำคัญมาก

ใช้คำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอิน Babel ทั้งหมดในคราวเดียว

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>npm ติดตั้ง babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. สร้างไฟล์ ReactJS

เพื่อให้กระบวนการติดตั้งเสร็จสิ้น เราต้องสร้างไฟล์บางไฟล์ด้วยตนเองโดยใช้พรอมต์คำสั่ง

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>พิมพ์ nul > index.html

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>พิมพ์ nul > App.js

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>พิมพ์ nul > main.js

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>พิมพ์ nul > webpack.config.js

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>พิมพ์ nul > .babelrc

6. ตั้งค่าคอมไพเลอร์ เซิร์ฟเวอร์ และตัวโหลด

เมื่อสร้างไฟล์ ReactJS เหล่านี้ภายในโฟลเดอร์ “reactFile” แล้ว คุณสามารถเตรียมเซิร์ฟเวอร์การปรับใช้โดยตั้งค่าไว้ที่พอร์ต 8001 หรือพอร์ตใดก็ได้ที่คุณต้องการใน webpack.-config.js

ใช้รหัสต่อไปนี้ในไฟล์ webpack-config.js

เส้นทาง const = ต้องการ ('เส้นทาง');

const HtmlWebpackPlugin = ต้องการ ('html-webpack-plugin');

โมดูลส่งออก = {

รายการ: './main.js',

เอาต์พุต: {

เส้นทาง: path.join(__dirname, '/bundle'),

ชื่อไฟล์: 'index_bundle.js'

},

เซิร์ฟเวอร์ผู้พัฒนา: {

อินไลน์: จริง,

พอร์ต: 8001

},

โมดูล: {

กฎ: [

{

ทดสอบ: /\.jsx?$/,

ยกเว้น: /node_modules/,

ตัวโหลด: 'babel-loader',

ข้อความค้นหา: {

ค่าที่ตั้งล่วงหน้า: ['es2015', 'react']

}

}

]

},

ปลั๊กอิน:[

ใหม่ HtmlWebpackPlugin({

แม่แบบ: './index.html'

})

]

}

7. การตั้งค่า index.html

ภายใน index.html เขียนโค้ด HTML ปกติโดยมี div id=” app” เป็นองค์ประกอบรูท จากนั้นเพิ่มสคริปต์ index_bundle.js ในเนื้อหา HTML

ทักษะการพัฒนาซอฟต์แวร์ตามความต้องการ

8. การตั้งค่า App.js และ main.js

เขียนส่วนประกอบ React ภายใน App.js เพื่อเรนเดอร์คลาสหรือฟังก์ชัน ใส่ข้อความที่คุณต้องการแสดงผลภายในคอมโพเนนต์ ซึ่งจะปรากฏในเบราว์เซอร์เมื่อคอมไพล์แล้ว จากนั้นนำเข้าส่วนประกอบไปยังองค์ประกอบแอปรูทของเราภายใน main.js เพื่อให้ผลลัพธ์ปรากฏบนเบราว์เซอร์

สร้างไฟล์ “.babelrc” และใส่โค้ดบรรทัดต่อไปนี้

{

“ค่าที่ตั้งไว้ล่วงหน้า”:[“env”, “ตอบสนอง”]

}

9. การแสดงเนื้อหาบนเว็บเพจ

ในที่สุดการตั้งค่าก็เสร็จสมบูรณ์ และเซิร์ฟเวอร์จะเปิดใช้งานเมื่อคุณพิมพ์คำสั่งต่อไปนี้ในพร้อมท์คำสั่ง

C:\Users\ชื่อผู้ใช้\Desktop\reactFile>npm start

ทันทีที่คุณกด Enter เบราว์เซอร์จะแสดงข้อความที่คุณแสดงผลภายในคอมโพเนนต์

• ใช้คำสั่ง create-react-app

1. ติดตั้งแอพ create-react-app

เปิดพรอมต์คำสั่งและเขียนโค้ดต่อไปนี้เพื่อติดตั้งแอป create-react-app

C:\Users\ชื่อผู้ใช้\Desktop>npx create-react-app my-app

คำสั่งนี้จะติดตั้งไฟล์และโฟลเดอร์ที่จำเป็นทั้งหมดภายในโฟลเดอร์ “my-app” บนเดสก์ท็อปของคุณ โค้ดบรรทัดเดียวนี้ทำให้การติดตั้ง React ในระบบของคุณเสร็จสิ้นภายในไม่กี่นาที

2. เรียกใช้เซิร์ฟเวอร์

ไปที่พรอมต์คำสั่งแล้วพิมพ์

C:\Users\ชื่อผู้ใช้\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

โครงการ React ของคุณเริ่มต้นและทำงานบนเบราว์เซอร์ของคุณด้วยความช่วยเหลือจาก localhost ซึ่งโฮสต์โครงการของคุณบนพอร์ตที่มีให้

สำรวจหลักสูตรวิศวกรรมซอฟต์แวร์ยอดนิยมของเรา

บทสรุป

ReactJS ได้เปลี่ยนเกมการพัฒนาส่วนหน้าตั้งแต่เปิดตัวและได้เติบโตขึ้นเป็นหนึ่งในไลบรารี่ JavaScript แบบโอเพ่นซอร์สที่ได้รับความนิยมมากที่สุด หลายบริษัท เช่น Meta, Netflix และ Slack ใช้ ReactJS ข้อได้เปรียบที่ใหญ่ที่สุดประการหนึ่งคือการนำส่วนประกอบกลับมาใช้ใหม่เพื่อแสดงการเปลี่ยนแปลงในหน้าเว็บ มีการปรับใช้แอป React หลายแอปกับ Azure Web App โดยใช้ Azure DevOps นี่เป็นหนึ่งในทักษะที่เป็นที่ต้องการมากที่สุดในอุตสาหกรรมไอทีในขณะนี้

หากคุณเป็นนักพัฒนา React คุณสามารถเพิ่มพูนชุดทักษะของคุณโดยรู้จัก Azure DevOps ผ่าน โปรแกรมใบรับรอง ขั้น สูงของ upGrad ใน DevOps จาก IIIT Bangalore หลักสูตรนี้มีโมดูลการเรียนรู้มากกว่า 250 ชั่วโมงพร้อมกับคู่มือการเตรียมตัวสัมภาษณ์ นอกจากนี้คุณยังจะได้เข้าร่วมการให้คำปรึกษาด้านอาชีพกับผู้เชี่ยวชาญ DevOps ที่สามารถให้แผนงานที่ชัดเจนว่าอุตสาหกรรมคาดหวังอะไร คุณได้รับใบรับรองและสถานะศิษย์เก่า IIITB เมื่อจบหลักสูตร ทำให้เป็นคุณสมบัติพิเศษเพิ่มเติมในเรซูเม่ของคุณ!