Tạo dự án với React và Webpack | React JS
Вставка
- Опубліковано 28 вер 2021
- 👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
Trong video này chúng ta sẽ cùng nhau đi vào tạo dự án với React và Webpack | React JS
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-...
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8 #react
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức. - Наука та технологія
👉👉👉 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".
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 👍👍
Đợ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 😁😁😁
Đúng chuẩn FULL STACK. Mọi thứ mà 1 dev cần biết và phải biết
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é
Nhờ anh em ít tốn kha khá thời gian, cảm ơn anh rất nhiều ^^ (webpack-dev-server)
bài này quá hay luôn anh. nhiều người học React mà chưa tìm hiểu đến
Chờ 2 ngày cuối cùng anh cũng ra clip
Hóng những ngày tiếp theo quá anh ơ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
Thấy chữ webpack là mê rồi!
Mừng quá, anh ra clip rồi : ))
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
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 ạ
Chờ anh mãi >>>
Trông anh vẫn đang chưa khoẻ lắm thì phải, giữ gìn sức khoẻ nha anh!! ✊
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.
lúc init thay vì ấn enter nhiều lần thì bạn có thể thêm -y là đc
chuc a son khoe manh nha mai~ iu
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
cảm ơn a Sơn nha
Hay quá anh
hay quá anh
quá xịn xò
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;]]]
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
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
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
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?
Có series Nextjs luôn không anh ?
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
❤
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!
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 ạ?
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 đã 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?
e xài cái này với django cũng setup y như v
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
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 ạ?
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
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!.😀
Link blog sao không vô được anh ơi
có ai làm đến bước chạy npm start mà nó ra file dist/main.js không ạ
Anh ơi cho em hỏi sao cái file index.js em lưu nó cứ bị lỗi
a ơi, cho e xin info cái ghê a ngồi với ạ @@
anh ơi sao em chạy lên "npm start nó không build ra file bundle ạ "
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é.
ai ơi sao e npm start báo lỗi a, k ra buil
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.
nice sờ
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.
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
blog có chỗ sai chính tả anh ơi
"đơn giản là support chuyển đổi ES6, ES7, ES8, ES... về ES5"
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 đó)
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
Đ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😅
đỡ bịnh chưa anh
copy forder gốc ra cái khác r chạy có chạy đc kh shop
Được nha bạn ơi
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 à.
Hú ae :v
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
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 ạ
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