Create a New React App

ប្រើចង្កោមឧបករណ៍ដែលបានរួមបញ្ចូលគ្នា (integrated toolchain) សម្រាប់អ្នកប្រើប្រាស់ (user) ដ៏ល្អបំផុត ហើយនិងសម្រាប់បទពិសោធរបស់ developer។

ទំព័រនេះពិពណ៌នាឧបករណ៍មានប្រសិទ្ធភាព (toolchains) មួយចំនួនដែលពេញនិយមដែលជួយក្នុងការងារដូចជា៖

  • Scaling to many files and components.
  • Using third-party libraries from npm.
  • Detecting common mistakes early.
  • Live-editing CSS and JS in development.
  • Optimizing the output for production.

ឧបករណ៍មានប្រសិទ្ធភាព (toolchains) ដែលត្រូវានណែនាំនៅលើទំព័រនេះ មិនទាមទារការ configuration ដើម្បីចាប់ផ្តើមទេ

អ្នកប្រហែលមិនត្រូវការឧបករណ៍មានប្រសិទ្ធភាព (Toolchain) ទេ

ប្រសិនបើអ្នកមិនជួបប្រទះបញ្ហាដែលបានពិពណ៌នាខាងលើ ឬក៏មិនមានអារម្មណ៍ថាស្រួល (comfortable) ក្នុងការប្រើឧបករណ៍មានប្រសិទ្ធភាព (tools) របស់ JavaScript នៅឡើយទេ សូមពិចារណា ការបន្ថែម React ជា plain <script> tag នៅលើ ទំព័រ HTML, ស្រេចចិត្ត (optionally) ជាមួយ JSX

នេះគឺជា វិធីងាយស្រួលបំផុតដើម្បីបញ្ចូល React ទៅក្នុងវេបសាយដែលមានស្រាប់។ អ្នកអាចបន្ថែមឧបករណ៍មានប្រសិទ្ធភាពដែលមានទំហំធំប្រសិនបើអ្នករកឃើញថាវាមានប្រយោជន៍!

ក្រុម React ជាបឋមសូមផ្តល់ដំបូន្មាននូវដំណេាះស្រាយដូចនេះ៖

  • ប្រសិនបើអ្នក កំពុងតែរៀន Reactកំពុងបង្កើត single-page app ថ្មីមួយ អ្នកអាចប្រើ Create React App
  • ប្រសិនបើអ្នកកំពុងតែបង្កើត គេហទំព័រ server-rendered ជាមួយ Node.js អ្នកអាចសាកល្បង Next.js
  • ប្រសិនបើអ្នកកំពុងតែបង្កើត static content-oriented website អ្នកអាចសាកល្បង Gatsby
  • ប្រសិនបើអ្នកកំពុងតែបង្កើត component libraryintegrating with an existing codebase អ្នកអាចសាកល្បង More Flexible Toolchains

Create React App

Create React App គឺជា environment ដែលផ្តល់ភាពសុខស្រួល (comfortable) មួយសម្រាប់ ការរៀន React ហើយគឺជាវិធីដ៏ល្អបំផុតដើម្បីចាប់ផ្តើមបង្កើត single-page application ថ្មីមួយ នៅក្នុង​ React។

វាបង្កើត (sets up)នូវ development environment របស់អ្នកដូច្នេះអ្នកអាចប្រើលក្ខណៈពិសេសចុងក្រោយបំផុតរបស់ JavaScript (latest JavaScript features), ផ្តល់ developer នូវបទពិសោធដ៏អស្ចារ្យបំផុត, ហើយនិងបង្កើនប្រសិទ្ធភាព app របស់អ្នកសម្រាប់ production។ អ្នកនឹងត្រូវមាន Node >= ៨.១០ និង npm >= ៥.៦ នៅលើម៉ាស៊ីនរបស់អ្នក។ ដើម្បីបង្កើត product, run៖

npx create-react-app my-app
cd my-app
npm start

ចំណាំ

npx នៅលើបន្ទាត់ទីមួយគឺមិនមែនជា typo ទេ — វាគឺជា package runner tool ដែលភ្ជាប់មកជាមួយ npm 5.2+

Create React App មិនដោះស្រាយ​ (doesn’t handle) នូវ backend logic ឬ databases នេាះទេ; វាគ្រាន់តែបង្កើតនូវ frontend build pipeline មួយ ដូចច្នេះអ្នកអាចវាជាមួយ backend ផ្សេងៗដែលអ្នកចូលចិត្ត។ បច្ចេកទេសខាងក្រោយ, វាប្រើ Babel និង webpack ប៉ុន្តែអ្នកមិនចាំបាច់ដឹងអ្វីអំពីពួកវាទេ។

នៅពេលអ្នកត្រៀមខ្លួនរួចរាល់ហើយដើម្បី deploy ទៅកាន់ production, running npm run build និងបង្កើត optimized build មួយសម្រាប់ app របស់អ្នកនៅក្នុងថតឯកសារ build។ អ្នកអាចស្វែងយល់បន្ថែមអំពី Create React App ពី README របស់វា និង ការណែនាំសម្រាប់អ្នកប្រើប្រាស់

Next.js

Next.js គឺជា framework ដែលស្រាលហើយនិងពេញនិយមមួយសម្រាប់ static និង server‑rendered applications បង្កើតជាមួយ React។ វារួមបញ្ចូលទាំង styling និង routing solutions out of the box, ហើយសន្មត់ថាអ្នកកំពុងប្រើ Node.js ជា server environment។

រៀន Next.js ពី ឯកសារណែនាំផ្លូវការរបស់វា

Gatsby

Gatsby គឺជាវិធីដ៏ល្អបំផុតក្នុងការបង្កើត static websites ជាមួយ React។ វាអនុញ្ញាតឱ្យអ្នកប្រើ React components, ប៉ុន្ត HTMl និង CSS ត្រូវបានបង្ហាញមុនដើម្បីធានាថាពេលវេលា load មានល្បឿនលឿនបំផុត។

រៀន Gatsby ពី ឯកសារណែនាំផ្លូវការរបស់វា និង gallery of starter kits

ឧបករណ៍មានប្រសិទ្ធភាព (Toolchains) ដែលអាចបត់បែនបានកាន់តែច្រើន (Flexible)

ឧបករណ៍មានប្រសិទ្ធភាព (toolchains) ខាងក្រោមនេះ ផ្តល់នូវភាពបត់បែន (flexiblity) និងជម្រើសកាន់តែច្រើន។ យើងសូមណែនាំពួកវាទៅកាន់អ្នកប្រើប្រាស់ (user) ដែលមានបទពិសោធន៍ច្រើន៖

ការបង្កើតឧបករណ៍មានប្រសិទ្ធភាព (Toolchain) មួយពីទទេ

ឧបករណ៍មានប្រសិទ្ធភាពមួយរបស់ JavaScript ជាធម្មតាមាន៖

  • package manager មួយ, ដូចជា Yarnnpm។ វាអនុញ្ញាតឱ្យអ្នកទាញយកគុណប្រយោជន៍ពី ecosystem ដ៏ធំនៃ third-party packages ហើយនិងងាយស្រួលដំឡើងឬធ្វើឱ្យវាទាន់សម័យ។
  • bundler មួយ, ដូចជា webpack or Parcel។ វាអនុញ្ញាតឱ្យអ្នកសរសេរ modular កូដហើយនិង bundle វាជាមួយគ្នាទៅជា packages តូចមួយដើម្បីបង្កើនប្រសិទ្ធភាពក្នុងការ load time។
  • compiler មួយ, ដូចជា Babel. វាអនុញ្ញាតឱ្យអ្នកសរសេរ JavaScript កូដដែលទំនើបដែលនៅតែដំណើរការនៅក្នុង browsers ចាស់ៗ។

ប្រសិនបើអ្នកចង់រៀបចំដំឡើងឧបករណ៍មានប្រសិទ្ធភាព (JavaScript toolchain) របស់អ្នកពីទទេ សូមពិនិត្យមើលការណែនាំនេះ ដែលនឹងបង្កើតឡើងវិញនូវ functionality មួយចំនួនរបស់ Create React App។

កុំភ្លេចធានាថាឧបករណ៍មានប្រសិទ្ធភាព (custom toolchain) ផ្ទាល់ខ្លួនរបស់អ្នក ត្រូវបានដំឡើងយ៉ាងត្រឹមត្រូវសម្រាប់ production