{"id":47361,"date":"2022-02-17T14:26:12","date_gmt":"2022-02-17T07:26:12","guid":{"rendered":"https:\/\/wiki.tino.org\/staging\/?p=47361"},"modified":"2023-05-27T15:50:15","modified_gmt":"2023-05-27T08:50:15","slug":"reactjs-khac-phuc-loi-su-dung-create-react-app","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/reactjs-khac-phuc-loi-su-dung-create-react-app\/","title":{"rendered":"ReactJS: Kh\u1eafc ph\u1ee5c l\u1ed7i s\u1eed d\u1ee5ng create-react-app"},"content":{"rendered":"\n

Create React App<\/strong> l\u00e0 m\u1ed9t c\u00e1ch h\u1ed7 tr\u1ee3 ch\u00ednh th\u1ee9c \u0111\u1ec3 t\u1ea1o \u1ee9ng d\u1ee5ng single-page React. N\u00f3 cung c\u1ea5p c\u00e1c module v\u00e0 package c\u1ea7n thi\u1ebft m\u1edbi nh\u1ea5t m\u00e0 kh\u00f4ng c\u1ea7n b\u1ea5t k\u00ec c\u00e0i \u0111\u1eb7t n\u00e0o. \u1ede b\u00e0i vi\u1ebft tr\u01b0\u1edbc<\/a>, m\u00ecnh \u0111\u00e3 h\u01b0\u1edbng d\u1eabn c\u00e1ch t\u1ea1o m\u1ed9t d\u1ef1 \u00e1n React m\u1edbi v\u00e0 c\u00e1ch t\u00edch h\u1ee3p ReactJS v\u00e0o website, nh\u01b0ng do create-react-app upgrade version v\u00e0o th\u00e1ng 12\/2021 n\u00ean m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n kh\u1eafc ph\u1ee5c m\u1ed9t s\u1ed1 l\u1ed7i khi c\u00e0i \u0111\u1eb7t d\u1ef1 \u00e1n b\u1eb1ng create-react-app nh\u00e9!<\/p>\n\n\n\n

L\u1ed7i do version<\/h2>\n\n\n\n

Khi b\u1ea1n ch\u1ea1y c\u00e2u l\u1ec7nh kh\u1edfi t\u1ea1o d\u1ef1 \u00e1n m\u1edbi b\u1eb1ng create-react-app:<\/p>\n\n\n\n

create-react-app app-name<\/code><\/strong><\/p>\n\n\n\n

B\u1ea1n s\u1ebd g\u1eb7p ph\u1ea3i l\u1ed7i nh\u01b0 sau n\u1ebfu b\u1ea1n ch\u01b0a s\u1eed d\u1ee5ng version m\u1edbi c\u1ee7a n\u00f3:<\/p>\n\n\n\n

\"\"
L\u1eddi nh\u1eafc version create-react-app \u0111\u00e3 c\u0169<\/figcaption><\/figure><\/div>\n\n\n\n

Khi \u0111\u00f3, vi\u1ec7c c\u1ea7n l\u00e0m l\u00e0 x\u00f3a \u0111i version c\u0169 \u0111\u1ec3 c\u00e0i \u0111\u1eb7t l\u1ea1i version m\u1edbi<\/em>.<\/p>\n\n\n\n

C\u00e1ch x\u00f3a version c\u0169<\/h2>\n\n\n\n

C\u00e1ch 1:<\/h3>\n\n\n\n

N\u1ebfu l\u00fac tr\u01b0\u1edbc b\u1ea1n \u0111\u00e3 c\u00e0i \u0111\u1eb7t create-react-app globally b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng c\u00e2u l\u1ec7nh:<\/p>\n\n\n\n

sudo npm uninstall -g create-react-app<\/code><\/strong><\/p>\n\n\n\n

ho\u1eb7c<\/p>\n\n\n\n

sudo yarn global remove create-react-app<\/code><\/strong><\/p>\n\n\n\n

\u0111\u1ec3 x\u00f3a version c\u0169 \u0111i. <\/p>\n\n\n\n

Version m\u1edbi hi\u1ec7n t\u1ea1i l\u00e0 5.0.0 \u0111\u01b0\u1ee3c published v\u00e0o th\u00e1ng 12\/2021.<\/em><\/p>\n\n\n\n

\u0110\u1ec3 xem version m\u1edbi, ta ch\u1ec9 vi\u1ec7c g\u00f5 create-react-app --version<\/code><\/strong>, r\u1ed3i nh\u1ea5n enter l\u00e0 xong:<\/p>\n\n\n\n

\"\"
Version m\u1edbi c\u1ee7a create-react-app<\/figcaption><\/figure><\/div>\n\n\n\n

C\u00e1ch 2<\/h3>\n\n\n\n

\u0110\u1ed1i v\u1edbi window, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c b\u01b0\u1edbc tr\u00ean, nh\u01b0ng \u0111\u00f4i khi c\u00e2u l\u1ec7nh uninstall tr\u00ean s\u1ebd kh\u00f4ng x\u00f3a ho\u00e0n to\u00e0n c\u00e1c g\u00f3i c\u1ee7a version c\u0169, d\u1eabn \u0111\u1ebfn l\u1ed7i khi c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng tr\u00ean version m\u1edbi.<\/p>\n\n\n\n

N\u1ebfu kh\u00f4ng th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c b\u01b0\u1edbc tr\u00ean, th\u00ec c\u00e1ch n\u00e0y s\u1ebd hi\u1ec7u qu\u1ea3 cho b\u1ea1n.<\/p>\n\n\n\n

Ki\u1ec3m tra th\u01b0 m\u1ee5c l\u01b0u c\u00e0i \u0111\u1eb7t c\u1ee7a create-react-app b\u1eb1ng c\u00e2u l\u1ec7nh sau:<\/strong><\/p>\n\n\n\n

where create-react-app<\/code><\/strong><\/p>\n\n\n\n

ho\u1eb7c<\/p>\n\n\n\n

which create-react-app <\/strong><\/code><\/p>\n\n\n\n

\"\"
V\u1ecb tr\u00ed file c\u00e0i \u0111\u1eb7t trong m\u00e1y t\u00ednh<\/figcaption><\/figure><\/div>\n\n\n\n

H\u1ec7 th\u1ed1ng s\u1ebd cho ta bi\u1ebft file c\u00e0i \u0111\u1eb7t \u0111ang \u1edf \u0111\u00e2u, ch\u00fang ta ch\u1ec9 vi\u1ec7c \u0111\u1ebfn th\u01b0 m\u1ee5c \u0111\u00f3 v\u00e0 x\u00f3a 2 file c\u00e0i \u0111\u1eb7t<\/strong> nh\u01b0 h\u00ecnh l\u00e0 ok.<\/p>\n\n\n\n

C\u00e0i \u0111\u1eb7t d\u1ef1 \u00e1n React v\u1edbi version m\u1edbi.<\/h2>\n\n\n\n

Tr\u01b0\u1edbc khi c\u00e0i \u0111\u1eb7t b\u1ea1n nh\u1edb ki\u1ec3m tra l\u1ea1i version NodeJS ph\u1ea3i >=14.0.0<\/strong> nh\u00e9! <\/p>\n\n\n\n

\u0110\u1ed1i v\u1edbi h\u1ec7 \u0111i\u1ec1u h\u00e0nh MacOS\/Linux b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nvm<\/strong>, ho\u1eb7c nvm-window<\/strong> cho window \u0111\u1ec3 thay \u0111\u1ed5i version NodeJS cho m\u1ed7i d\u1ef1 \u00e1n m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng.<\/p>\n\n\n\n

\u0110\u1ec3 t\u1ea1o m\u1ed9t \u1ee9ng d\u1ef1ng m\u1edbi, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9t trong c\u00e1c c\u00e2u l\u1ec7nh sau:<\/p>\n\n\n\n

npx<\/h3>\n\n\n\n

npx create-react-app my-app<\/strong><\/code><\/p>\n\n\n\n

(Phi\u00ean b\u1ea3n npx ph\u1ea3i >= 5.2 nh\u00e9)<\/em><\/p>\n\n\n\n

npm<\/h3>\n\n\n\n

npm init react-app my-app<\/code><\/strong><\/p>\n\n\n\n

(\u0110i\u1ec1u ki\u1ec7n phi\u00ean b\u1ea3n npm >= 6)<\/em><\/p>\n\n\n\n

Yarn<\/h3>\n\n\n\n

yarn create react-app my-app<\/code><\/strong><\/p>\n\n\n\n

(yarn create ch\u1ec9 s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c v\u1edbi phi\u00ean b\u1ea3n yarn >=0.25)<\/em><\/p>\n\n\n\n

Sau khi enter 1 trong ba c\u00e2u l\u1ec7nh tr\u00ean, h\u1ec7 th\u1ed1ng s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u1ea3i v\u1ec1 c\u00e1c g\u00f3i c\u1ea7n thi\u1ebft c\u01a1 b\u1ea3n c\u1ee7a ReactJS m\u00e0 b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i c\u00e0i \u0111\u1eb7t hay c\u1ea5u h\u00ecnh th\u00eam c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 Webpack, Babel. Ch\u00fang \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh s\u1eb5n v\u00e0 \u1ea9n \u0111i \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 t\u1eadp trung v\u1ec1 ph\u1ea7n code c\u01a1 b\u1ea3n c\u1ee7a React.<\/p>\n\n\n\n

\"\"
\u0110\u00e2y l\u00e0 k\u1ebft qu\u1ea3 sau khi c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng ReactJS th\u00e0nh c\u00f4ng<\/figcaption><\/figure><\/div>\n\n\n\n

Create React App v\u1edbi c\u00e1c template<\/h2>\n\n\n\n

Ngo\u00e0i c\u00e1i c\u1ea5u h\u00ecnh c\u01a1 b\u1ea3n, create-react-app c\u00f2n cho ph\u00e9p ch\u00fang ta ch\u1ecdn s\u1eb5n c\u00e1c template mong mu\u1ed1n nh\u01b0 typescript, redux… ch\u1eb3ng h\u1ea1n.<\/p>\n\n\n\n

Ch\u00fang ta c\u00f3 th\u1ec3 b\u1eaft d\u1ea7u m\u1ed9t \u1ee9ng d\u1ee5ng m\u1edbi v\u1edbi m\u1ed9t template b\u1eb1ng c\u00e1ch th\u00eam v\u00e0o c\u00e1c t\u00f9y ch\u1ecdn sau c\u00e2u l\u1ec7nh create nh\u01b0 sau: <\/p>\n\n\n\n

--template [template-name]<\/code><\/strong><\/p>\n\n\n\n

N\u1ebfu ch\u00fang ta kh\u00f4ng ch\u1ecdn m\u1ed9t template n\u00e0o, react s\u1ebd kh\u1edfi t\u1ea1o template m\u1eb7c \u0111\u1ecbnh c\u1ee7a h\u1ecd l\u00e0 Javascript<\/strong>.<\/p>\n\n\n\n

C\u00e1c template lu\u00f4n lu\u00f4n \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean theo \u0111\u1ecbnh d\u1ea1ng sau:<\/p>\n\n\n\n

cra-template-[template-name]<\/strong><\/p>\n\n\n\n

tuy nhi\u00ean, ch\u00fang ta ch\u1ec9 c\u1ea7n cung c\u1ea5p [template-name] ph\u00eda sau c\u00e2u l\u1ec7nh create<\/strong> th\u00ec c\u0169ng \u0111\u1ee7 r\u1ed3i.<\/p>\n\n\n\n

C\u00e2u l\u1ec7nh \u0111\u1ea7y \u0111\u1ee7 nh\u01b0 sau:<\/p>\n\n\n\n

npx create-react-app my-app --template [template-name]<\/code><\/strong><\/p>\n\n\n\n

B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm danh d\u00e1nh [template-name] b\u1eb1ng c\u00e1ch search “cre-template-*” tr\u00ean trang ch\u1ee7 npm ho\u1eb7c v\u00e0o link n\u00e0y https:\/\/www.npmjs.com\/search?q=cra-template-* \u0111\u1ec3 t\u1ea5t c\u1ea3 c\u00e1c template \u0111ang s\u1eb5n c\u00f3:<\/p>\n\n\n\n

\"\"
M\u1ed9t s\u1ed1 template c\u00f3 s\u1eb5n tr\u00ean npm<\/figcaption><\/figure><\/div>\n\n\n\n

V\u00ed d\u1ee5, \u0111\u1ec3 t\u1ea1o m\u1ed9t \u1ee9ng d\u1ee5ng React s\u1eed d\u1ee5ng Typescript, ch\u00fang ta s\u1eed d\u1ee5ng template khi t\u1ea1o nh\u01b0 sau:<\/p>\n\n\n\n

npx create-react-app my-app --template typescript<\/code><\/strong><\/p>\n\n\n\n

Ho\u1eb7c n\u1ebfu b\u1ea1n \u0111\u00e3 c\u00f3 s\u1eb5n source c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 mu\u1ed1n add typescript v\u00e0o, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o t\u00e0i li\u1ec7u Adding Typescript<\/a> n\u00e0y.<\/p>\n\n\n\n

Start – Test – Build<\/h2>\n\n\n\n

Khi ch\u00fang ta t\u1ea1o m\u1ed9t \u1ee9ng d\u1ee5ng m\u1edbi, CLI (Command line interface<\/em>) s\u1ebd s\u1eed d\u1ee5ng npm ho\u1eb7c yarn t\u00f9y v\u00e0o l\u00fac b\u1ea1n g\u00f5 c\u00e2u l\u1ec7nh n\u00e0o. V\u00ed d\u1ee5<\/p>\n\n\n\n

# Run this to use npm
npx create-react-app my-app<\/code><\/strong>
# Or run this to use yarn
yarn create react-app my-app<\/code><\/strong><\/p>\n\n\n\n

Khi ch\u1ea1y b\u1ea5t k\u1ef3 c\u00e2u l\u1ec7nh n\u00e0o ph\u00eda tr\u00ean th\u00ec CLI \u0111\u1ec1u s\u1ebd t\u1ea1o ra th\u01b0 m\u1ee5c “my-app” b\u00ean trong th\u01b0 m\u1ee5c c\u1ee7a b\u1ea1n (th\u01b0 m\u1ee5c hi\u1ec7n t\u1ea1i c\u1ee7a CMD). B\u00ean trong “my-app”, b\u1ea1n s\u1ebd c\u00f3 c\u00e1c th\u01b0 m\u1ee5c v\u00e0 file con \u0111\u01b0\u1ee3c generate t\u1ef1 \u0111\u1ed9ng nh\u01b0 c\u00e2y th\u01b0 m\u1ee5c sau:<\/p>\n\n\n\n

my-app
\u251c\u2500\u2500 README.md
\u251c\u2500\u2500 node_modules
\u251c\u2500\u2500 package.json
\u251c\u2500\u2500 .gitignore
\u251c\u2500\u2500 public
\u2502 \u251c\u2500\u2500 favicon.ico
\u2502 \u251c\u2500\u2500 index.html
\u2502 \u251c\u2500\u2500 logo192.png
\u2502 \u251c\u2500\u2500 logo512.png
\u2502 \u251c\u2500\u2500 manifest.json
\u2502 \u2514\u2500\u2500 robots.txt
\u2514\u2500\u2500 src
\u251c\u2500\u2500 App.css
\u251c\u2500\u2500 App.js
\u251c\u2500\u2500 App.test.js
\u251c\u2500\u2500 index.css
\u251c\u2500\u2500 index.js
\u251c\u2500\u2500 logo.svg
\u251c\u2500\u2500 serviceWorker.js
\u2514\u2500\u2500 setupTests.js<\/em><\/strong><\/p>\n\n\n\n

Trong my-app ch\u1ec9 ch\u01b0a c\u00e1c file c\u01a1 b\u1ea3n c\u1ea7n thi\u1ebft cho b\u1ea1n \u0111\u1ec3 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng. Ch\u1ec9 c\u00e0i \u0111\u1eb7t 1 l\u1ea7n duy nh\u1ea5t l\u00e0 xong. Sau khi t\u1ea1o d\u1ef1 \u00e1n theo version create-react-app m\u1edbi nh\u01b0 tr\u00ean, th\u00ec b\u1ea1n ch\u1ec9 c\u1ea7n m\u1edf th\u01b0 m\u1ee5c m\u1edbi t\u1ea1o “my-app” ho\u1eb7c ch\u1ea1y c\u00e2u l\u1ec7nh:<\/p>\n\n\n\n

cd my-app<\/code><\/strong><\/p>\n\n\n\n

C\u00e2u l\u1ec7nh kh\u1edfi ch\u1ea1y<\/h3>\n\n\n\n

<\/p>\n\n\n\n

npm run<\/strong> <\/code><\/p>\n\n\n\n

ho\u1eb7c <\/strong><\/p>\n\n\n\n

yarn start<\/strong><\/p>\n\n\n\n

URL m\u1eb7c \u0111\u1ecbnh s\u1ebd s\u1eed d\u1ee5ng port 3000, b\u1ea1n c\u00f3 th\u1ec3 v\u00e0o link n\u00e0y: http:\/\/localhost:3000\/<\/a> \u0111\u1ec3 xem d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n tr\u00ean tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n

C\u00e2u l\u1ec7nh ki\u1ec3m th\u1eed<\/h3>\n\n\n\n

npm test<\/code><\/strong><\/p>\n\n\n\n

ho\u1eb7c<\/p>\n\n\n\n

yarn test<\/code><\/strong><\/p>\n\n\n\n

C\u00e2u l\u1ec7nh build<\/h3>\n\n\n\n

npm run build<\/code><\/strong><\/p>\n\n\n\n

ho\u1eb7c<\/p>\n\n\n\n

yarn build<\/code><\/strong><\/p>\n\n\n\n

H\u1ec7 th\u1ed1ng s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u1ea1o ra file n\u00e9n trong th\u01b0 m\u1ee5c “build”. B\u1ea1n ch\u1ec9 c\u1ea7n copy n\u00f3 v\u00e0o m\u00f4i tr\u01b0\u1eddng n\u00e0o m\u00e0 b\u1ea1n c\u1ea7n deployed.<\/p>\n\n\n\n

Tr\u00ean \u0111\u00e2y l\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c khi t\u1ea1o m\u1edbi m\u1ed9t d\u1ef1 \u00e1n b\u1eb1ng create-react-app v\u1edbi version m\u1edbi. C\u00e1m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 gh\u00e9 th\u0103m.<\/p>\n\n\n\n

Link tham kh\u1ea3o: https:\/\/create-react-app.dev\/docs\/getting-started\/#get-started-immediately<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Create React App l\u00e0 m\u1ed9t c\u00e1ch h\u1ed7 tr\u1ee3 ch\u00ednh th\u1ee9c \u0111\u1ec3 t\u1ea1o \u1ee9ng d\u1ee5ng single-page React. N\u00f3 cung c\u1ea5p c\u00e1c module v\u00e0 package c\u1ea7n thi\u1ebft m\u1edbi nh\u1ea5t m\u00e0 kh\u00f4ng c\u1ea7n b\u1ea5t k\u00ec c\u00e0i \u0111\u1eb7t n\u00e0o. \u1ede b\u00e0i vi\u1ebft tr\u01b0\u1edbc, m\u00ecnh \u0111\u00e3 h\u01b0\u1edbng d\u1eabn c\u00e1ch t\u1ea1o m\u1ed9t d\u1ef1 \u00e1n React m\u1edbi v\u00e0 c\u00e1ch t\u00edch h\u1ee3p ReactJS […]<\/p>\n","protected":false},"author":7,"featured_media":16424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-47361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/47361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/comments?post=47361"}],"version-history":[{"count":0,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/47361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media\/16424"}],"wp:attachment":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media?parent=47361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/categories?post=47361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/tags?post=47361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}