\nReact \u0111\u01b0\u1ee3c bi\u1ebft \u0111\u1ebfn l\u00e0 th\u01b0 vi\u1ec7n JavaScript gi\u00fap x\u00e2y d\u1ef1ng component UI (giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng) t\u01b0\u01a1ng t\u00e1c d\u1ec5 d\u00e0ng h\u01a1n, c\u00f3 tr\u1ea1ng th\u00e1i v\u00e0 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1ea1i \u0111\u01b0\u1ee3c v\u1edbi xu h\u01b0\u1edbng Single Page Application.\u00a0 M\u1ed9t trong nh\u1eefng \u0111\u1eb7c \u0111i\u1ec3m t\u0103ng hi\u1ec7u n\u0103ng cho \u1ee9ng d\u1ee5ng l\u00e0 c\u00f4ng ngh\u1ec7 s\u1eed d\u1ee5ng DOM \u1ea3o (Virtual DOM<\/a>).<\/span><\/p>\n
![\"react1\"](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2020\/08\/26114656\/pasted-image-0-1.png\")
<\/p>\n
DOM l\u00e0 g\u00ec?<\/h2>\n
DOM (Document Object Model) l\u00e0 th\u01b0 vi\u1ec7n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng v\u00e0 t\u1ed3n t\u1ea1i d\u01b0\u1edbi d\u1ea1ng tree nodes d\u00f9ng \u0111\u1ec3 qu\u1ea3n l\u00fd, truy xu\u1ea5t, ch\u1ec9nh s\u1eeda t\u1edbi b\u1ea5t k\u00ec ph\u1ea7n t\u1eed n\u00e0o th\u00f4ng qua \u0111\u1ed1i t\u01b0\u1ee3ng g\u1ed1c l\u00e0 document. React s\u1eed d\u1ee5ng DOM \u1ea3o n\u00ean vi\u1ec7c c\u1eadp nh\u1eadt v\u00e0 re-render s\u1ebd th\u1ef1c hi\u1ec7n hi\u1ec7u qu\u1ea3 h\u01a1n khi data c\u00f3 s\u1ef1 thay \u0111\u1ed5i. N\u00f3 so s\u00e1nh, c\u1eadp nh\u1eadt ph\u1ea7n t\u1eed thay \u0111\u1ed5i v\u00e0 ch\u1ec9 render t\u1ea1i component c\u1ea7n thi\u1ebft n\u00ean vi\u1ec7c t\u1ea1o l\u1ea1i r\u1ea5t nhanh kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t.<\/p>\n
L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng JSX trong React<\/h2>\n
Ngo\u00e0i ra, trong React cho ph\u00e9p nh\u00fang code HTML v\u00e0o trong code JavaScript nh\u1edd JSX. Vi\u1ec7c t\u00edch h\u1ee3p JSX l\u00e0m cho code d\u1ec5 \u0111\u1ecdc h\u01a1n, component d\u1ec5 hi\u1ec3u h\u01a1n\u00a0 m\u00e0 kh\u00f4ng l\u00e0m thay \u0111\u1ed5i ng\u1eef ngh\u0129a c\u1ee7a Javascript. M\u1ed7i bi\u1ec3u th\u1ee9c JSX c\u1ea7n \u0111\u01b0\u1ee3c bao b\u1ecdc b\u1edfi ph\u1ea7n t\u1eed ngo\u00e0i c\u00f9ng (th\u01b0\u1eddng d\u00f9ng th\u1ebb <div><\/div> \u0111\u1ec3 bao b\u1ecdc). Vi\u1ec7c s\u1eed d\u1ee5ng JSX l\u00e0 kh\u00f4ng b\u1eaft bu\u1ed9c nh\u01b0ng \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch.<\/span><\/p>\n V\u1edbi React, application \u0111\u01b0\u1ee3c chia th\u00e0nh nhi\u1ec1u components. M\u1ed9t component c\u00f3 th\u1ec3 truy c\u1eadp th\u00f4ng tin qua hai c\u00e1ch: props v\u00e0 state. Ch\u00fang ta c\u00f3 th\u1ec3 xem qua v\u00ed d\u1ee5 sau \u0111\u1ec3 h\u00ecnh dung r\u00f5 h\u01a1n.<\/span><\/p>\n Kh\u00e1c v\u1edbi props, state c\u1ee7a component kh\u00f4ng th\u1ec3 truy\u1ec1n \u0111\u01b0\u1ee3c ra ngo\u00e0i. Component s\u1ebd qu\u1ea3n l\u00fd state c\u1ee7a ch\u00ednh n\u00f3. \u0110\u1ec3 truy c\u1eadp state ta s\u1eed d\u1ee5ng c\u00fa ph\u00e1p this.state.name-of-property v\u00e0 thay \u0111\u1ed5i state trong m\u1ed9t component ta s\u1eed d\u1ee5ng h\u00e0m this.setState(). M\u1ed9t component con c\u00f3 th\u1ec3 thay \u0111\u1ed5i state c\u1ee7a component cha b\u1eb1ng c\u00e1ch t\u1eeb cha truy\u1ec1n xu\u1ed1ng cho con m\u1ed9t h\u00e0m callback \u0111\u1ec3 nh\u1eadn d\u1eef li\u1ec7u c\u1eadp nh\u1eadt t\u1eeb component con.<\/span><\/p>\n \u00a0Trong b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh \u0111\u00e3 \u0111\u1ec1 c\u1eadp \u0111\u1ebfn m\u1ed9t s\u1ed1 \u0111\u1eb7c \u0111i\u1ec3m c\u01a1 b\u1ea3n c\u1ee7a React. Hy v\u1ecdng c\u00e1c b\u1ea1n c\u00f3 c\u00e1i nh\u00ecn t\u1ed5ng qu\u00e1t\u00a0 v\u1ec1 react\u00a0 v\u00e0 c\u00f3 th\u1ec3 \u1ee9ng d\u1ee5ng th\u01b0 vi\u1ec7n React v\u00e0o web application.\u00a0<\/span><\/p>\nApplication v\u1edbi React<\/h2>\n
class HelloMessage extends React.Component {\n render() {\n return (\n <div>\n Hello {this.props.name}\n <\/div>\n );\n }\n }\n \n ReactDOM.render(\n <HelloMessage name=\"Minh\" \/>,\n document.getElementById('example-app')\n );\n<\/pre>\n\n
\nProps \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 truy\u1ec1n th\u00f4ng tin t\u1eeb component n\u00e0y sang component kh\u00e1c. \u0110\u1ec3 xem props c\u1ee7a component c\u00f3 ch\u1ee9a g\u00ec ta s\u1ebd s\u1eed d\u1ee5ng c\u00e2u l\u1ec7nh this.props.<\/span><\/p>\nclass Color extends React.Component {\n constructor(props) {\n super(props);\n this.state = {color: \"Black\"};\n }\n render() {\n return (\n <div>\n <h1>My favorite color is {this.state.color}<\/h1>\n <\/div>\n );\n }\n}\n<\/pre>\n\n
T\u00f3m l\u1ea1i<\/h2>\n