👉👉👉 Bài kế tiếp chúng ta sẽ học cách sử dụng công cụ "create-react-app" để tạo dự án làm việc với ReactJS. Tuy nhiên khi dùng "create-react-app" chúng ta chỉ cần chạy 1 command-line là xong, đôi khi điều này quá dễ dàng làm chúng ta không hiểu dự án đó được xây dựng như thế nào. Video này mình sẽ hướng dẫn cách bạn cách sử dụng Webpack để tạo một dự án làm việc với ReactJS. Video này rất phù hợp với các bạn muốn đào sâu hiểu bản chất của những thứ mình làm 😍😍😍 Link blog hướng dẫn: fullstack.edu.vn/blog/phan-1-tao-du-an-reactjs-voi-webpack-va-babel.html
nhiều khóa học hiện nay chú trọng vào cách viết component cho hiệu quả chứ ít khóa nào giải thích từ khâu config, giải thích package.json tới khâu thực hành như anh
Ngoài lệnh clear ra thì các bạn có thể dùng Ctrl + l (Chữ L không phải chữ i ngắn nhé) để clear screen. Mình không biết windows có hay không nhưng mac và linux thì ok nhé. Và npm i thay cho npm install . Ctrl + ` để bật tắt terminal với vscode nhé, hy vọng mấy cái nhỏ này sẽ giúp mấy bạn code lẹ hơn hehe
em dang hoc khoa react js tren f8( 5%) thi co nen tiep tuc xem video nay hay la hoc tiep khoa reactjs xong roi quay lai day coi video nay hay hoc react toi mot muc do nao do roi moi co the xem vidoe nay a;]]]
A cho e hỏi: máy e khá yếu nên e cài win lite, nó cũng k thiếu thốn gì nhiều nhưng nó k thể mở terminal trên vscode dc, mà phải tự đến folder r mở bằng command prompt. A có cách nào k ạ?
Trước kia e dùng vuejs em dùng php để tách script và template trong tất cả các file khác và minify luôn tạo thành 2 file html và js cơ. Nhưng cái e làm hơi khó dùng, cũng khó debug luôn nên e tắt cái minify đi. Lúc nào code xong 1 đoạn muốn test lại phải chạy localhost:3000/build để nó chạy 😅😅
Em đã tạo như anh và project chạy được rồi nhưng đến đoạn install html-webpack-plugins em đã thêm vào trong config của webpack mà khi start thì nó lại không build cho em cái file html ra ạ. Anh có thể cho em biết có vấn đề em đang gặp phải vấn đề gì không?
Cho hỏi là nếu thay vì làm theo cách này, mình tạo react-app bằng lệnh npx create-react-app xong mình install lại các thư viện như web-pack, react ver17... như video được kh ạ? Và cũng hỏi là install ở dependencies thay vì devDependencies được kh ạ? Mong anh trả lời
Được bạn nhé, các ver cũ vẫn còn mà. Install vào dependencies thì một số cái không cần cho Production vẫn được vào bản build thì không tối ưu cho lắm thôi còn vẫn được nhé bạn.
anh ơi cho em hỏi chút với ạ: Em đang dựng project với webpack, trường hợp 2 file cùng import các file file kgiống nhau trong cùng 1 page hoặc giuã các page thì có cách nào file build ra không bị duplicate code khônng ạ? Mong nhân được câu trả lời từ anh
Vì Babel đã được Webpack sử dụng trong quá trinh combine rồi bạn nhé, trong thẻ script tại index.html nay đã là code Javascript (đầu ra của Webpack + Babel) rồi bạn nhé.
Khi e thử tổ chức lại code theo webpack5 thì e gặp lỗi này "Webpack 5; TypeError: compiler.plugin is not a function at Jarvis.apply" tại đây plugins: [ new Jarvis({ port: Math.floor(1000 + Math.random() * 9000), }), ], Không biết lỗi này sửa sao vậy a?, mong a sớm ra sơm phần 2 tích hợp scss vào ạ, cám ơn a!.😀
Không em, cái dùng Webpack này nếu có người chỉ thì nên học trước, không thì vào create-react-app trước. Rảnh thì tìm hiểu về nền móng sau cũng được. Nếu có điều kiện thời gian + mentor thì lại nên học từ base trước.
tại sao terminal em hiện như này a nhỉ :PS C:\Users\HOANG TRAN MINH\html\1.....REACT\du an\React-wedpack> npm start npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: C:\Users\HOANG TRAN MINH\AppData\Local pm-cache\_logs\2023-12-12T04_19_03_877Z-debug-0.log
👉👉👉 Bài kế tiếp chúng ta sẽ học cách sử dụng công cụ "create-react-app" để tạo dự án làm việc với ReactJS. Tuy nhiên khi dùng "create-react-app" chúng ta chỉ cần chạy 1 command-line là xong, đôi khi điều này quá dễ dàng làm chúng ta không hiểu dự án đó được xây dựng như thế nào. Video này mình sẽ hướng dẫn cách bạn cách sử dụng Webpack để tạo một dự án làm việc với ReactJS. Video này rất phù hợp với các bạn muốn đào sâu hiểu bản chất của những thứ mình làm 😍😍😍
Link blog hướng dẫn: fullstack.edu.vn/blog/phan-1-tao-du-an-reactjs-voi-webpack-va-babel.html
anh ơi, "create-react-app" anh nhỉ?
@@ngoctinhnguyen1885 Đúng rồi em ơi, anh nhầm đó, anh đã update lại em nhé 😍
Cảm ơn anh vì video này, đó giờ em không biết nó chạy như nào, toàn dùng thôi. Giờ mới được tận tay tái tạo ra nó
ok anh
anh ơi em bị bóa lỗi ở webpack.config ko thấy cái này ./src/index.js
- Những kênh khác dạy bạn: "Muốn xuống dòng, nhấn Enter".
- F8 dạy bạn: "Tại sao nhấn Enter lại xuống được dòng".
nhiều khóa học hiện nay chú trọng vào cách viết component cho hiệu quả chứ ít khóa nào giải thích từ khâu config, giải thích package.json tới khâu thực hành như anh
chuẩn, lúc mới học mình rất thắc mắc mà sợ bị lan man nên chỉ tập chung vào code.
cách dạy của a sơn nó toàn diện hơn.
@@amegafuri Cảm ơn các em nha
Đúng chuẩn FULL STACK. Mọi thứ mà 1 dev cần biết và phải biết
Quá nhiều thứ hay ho trong một video cảm ơn anh sơn rất nhiều ạ
Em cảm ơn anh Sơn vì bài giảng bổ ích này, nhờ hiểu rõ cấu trúc mà em fix đc khá nhiều lỗi luôn ạ
Cảm ơn em nhaaa
Đợi chờ video của a từng giây từng phút. Dù đã có đọc doc a hướng dẫn nhưng vẫn thích nghe a giảng hơn 😁😁😁
Nhờ video này mà e hiểu hơn về create -react-app . Cảm ơn anh nhiều . Chúc anh mau khỏe để tạo nhiều khóa học bổ ích nữa ạ. Luôn ủng hộ anh 👍👍
Nhờ anh em ít tốn kha khá thời gian, cảm ơn anh rất nhiều ^^ (webpack-dev-server)
Ngoài lệnh clear ra thì các bạn có thể dùng Ctrl + l (Chữ L không phải chữ i ngắn nhé) để clear screen. Mình không biết windows có hay không nhưng mac và linux thì ok nhé. Và npm i thay cho npm install . Ctrl + ` để bật tắt terminal với vscode nhé, hy vọng mấy cái nhỏ này sẽ giúp mấy bạn code lẹ hơn hehe
Hay quá thank em nhé
bài này quá hay luôn anh. nhiều người học React mà chưa tìm hiểu đến
Em thấy gần đây có thằng Vite khá được chuộng và nhanh, anh làm video so sánh về Vite và webpack đi ạ
Quá hay anh ạ.Em nghĩ anh nên làm 1 khóa có phí để sp các bạn nào có nhu cầu học sâu 1 cách chi tiết hơn
Kết thúc bằng câu lệnh, chúng ta dừng bài học đơn giản này ở đây thôi??? Trời ơi quá trời thứ luôn.
E cũng đang học cái webpack này viết chrome extension, tự dưng thấy a dạy luôn :)))
Dựng luôn react mà viết chrome ext cũng hay em ơi
Được quá a
Chờ 2 ngày cuối cùng anh cũng ra clip
Trông anh vẫn đang chưa khoẻ lắm thì phải, giữ gìn sức khoẻ nha anh!! ✊
Thấy chữ webpack là mê rồi!
lúc init thay vì ấn enter nhiều lần thì bạn có thể thêm -y là đc
Mừng quá, anh ra clip rồi : ))
Chờ anh mãi >>>
Hóng những ngày tiếp theo quá anh ơi
mình thấy bạn vẫn chưa khỏe lắm đâu, nên nghỉ ngơi thêm đi. Cố gắng giữ gìn sức khỏe đi.
Cảm ơn bạn, tinh thế, mình vẫn hơi mệt nhưng sợ anh em phải chờ lâu.
@@F8VNOfficial ok, cố gắng giữ gìn sức khỏe nhé.
em dang hoc khoa react js tren f8( 5%) thi co nen tiep tuc xem video nay hay la hoc tiep khoa reactjs xong roi quay lai day coi video nay hay hoc react toi mot muc do nao do roi moi co the xem vidoe nay a;]]]
cảm ơn a Sơn nha
Có series Nextjs luôn không anh ?
cho e hỏi mình có hướng dẫn về uploadfile với nodejs reactjs chưa ạ. Nếu có thì cho em xin link video với ạ. Em cảm ơn!
Hi vọng bạn làm luôn clip để deploy lên server luôn. Cách cấu hình như thế nào nữa nhé!
Video đang được upload dần bên khóa WSL - Ubuntu trên fullstack.edu.vn/ bạn nhé
Anh không quảng cáo khóa Nodejs vào học phát là hiểu ngay bài này :v
chuc a son khoe manh nha mai~ iu
Trên Windows bấm phím Ctrl + ` (Phím ` nằm dưới nút Esc) sẽ hiện hoặc ẩn terminal
Hay quá, bạn nào dùng Window tham khảo nhé. Cảm ơn em nhé 😍
A cho e hỏi: máy e khá yếu nên e cài win lite, nó cũng k thiếu thốn gì nhiều nhưng nó k thể mở terminal trên vscode dc, mà phải tự đến folder r mở bằng command prompt. A có cách nào k ạ?
Trước kia e dùng vuejs em dùng php để tách script và template trong tất cả các file khác và minify luôn tạo thành 2 file html và js cơ. Nhưng cái e làm hơi khó dùng, cũng khó debug luôn nên e tắt cái minify đi. Lúc nào code xong 1 đoạn muốn test lại phải chạy localhost:3000/build để nó chạy 😅😅
Thế thì em tìm hiểu về từ khoá "Source map" nhé
À dùng PHP thì khó rồi, anh tưởng dùng webpack
Hay quá anh
Sao mình làm theo hướng dẫn, ngoài việc sinh ra thư mục build, nó còn sinh ra thư mục 'dist' và trong thư mục này có 1 file tên là main.js nữa. Hịc
Link blog sao không vô được anh ơi
em cài nó ở ô D không biết khi mà em cài lại win nó có ảnh hưởng gì đến mấy cái package này không anh Sơn?
a Sơn ơi, e chạy dự án bằng CRA mà trong console nó chỉ hiện một file là bundle.js làm e fix bug rất khó, a có cách nào khắc phục lỗi này không ạ?
quá xịn xò
Em đã tạo như anh và project chạy được rồi nhưng đến đoạn install html-webpack-plugins em đã thêm vào trong config của webpack mà khi start thì nó lại không build cho em cái file html ra ạ. Anh có thể cho em biết có vấn đề em đang gặp phải vấn đề gì không?
Cho hỏi là nếu thay vì làm theo cách này, mình tạo react-app bằng lệnh npx create-react-app xong mình install lại các thư viện như web-pack, react ver17... như video được kh ạ? Và cũng hỏi là install ở dependencies thay vì devDependencies được kh ạ? Mong anh trả lời
Được bạn nhé, các ver cũ vẫn còn mà. Install vào dependencies thì một số cái không cần cho Production vẫn được vào bản build thì không tối ưu cho lắm thôi còn vẫn được nhé bạn.
A Sơn cho em hỏi em dùng câu lệnh install babel copy của a mà nó hiện ra đống lỗi ( line 1 char 13 undecogiz ....)
Bạn biết cách fix chưa. Nếu chưa mình chỉ cho bạn
@@anthien4512 fix ntn v bạn
Visual Code của em khi bấm ! tab nó không hiện template html ở file index.html là do thiếu tiện ích nào à F8 ơi.
bạn thử gõ: Doc xong enter
@@tuannguyenhuu964 Cũng không được bác à, html5 xong tab thì được, chắc do ext nào khác đè lệnh lên chăng
anh ơi cho em hỏi chút với ạ: Em đang dựng project với webpack, trường hợp 2 file cùng import các file file kgiống nhau trong cùng 1 page hoặc giuã các page thì có cách nào file build ra không bị duplicate code khônng ạ? Mong nhân được câu trả lời từ anh
ai ơi sao e npm start báo lỗi a, k ra buil
Anh ơi cho em hỏi là tại sao mình import index.js vào thì nó lại không chạy hả anh
Hi, các b có thắc mắc tại sao trong script (trong file index.html) giờ lại ko cần type="text/babel" nữa không nhỉ?
Vì Babel đã được Webpack sử dụng trong quá trinh combine rồi bạn nhé, trong thẻ script tại index.html nay đã là code Javascript (đầu ra của Webpack + Babel) rồi bạn nhé.
Admin cho em hỏi sao lúc em npm start nó tạo thêm thư mục dist nữa vậy anh?
Thư mục chứa các file được build ra đó bạn, được cấu hình trong file cấu hình webpack đó bạn ơi
copy forder gốc ra cái khác r chạy có chạy đc kh shop
Được nha bạn ơi
Anh ơi cho em hỏi sao cái file index.js em lưu nó cứ bị lỗi
Đoạn npm start em bị lỗi: “ [webpack-cli] error cannot find module '../lib/statuses' “. Nhờ anh và mọi người chỉ giúp em sửa lỗi này với ạ!
Mình gặp lỗi giống bạn ý. Ko pit bạn tìm ra chx😅
Khi e thử tổ chức lại code theo webpack5 thì e gặp lỗi này "Webpack 5; TypeError: compiler.plugin is not a function at Jarvis.apply" tại đây
plugins: [
new Jarvis({
port: Math.floor(1000 + Math.random() * 9000),
}),
],
Không biết lỗi này sửa sao vậy a?, mong a sớm ra sơm phần 2 tích hợp scss vào ạ, cám ơn a!.😀
e xài cái này với django cũng setup y như v
hay quá anh
có ai làm đến bước chạy npm start mà nó ra file dist/main.js không ạ
blog có chỗ sai chính tả anh ơi
"đơn giản là support chuyển đổi ES6, ES7, ES8, ES... về ES5"
Em dùng "npx create-react-app ." để tạo project
Thì nó tự build hết cho mình, có đốt cháy giai đoạn quá kh anh?
Không em, cái dùng Webpack này nếu có người chỉ thì nên học trước, không thì vào create-react-app trước. Rảnh thì tìm hiểu về nền móng sau cũng được. Nếu có điều kiện thời gian + mentor thì lại nên học từ base trước.
a ơi, cho e xin info cái ghê a ngồi với ạ @@
❤
em thắc mắt sao a k dùng creat-react-app z a
Bài học học để hiểu bản chất hơn em ạ. Bài sau dùng create-react-app nhé
@@F8VNOfficial dạ tại e chưa để ý mục sau ạ
Mỗi lần tạo 1 dự án là phải làm nhiều bước như thế này đúng k anh? Em thấy rối quá :'(
Học để hiểu bản chất thôi em, chứ sau em tạo 1 dự án chạy có 1 dòng lệnh là xong à (anh có hướng dẫn ở vài videos sau đó)
hiện tại kênh đc 100k sub chưa anh nhỉ
200k sub
đùa thôi anh Sơn có tầm 5k sub
theo kinh nghiệm mình đoán cỡ 25k thôi bạn.
@ bên group hơn 30k thành viên mà coa 25k sub thì hơi buồn
@@nguyenquocan8949 cái này chỉ là mình đoán thôi thôi bạn à.
mình thắc mắc là tại sao thầy ko ra khóa PHP mọi người nhỉ ??
Vì chưa có đủ thời gian em ơi
đỡ bịnh chưa anh
nice sờ
Hú ae :v
tại sao terminal em hiện như này a nhỉ :PS C:\Users\HOANG TRAN MINH\html\1.....REACT\du an\React-wedpack> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in: C:\Users\HOANG TRAN MINH\AppData\Local
pm-cache\_logs\2023-12-12T04_19_03_877Z-debug-0.log
Ko có script “start” đó em ơi
em thêm rồi mà không được anh ạ@@F8VNOfficial
e chưa lưu file a ạ , e thấy nhiều bạn dùng window có lỗi giống em á , anh nhắc mn cái ạ
@@F8VNOfficial
anh ơi sao em chạy lên "npm start nó không build ra file bundle ạ "