create react app
v5.0.1
สร้างแอป React โดยไม่ต้องกำหนดค่าบิวด์
สร้างแอป React ทำงานบน macOS, Windows และ Linux
หากสิ่งใดใช้งานไม่ได้ โปรดแจ้งปัญหา
หากคุณมีคำถามหรือต้องการความช่วยเหลือ โปรดถามในการสนทนา GitHub
npx create-react-app my-app
cd my-app
npm start หากคุณเคยติดตั้ง create-react-app ทั่วโลกผ่าน npm install -g create-react-app เราขอแนะนำให้คุณถอนการติดตั้งแพ็คเกจโดยใช้ npm uninstall -g create-react-app หรือ yarn global remove create-react-app เพื่อให้มั่นใจ npx นั้นจะใช้เวอร์ชันล่าสุดเสมอ
(npx มาพร้อมกับ npm 5.2+ และสูงกว่า ดูคำแนะนำสำหรับเวอร์ชัน npm ที่เก่ากว่า)
จากนั้นเปิด http://localhost:3000/ เพื่อดูแอปของคุณ
เมื่อคุณพร้อมที่จะปรับใช้กับการใช้งานจริง ให้สร้างบันเดิลแบบย่อด้วย npm run build
คุณ ไม่ จำเป็นต้องติดตั้งหรือกำหนดค่าเครื่องมือเช่น webpack หรือ Babel
มีการกำหนดค่าล่วงหน้าและซ่อนไว้เพื่อให้คุณสามารถมุ่งเน้นไปที่โค้ดได้
สร้างโครงการ เท่านี้คุณก็พร้อมแล้ว
คุณจะต้องมี Node 14.0.0 หรือเวอร์ชันที่ใหม่กว่าบนเครื่องพัฒนาในเครื่องของคุณ (แต่ไม่จำเป็นบนเซิร์ฟเวอร์) เราขอแนะนำให้ใช้ LTS เวอร์ชันล่าสุด คุณสามารถใช้ nvm (macOS/Linux) หรือ nvm-windows เพื่อสลับเวอร์ชันของโหนดระหว่างโปรเจ็กต์ต่างๆ
หากต้องการสร้างแอปใหม่ คุณสามารถเลือกวิธีใดวิธีหนึ่งต่อไปนี้:
npx create-react-app my-app(npx เป็นเครื่องมือรันแพ็คเกจที่มาพร้อมกับ npm 5.2+ และสูงกว่า ดูคำแนะนำสำหรับเวอร์ชัน npm ที่เก่ากว่า)
npm init react-app my-app npm init <initializer> มีให้ใช้งานใน npm 6+
yarn create react-app my-app yarn create <starter-kit-package> มีอยู่ใน Yarn 0.25+
มันจะสร้างไดเร็กทอรีชื่อ my-app ภายในโฟลเดอร์ปัจจุบัน
ภายในไดเร็กทอรีนั้นจะสร้างโครงสร้างโปรเจ็กต์เริ่มต้นและติดตั้งการพึ่งพาสกรรมกริยา:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
ไม่มีการกำหนดค่าหรือโครงสร้างโฟลเดอร์ที่ซับซ้อน มีเพียงไฟล์ที่คุณต้องการสร้างแอปของคุณเท่านั้น
เมื่อการติดตั้งเสร็จสิ้น คุณสามารถเปิดโฟลเดอร์โปรเจ็กต์ของคุณได้:
cd my-appภายในโปรเจ็กต์ที่สร้างขึ้นใหม่ คุณสามารถรันคำสั่งในตัวได้:
npm start หรือ yarn start รันแอปในโหมดการพัฒนา
เปิด http://localhost:3000 เพื่อดูในเบราว์เซอร์
หน้าเว็บจะโหลดซ้ำโดยอัตโนมัติหากคุณทำการเปลี่ยนแปลงโค้ด
คุณจะเห็นข้อผิดพลาดในการสร้างและคำเตือนผ้าสำลีในคอนโซล
npm test หรือ yarn test รันตัวเฝ้าดูการทดสอบในโหมดโต้ตอบ
ตามค่าเริ่มต้น ให้รันการทดสอบที่เกี่ยวข้องกับไฟล์ที่เปลี่ยนแปลงตั้งแต่การคอมมิตครั้งล่าสุด
อ่านเพิ่มเติมเกี่ยวกับการทดสอบ
npm run build หรือ yarn build สร้างแอปสำหรับการผลิตไปยัง build ด์
มันรวม React ในโหมดการผลิตอย่างถูกต้องและปรับโครงสร้างให้เหมาะสมเพื่อประสิทธิภาพที่ดีที่สุด
โครงสร้างถูกย่อให้เล็กลงและชื่อไฟล์มีแฮชด้วย
แอปของคุณพร้อมที่จะปรับใช้แล้ว
คุณสามารถดูคำแนะนำโดยละเอียดเกี่ยวกับการใช้แอป Create React และเคล็ดลับมากมายได้ในเอกสารประกอบ
โปรดดูคู่มือผู้ใช้สำหรับข้อมูลนี้และข้อมูลอื่น ๆ
การขึ้นต่อกันหนึ่งรายการ: มีการขึ้นต่อกันของบิลด์เดียวเท่านั้น มันใช้ webpack, Babel, ESLint และโปรเจ็กต์ที่น่าทึ่งอื่น ๆ แต่มอบประสบการณ์ที่รวบรวมไว้เป็นอย่างดี
ไม่จำเป็นต้องมีการกำหนดค่า: คุณไม่จำเป็นต้องกำหนดค่าอะไรเลย การกำหนดค่าที่ดีพอสมควรของทั้งรุ่นพัฒนาและรุ่นใช้งานจริงได้รับการจัดการสำหรับคุณ เพื่อให้คุณสามารถมุ่งเน้นไปที่การเขียนโค้ดได้
ไม่มีการล็อคอิน: คุณสามารถ "ดีดออก" ไปยังการตั้งค่าแบบกำหนดเองได้ตลอดเวลา เรียกใช้คำสั่งเดียว และการกำหนดค่าและการอ้างอิงบิวด์ทั้งหมดจะถูกย้ายไปยังโปรเจ็กต์ของคุณโดยตรง ดังนั้นคุณจึงสามารถดำเนินการต่อจากจุดที่คุณค้างไว้ได้
สภาพแวดล้อมของคุณจะมีทุกสิ่งที่คุณต้องการเพื่อสร้างแอป React หน้าเดียวที่ทันสมัย:
-webkit- หรือคำนำหน้าอื่นๆ[email protected] และสูงกว่า )อ่านคู่มือนี้เพื่อดูภาพรวมว่าเครื่องมือเหล่านี้เข้ากันได้อย่างไร
ข้อดีก็คือ เครื่องมือเหล่านี้ได้รับการกำหนดค่าล่วงหน้าให้ทำงานในลักษณะเฉพาะ หากโปรเจ็กต์ของคุณต้องการการปรับแต่งเพิ่มเติม คุณสามารถ "ดีดออก" และปรับแต่งได้ แต่คุณจะต้องคงการกำหนดค่านี้ไว้
สร้างแอป React เหมาะอย่างยิ่งสำหรับ:
ต่อไปนี้เป็นกรณีทั่วไปบางประการที่คุณอาจต้องการลองอย่างอื่น:
หากคุณต้องการ ลองใช้ React โดยไม่ต้องพึ่งพาเครื่องมือสร้างสกรรมกริยาหลายร้อยรายการ ให้พิจารณาใช้ไฟล์ HTML ไฟล์เดียวหรือแซนด์บ็อกซ์ออนไลน์แทน
หากคุณต้องการ รวมโค้ด React เข้ากับเฟรมเวิร์กเทมเพลตฝั่งเซิร์ฟเวอร์ เช่น Rails, Django หรือ Symfony หรือหากคุณ ไม่ได้สร้างแอปหน้าเดียว ให้พิจารณาใช้ nwb หรือ Neutrino ซึ่งมีความยืดหยุ่นมากกว่า สำหรับ Rails โดยเฉพาะ คุณสามารถใช้ Rails Webpacker ได้ สำหรับ Symfony ลองใช้ webpack Encore ของ Symfony
หากคุณต้องการ เผยแพร่ส่วนประกอบ React nwb ก็สามารถทำได้เช่นกัน เช่นเดียวกับการตั้งค่าล่วงหน้าส่วนประกอบปฏิกิริยาของ Neutrino
หากคุณต้องการทำการ เรนเดอร์เซิร์ฟเวอร์ ด้วย React และ Node.js ลองดู Next.js หรือ Razzle Create React App นั้นไม่เชื่อเรื่องแบ็กเอนด์ และสร้างเฉพาะชุด HTML/JS/CSS แบบคงที่เท่านั้น
หากเว็บไซต์ของคุณเป็น แบบคงที่เป็นส่วนใหญ่ (เช่น พอร์ตโฟลิโอหรือบล็อก) ให้พิจารณาใช้ Gatsby หรือ Next.js ต่างจาก Create React App ตรงที่ Gatsby เรนเดอร์เว็บไซต์ล่วงหน้าเป็น HTML ณ เวลาที่สร้าง Next.js รองรับทั้งการเรนเดอร์เซิร์ฟเวอร์และการเรนเดอร์ล่วงหน้า
สุดท้าย หากคุณต้องการ การปรับแต่งเพิ่มเติม ลองดู Neutrino และค่าที่ตั้งไว้ล่วงหน้าของ React
เครื่องมือทั้งหมดที่กล่าวมาข้างต้นสามารถทำงานได้โดยไม่ต้องมีการกำหนดค่าใดๆ เลย
หากคุณต้องการกำหนดค่าบิลด์ด้วยตนเอง ให้ทำตามคำแนะนำนี้
กำลังมองหาสิ่งที่คล้ายกัน แต่สำหรับ React Native ใช่ไหม
ตรวจสอบงานเอ็กซ์โป CLI
เราอยากจะขอความช่วยเหลือจากคุณ create-react-app ! ดู CONTRIBUTING.md สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เรากำลังมองหาและวิธีเริ่มต้นใช้งาน
Create React App เป็นโครงการที่ดูแลโดยชุมชนและผู้มีส่วนร่วมทั้งหมดเป็นอาสาสมัคร หากคุณต้องการสนับสนุนการพัฒนาแอป Create React ในอนาคต โปรดพิจารณาบริจาคให้กับ Open Collective ของเรา
โครงการนี้เกิดขึ้นได้ต้องขอบคุณทุกคนที่มีส่วนร่วม
ขอขอบคุณ Netlify สำหรับการโฮสต์เอกสารของเรา
เราขอขอบคุณผู้เขียนโครงการที่เกี่ยวข้องที่มีอยู่สำหรับแนวคิดและความร่วมมือของพวกเขา:
Create React App เป็นซอฟต์แวร์โอเพ่นซอร์สที่ได้รับอนุญาตจาก MIT โลโก้แอป Create React ได้รับอนุญาตภายใต้ใบอนุญาต Creative Commons Attribution 4.0 International
