React

A JavaScript library for building user interfaces

ការប្រកាស

React ផ្តល់នូវភាពងាយស្រួលបំផុតក្នុងការបង្កើត User Interfaces។ ជាមួយនិងការ design views ដ៏សាមញ្ញសម្រាប់ state នីមួយៗនៅក្នុង application របស់អ្នក ហើយជាពិសេស React update និង​ render ទៅលើ components ទាំងឡាយណាដែលមាន data ផ្លាស់ប្តូរតែប៉ុណ្ណេាះ។

ការប្រកាស views អាចធ្វើអោយ​ code របស់អ្នកងាយស្រួលក្នុងការថែទាំហើយនិង debug។

Component-Based

បង្កើត encapsulated components ដែល​គ្រប់គ្រង state ដោយខ្លួនឯង, ហើយផ្សំ components នីមួយៗបង្កើតបានជា User Interfaces ដ៏ស្មុគស្មាញ។

Logic របស់ component ត្រូវបានគេសរសេរនៅក្នុង JavaScript ខ្លួនឯង ជំនួសអោយការសរសេរនៅក្នុង templates, វាធ្វើអោយអ្នកងាយស្រួលក្នុងការ pass data នៅក្នុង app របស់អ្នក ហើយនិងការពារ DOM ពីការមាន state។

រៀនតែម្តង, ប្រើបានគ្រប់ទីកន្លែង

អ្នកអាចប្រើគ្រប់ភាសា programming ហើយនិងគ្រប់ technology ជាមួយនិង React, ដូច្នេះអ្នកអាចបង្កើត features ថ្មីៗ នៅក្នុង React ដោយមិនតម្រូវអោយសរសេរកូដឡើងវិញ។

React អាច render នៅលើ server ផងដែរ ដោយការប្រើ Node និង អាចបង្កើតកម្មវិធីទូរសព្ទ័ដោយការប្រើ React Native


Component ដ៏សាមញ្ញមួយ

នេះគឺជាការ implement render() method ដើម្បីបង្កើត React component មួយ។ render() method មានមុខងារក្នុងការ return content ដើម្បី display ដោយផ្អែកទៅលើការ input data។ នៅក្នុងឧទាហរណ៍មួយនេះគេប្រើ syntax ដែលស្រដៀងនិង syntax របស់ XML ដែលត្រូវបានគេហៅថា JSX។ input data ដែល pass ចូលទៅក្នុង component គឺយើងអាច​ប្រើវាបាននៅក្នុង render() method តាមរយៈ this.props

JSX មិនម្រូវអោយប្រើជាមួយ React ទេ។ សាកល្បងជាមួយ Babel REPL ដើម្បីឃើញ raw JavaScript កូដដែលបង្កើតដោយ JSX compilation។

Loading code example...

Stateful Component មួយ

បន្ថែមពីលើការទទួលយក input data (acccess input data តាមរយៈ this.props), component ក៏មាន internal state ផ្ទាល់ខ្លួនផងដែរ (អាច access តាមរយៈ this.state)។​ ប្រសិនជាតម្លៃ state data របស់ component ត្រូវបានផ្លាស់ប្តូរ, នេាះ render() method និងធ្វើការ execute ម្តងទៀត ហើយលទ្ធផលបង្ហាញក៏និងធ្វើការផ្លាស់ប្តូរតម្លៃផងដែរ។

Loading code example...

Application មួយ

ការប្រើ props ហើយនិង state ជាមួយគ្នា, ដោយបង្កើត Todo application ដ៏តូចមួយ។ នៅក្នុងឧទាហរណ៍នេះគេប្រើ state ដើម្បី​ track មើល items ​នីមួយៗដែលមាននៅក្នុង current list ហើយក៏ track មើល text ដែល user បានបញ្ចូលផងដែរ។ Event handlers ហាក់បីដូចជា​ render នៅខាងក្នុង element, ប៉ន្តែតាមពិតទៅ event handlers នេះ​ត្រូវបានគេប្រមូលផ្តុំហើយនិងត្រូវបានគេ implement ដោយប្រើ event delegation។

Loading code example...

ការប្រើ Component ជាមួយ External Plugins

អ្នកក៏អាចប្រើ React ជាមួយនិង​ libraries ហើយនិង frameworks ផ្សេងៗទៀតផងដែរ។ នៅក្នុងឧទាហរណ៍មួយនេះគេប្រើ remarkable, ដែលជា external Markdown library, ដើម្បីបម្លែង​តម្លៃរបស់ <textarea> ជាលក្ខណៈ real time។

Loading code example...