หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

Oftadeh โต้ตอบผู้ดูแลระบบ

Oftadeh - React Admin Responsive Template เป็นแอป React ที่เขียนด้วย Javascript ทั้งหมด (reactjs & material-ui) และไม่มีการพึ่งพา jQuery


หากต้องการดูการสาธิตสด คลิกที่นี่

ตอบสนอง

React เป็นแกนหลักของเทมเพลตของเรา หากคุณไม่รู้ว่า React คืออะไร หรือไม่รู้วิธีใช้งาน เราขอแนะนำอย่างยิ่งให้ตรวจสอบ React ก่อนที่จะเริ่มทำอะไรกับ Oftadeh

สร้างแอป React (CLI)

สร้างแอป React เป็นเครื่องมือที่สร้างโดยนักพัฒนาที่ Facebook เพื่อช่วยคุณสร้างแอปพลิเคชัน React ช่วยให้คุณประหยัดเวลาในการตั้งค่าและการกำหนดค่าที่ใช้เวลานาน

สารบัญ

  • Oftadeh โต้ตอบผู้ดูแลระบบ
    • ตอบสนอง
    • สร้างแอป React (CLI)
    • สารบัญ
    • ข้อกำหนดเบื้องต้น
      • โหนด js
    • การติดตั้ง
      • การพัฒนา
      • การผลิต
      • การปรับใช้
    • โครงสร้างโครงการ
    • แหล่งที่มาและเครดิต
    • สคริปต์ที่มีอยู่
      • npm start
      • npm test
      • npm run build
      • npm run eject
    • เรียนรู้เพิ่มเติม
      • การแยกรหัส
      • การวิเคราะห์ขนาดมัด
      • การสร้างเว็บแอปแบบก้าวหน้า
      • การกำหนดค่าขั้นสูง
      • การปรับใช้
      • npm run build ล้มเหลวในการลดขนาด
    • ใบอนุญาต
    • บริจาค

ข้อกำหนดเบื้องต้น

ส่วนนี้จะให้ข้อมูลบางอย่างเกี่ยวกับเครื่องมือที่คุณต้องการ

โหนด js

หากต้องการติดตั้งและใช้ Oftadeh React คุณจะต้องติดตั้ง Node.js ลงในคอมพิวเตอร์ของคุณ เราจะไม่ลงรายละเอียดมากเกินไปเกี่ยวกับ Node.js เนื่องจากอยู่นอกขอบเขตของเอกสารนี้ นอกจากนี้คุณไม่จำเป็นต้องใช้ Node.js จริงๆ เพราะจำเป็นสำหรับกระบวนการพัฒนาเท่านั้น

การติดตั้ง

A.การติดตั้งข้อกำหนดเบื้องต้น
ดาวน์โหลดและติดตั้งอย่างน้อย LTS หรือ Node.js เวอร์ชันล่าสุดจากเว็บไซต์

B.การติดตั้ง Oftadeh React
เปิดแอปพลิเคชันคอนโซลที่คุณชื่นชอบ (Terminal, Command Prompt ฯลฯ) นำทางไปยังโฟลเดอร์งานของคุณ รันคำสั่งต่อไปนี้และรอให้เสร็จสิ้น:

npm install


คำสั่งนี้จะติดตั้งโมดูล Node.js ที่จำเป็นทั้งหมดลงในไดเร็กทอรี node_modules ภายในโฟลเดอร์งานของคุณ
และตอนนี้คุณก็พร้อมที่จะรัน Oftadeh React เป็นครั้งแรกแล้ว

การพัฒนา

ขณะที่ยังอยู่ในโฟลเดอร์งานของคุณ ให้รันคำสั่งต่อไปนี้ในแอปพลิเคชันคอนโซล:

npm start


และนั่นมัน create-react-app จะดูแลทุกอย่างและเริ่ม Oftadeh React
คุณสามารถตรวจสอบแอปพลิเคชันคอนโซลของคุณเพื่อรับข้อมูลเพิ่มเติมเกี่ยวกับเซิร์ฟเวอร์ โดยค่าเริ่มต้น มันจะทำงานบน [http://localhost:3000](http://localhost:3000) แต่อาจมีการเปลี่ยนแปลงขึ้นอยู่กับการตั้งค่าของคุณ

การผลิต

คำสั่งต่อไปนี้สร้างแอปพลิเคชันลงในไดเร็กทอรีเอาต์พุต


npm run build


รวบรวมแอปพลิเคชันลงในไดเร็กทอรี / build

การปรับใช้

ชำระเงินที่เอกสาร create-react-app ของ Facebook: การปรับใช้


โครงสร้างโครงการ

นี่คือโครงสร้างโครงการของ Oftadeh React:


แหล่งที่มาและเครดิต

  • วัสดุ-UI
  • clsx
  • ปฏิกิริยาร่าง-wysiwyg
  • jodit-โต้ตอบ
  • ไอคอนการออกแบบวัสดุ
  • fslightbox
  • ตอบสนองเราเตอร์-Dom
  • ตารางวัสดุ
  • mui-datatables
  • ช่วงเวลา
  • ตอบสนองปฏิทินใหญ่
  • รีชาร์ต
  • ปฏิกิริยา-chartjs-2

โปรเจ็กต์นี้บูทด้วย Create React App

สคริปต์ที่มีอยู่

ในไดเร็กทอรีโปรเจ็กต์ คุณสามารถรัน:

npm start

เรียกใช้แอปในโหมดการพัฒนา
เปิด http://localhost:3000 เพื่อดูในเบราว์เซอร์

เพจจะโหลดซ้ำหากคุณทำการแก้ไข
คุณจะเห็นข้อผิดพลาดของขุยในคอนโซลด้วย

npm test

เปิดตัวนักวิ่งทดสอบในโหมดนาฬิกาแบบโต้ตอบ
ดูส่วนเกี่ยวกับการรันการทดสอบสำหรับข้อมูลเพิ่มเติม

npm run build

สร้างแอปสำหรับการผลิตไปยัง build ด์
มันรวม React ในโหมดการผลิตอย่างถูกต้องและปรับโครงสร้างให้เหมาะสมเพื่อประสิทธิภาพที่ดีที่สุด

โครงสร้างถูกย่อให้เล็กลงและชื่อไฟล์มีแฮชด้วย
แอปของคุณพร้อมที่จะปรับใช้แล้ว!

ดูส่วนเกี่ยวกับการปรับใช้สำหรับข้อมูลเพิ่มเติม

npm run eject

หมายเหตุ: นี่เป็นการดำเนินการทางเดียว เมื่อคุณ eject คุณจะไม่สามารถย้อนกลับไปได้!

หากคุณไม่พอใจกับเครื่องมือสร้างและตัวเลือกการกำหนดค่า คุณสามารถ eject ได้ตลอดเวลา คำสั่งนี้จะลบการพึ่งพาบิลด์เดียวออกจากโปรเจ็กต์ของคุณ

แต่จะคัดลอกไฟล์การกำหนดค่าทั้งหมดและการพึ่งพาแบบสกรรมกริยา (webpack, Babel, ESLint ฯลฯ) ลงในโปรเจ็กต์ของคุณเพื่อให้คุณควบคุมไฟล์เหล่านั้นได้อย่างเต็มที่ คำสั่งทั้งหมดยกเว้นคำสั่ง eject จะยังคงใช้งานได้ แต่จะชี้ไปที่สคริปต์ที่คัดลอกเพื่อให้คุณปรับแต่งได้ ณ จุดนี้คุณต้องอยู่คนเดียว

คุณไม่จำเป็นต้องใช้ eject เลย ชุดคุณลักษณะที่ได้รับการดูแลจัดการนี้เหมาะสำหรับการปรับใช้ขนาดเล็กและระดับกลาง และคุณไม่ควรรู้สึกผูกพันที่จะใช้คุณลักษณะนี้ อย่างไรก็ตาม เราเข้าใจดีว่าเครื่องมือนี้จะไม่มีประโยชน์หากคุณไม่สามารถปรับแต่งได้เมื่อคุณพร้อม

เรียนรู้เพิ่มเติม

คุณสามารถเรียนรู้เพิ่มเติมได้ในเอกสารประกอบของแอป Create React

หากต้องการเรียนรู้ React โปรดดูเอกสาร React

การแยกรหัส

ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/code-splitting

การวิเคราะห์ขนาดมัด

ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

การสร้างเว็บแอปแบบก้าวหน้า

ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

การกำหนดค่าขั้นสูง

ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/advanced-configuration

การปรับใช้

ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/deployment

npm run build ล้มเหลวในการลดขนาด

ส่วนนี้ย้ายไปที่นี่: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

ใบอนุญาต

ฟรีโดยสมบูรณ์ (MIT)! ดู LICENSE.md สำหรับข้อมูลเพิ่มเติม

บริจาค

คุณสามารถบริจาคให้กับเราได้ ลิงค์สำหรับการบริจาค

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