{"id":3576,"date":"2024-05-30T07:36:09","date_gmt":"2024-05-30T07:36:09","guid":{"rendered":"https:\/\/zinisoft.net\/?p=3576"},"modified":"2025-02-10T07:58:59","modified_gmt":"2025-02-10T07:58:59","slug":"how-to-install-and-setup-react-native-on-windows-10","status":"publish","type":"post","link":"https:\/\/zinisoft.net\/vi\/how-to-install-and-setup-react-native-on-windows-10\/","title":{"rendered":"C\u00e0i \u0111\u1eb7t v\u00e0 thi\u1ebft l\u1eadp React Native tr\u00ean Windows 10"},"content":{"rendered":"\r\n<p>React Native l\u00e0 m\u1ed9t framework m\u1ea1nh m\u1ebd \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng \u0111a n\u1ec1n t\u1ea3ng b\u1eb1ng JavaScript. N\u1ebfu b\u1ea1n l\u00e0 ng\u01b0\u1eddi d\u00f9ng Windows, h\u00e3y l\u00e0m theo c\u00e1c b\u01b0\u1edbc sau \u0111\u1ec3 c\u00e0i \u0111\u1eb7t React Native tr\u00ean m\u00e1y c\u1ee7a b\u1ea1n.<\/p>\r\n\r\n\r\n\r\n<h2>C\u00e0i \u0111\u1eb7t<\/h2>\r\n\r\n\r\n\r\n<h3>1\/ C\u00e0i \u0111\u1eb7t Chocolatey<\/h3>\r\n<img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/zinisoft.net\/wp-content\/uploads\/2024\/05\/chocolatey-1200x675-1.png\" alt=\"Chocolatey\" \/>\r\n<p> Chocolatey l\u00e0 tr\u00ecnh qu\u1ea3n l\u00fd g\u00f3i cho Windows gi\u00fap \u0111\u01a1n gi\u1ea3n h\u00f3a vi\u1ec7c c\u00e0i \u0111\u1eb7t ph\u1ea7n m\u1ec1m. M\u1edf terminal (Windows Command Prompt ho\u1eb7c PowerShell) v\u00e0 ch\u1ea1y l\u1ec7nh sau \u0111\u1ec3 c\u00e0i \u0111\u1eb7t Chocolatey:<\/p>\r\n<pre>choco install chocolatey<\/pre>\r\n\r\n\r\n\r\n<h3>2\/ C\u00e0i \u0111\u1eb7t Node, Python2, and JDK8<\/h3> \r\n<p> React Native y\u00eau c\u1ea7u Node.js, Python2 v\u00e0 JDK8. B\u1ea1n c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t ch\u00fang b\u1eb1ng Chocolatey<\/p>\r\n<pre>choco install nodejs.install python2 jdk8<\/pre>\r\n\r\n\r\n\r\n<h3>3\/ C\u00e0i \u0111\u1eb7t Android Studio<\/h3>\r\n<img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/zinisoft.net\/wp-content\/uploads\/2024\/05\/Android-Studio-Social.png\" alt=\"Android Studio\" \/>\r\n<p> Android Studio l\u00e0 c\u00f4ng c\u1ee5 thi\u1ebft y\u1ebfu \u0111\u1ec3 ph\u00e1t tri\u1ec3n React Native tr\u00ean Windows. T\u1ea3i xu\u1ed1ng v\u00e0 c\u00e0i \u0111\u1eb7t Android Studio t\u1eeb website <strong> developer.android.com<\/strong>. Trong qu\u00e1 tr\u00ecnh c\u00e0i \u0111\u1eb7t, h\u00e3y \u0111\u1ea3m b\u1ea3o ch\u1ecdn c\u00e1c th\u00e0nh ph\u1ea7n Android SDK b\u1ea1n c\u1ea7n.<\/p>\r\n\r\n\r\n\r\n<h3>4\/ Set up Android SDK<\/h3> \r\n<img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/zinisoft.net\/wp-content\/uploads\/2024\/05\/sdk-platform-tools-badge.webp\" alt=\"Android SDK\" \/>\r\n<p>Sau khi c\u00e0i \u0111\u1eb7t Android Studio, h\u00e3y m\u1edf v\u00e0 ch\u1ecdn m\u1ee5c \u201cSDK Manager\u201d. L\u1ef1a ch\u1ecdn c\u00e0i \u0111\u1eb7t c\u00e1c th\u00e0nh ph\u1ea7n:<\/p>\r\n    <ul>\r\n        <li>Android SDK<\/li>\r\n        <li>Android SDK Platform<\/li>\r\n        <li>Android Virtual Device (AVD)<\/li>\r\n    <\/ul>\r\n\r\n\r\n\r\n<h3>5\/ C\u00e0i \u0111\u1eb7t React Native CLI<\/h3>\r\n<img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/zinisoft.net\/wp-content\/uploads\/2024\/05\/1__iTead5u-AGnweLmvOjlhw.png\" alt=\"React Native CLI\" \/>\r\n<p>M\u1edf Command Prompt ho\u1eb7c PowerShell v\u00e0 ch\u1ea1y l\u1ec7nh sau \u0111\u1ec3 c\u00e0i \u0111\u1eb7t React Native:<\/p>\r\n<pre>npm install -g react-native-cli<\/pre>\r\n\r\n\r\n\r\n<h3>6\/ T\u1ea1o \u1ee9ng d\u1ee5ng m\u1edbi<\/h3>\r\n <ul>\r\n        <li>K\u1ebft n\u1ed1i thi\u1ebft b\u1ecb Android v\u1edbi m\u00e1y t\u00ednh qua USB ho\u1eb7c thi\u1ebft l\u1eadp tr\u00ecnh gi\u1ea3 l\u1eadp Android b\u1eb1ng Android Studio.<\/li>\r\n        <li>\u0110\u1ea3m b\u1ea3o USB debugging (g\u1ee1 l\u1ed7i) \u0111\u01b0\u1ee3c b\u1eadt tr\u00ean thi\u1ebft b\u1ecb c\u1ee7a b\u1ea1n.<\/li>\r\n <\/ul>\r\n\r\n\r\n\r\n<h3>7\/ Ch\u1ea1y \u1ee9ng d\u1ee5ng<\/h3>\r\n<ol>\r\n        <li>Trong terminal, tr\u1ecf \u0111\u1ebfn th\u01b0 m\u1ee5c m\u00e0 b\u1ea1n mu\u1ed1n t\u1ea1o d\u1ef1 \u00e1n.<\/li>\r\n        <li>Ch\u1ea1y l\u1ec7nh sau \u0111\u1ec3 t\u1ea1o m\u1ed9t d\u1ef1 \u00e1n React Native m\u1edbi (thay th\u1ebf MyApp b\u1eb1ng t\u00ean d\u1ef1 \u00e1n b\u1ea1n mu\u1ed1n):<\/li>\r\n    <pre><code>react-native init MyApp<\/code><\/pre>\r\n<\/ol>\r\n\r\n\r\n\r\n <h3>8\/ Ch\u1ea1y \u1ee9ng d\u1ee5ng React Native c\u1ee7a b\u1ea1n<\/h3>\r\n    <ol>\r\n        <li>Chuy\u1ec3n v\u00e0o th\u01b0 m\u1ee5c d\u1ef1 \u00e1n:<\/li>\r\n        <pre><code>cd MyApp<\/code><\/pre>\r\n        <li>Kh\u1edfi \u0111\u1ed9ng tr\u00ecnh \u0111\u00f3ng g\u00f3i Metro (tr\u00ecnh \u0111\u00f3ng g\u00f3i JavaScript):<\/li>\r\n        <pre><code>npx react-native start<\/code><\/pre>\r\n        <li>Trong m\u1ed9t thi\u1ebft b\u1ecb \u0111\u1ea7u cu\u1ed1i ri\u00eang bi\u1ec7t, h\u00e3y x\u00e2y d\u1ef1ng v\u00e0 ch\u1ea1y \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n tr\u00ean thi\u1ebft b\u1ecb Android ho\u1eb7c tr\u00ecnh gi\u1ea3 l\u1eadp \u0111\u01b0\u1ee3c k\u1ebft n\u1ed1i:<\/li>\r\n        <pre><code>npx react-native run-android<\/code><\/pre>\r\n    <\/ol>\r\n    \r\n    <p>B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh vi\u1ec7c React Native tr\u00ean Windows 10. H\u00e3y b\u1eaft \u0111\u1ea7u kh\u00e1m ph\u00e1 v\u00e0 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng cho ri\u00eang b\u1ea1n.<\/p>\r\n\r\n\r\n\r\n\r\n<p>M\u1eb9o: Ch\u00fang t\u00f4i khuy\u00ean b\u1ea1n n\u00ean s\u1eed d\u1ee5ng Visual Studio Code l\u00e0m tr\u00ecnh ch\u1ec9nh s\u1eeda m\u00e3 ngu\u1ed3n \u0111\u1ec3 l\u00e0m vi\u1ec7c v\u1edbi c\u00e1c d\u1ef1 \u00e1n React Native d\u1ec5 d\u00e0ng h\u01a1n.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>React Native l\u00e0 m\u1ed9t framework m\u1ea1nh m\u1ebd \u0111\u1ec3 x\u00e2y d\u1ef1ng [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/posts\/3576"}],"collection":[{"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/comments?post=3576"}],"version-history":[{"count":4,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/posts\/3576\/revisions"}],"predecessor-version":[{"id":4867,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/posts\/3576\/revisions\/4867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/media\/4506"}],"wp:attachment":[{"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/media?parent=3576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/categories?post=3576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zinisoft.net\/vi\/wp-json\/wp\/v2\/tags?post=3576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}