1

LÀM SAO ĐỂ WEB APP NÓ CHẠY ĐƯỢC TA? (Kì 1)

đăng cách đây 10 tháng

Hồi giờ đa số trên công ty người ta tạo sẵn project React rồi, mình chỉ có code trên đó thôi, còn việc deploy hay làm thế nào để người ta tạo hẳn 1 trang web SPA như vậy thì...chịu. Nếu bạn cũng mơ hồ giống mình

  • Biết React
  • Biết tạo 1 con server đơn giản bằng Node JS (Express) chẳng hạn

Vậy giờ làm thế nào để tạo 1 web như người ta đây? Cái gì mà SPA, deploy, docker, services gì đó nghe chả hiểu gì hết, cùng mình đào sâu nhé

Như thường lệ, trước khi chia sẻ mình muốn nhấn mạnh một điều rằng các bạn ĐỪNG TIN NHỮNG GÌ MÌNH NÓI. Vì sao? Vì đây là chỉ là những kiến thức, trải nghiệm của bản thân mình, nó có thể đúng với mình nhưng chưa chắc đúng với các bạn. Nhưng mình hi vọng những 80% thứ mình chia sẻ ở đây có thể giúp bạn 20% sau này.

✧ ✧ ✧

1. Tạo 1 con server đơn giản

server.pngserver.png

2. Tạo app by React JS

app.pngapp.png
Rồi đó, biết có bí nhiu thâu, giờ seo??? Chịu luôn á!Rồi đó, biết có bí nhiu thâu, giờ seo??? Chịu luôn á!

Đúng rồi mình cũng đang giống bạn đây, vậy thì tiếp tục thôi.

✧ ✧ ✧

3. Webpack

Cái lề gì thốn? webpack gì cha? chi vại???? Ấy ấy bình tĩnh cứ thử tìm hiểu đã nào, chưa gì xoắn hết cả đ*t rồi.

concepts.pngconcepts.png
dg.pngdg.png

Đọc tới đây thì chắc bạn cũng nắm được khái niệm của webpack, còn diễn giải theo tiếng việt thì webpack dùng để đóng gói ứng dụng của bạn. Đóng gói là sao ta, mình cũng k hiểu lắm. Để 1 trang web nó chạy đi, bạn cần gì nhỉ? File css để style nè, scripts nè (k scripts cũng được nếu bạn xài web 1.0), rồi assets nè (image, font, v..v). 

Code React app là viết bằng ES6/ES7, Typescript, JSX browser không thể trực tiếp đọc được những ngôn ngữ này được, vậy thì làm sao, webpack ở đây đóng vai trò là module bundle, cho phép tích hợp các loader (các loader nhận vào input là các file viết bằng Typescript/ ES6/ scss.... ) để compile code của chúng ta ra code mà browser có thể đọc trực tiếp được (es5).

Hiểu hiểu sơ sơ rồi đúng không? Chưa hiểu gì?? không sao, đi tiếp nào.

4. SPA (Single page application)

image.pngimage.png
TraditionalLifecycle.jpgTraditionalLifecycle.jpg

Vậy thì câu hỏi được đặt ra ở đây là? SAO CÁI WEB APP NÓ CHẠY ĐƯỢC nhìn vào hình trên bạn thấy gì? Đó là khi client (user) truy cập vào web đi (gửi req) đến server con server này sẽ trả về 1 file HTML vậy cái file HTML đó phải chứa một cái gì đó mà nó có hết tất cả đúng không? Gọi là bundle đi thì bundle phải có gì? Assets nè, scripts, style, v..v đó đó đóng gói đó. Vậy ai, ai đóng dùm? Ai? Webpack chứ còn ai vào đây nữa!!

Rồi nha hiểu hiểu rồi đúng không, biết biết rồi đúng không? 

https://nextlint.com

Mình vừa giới thiệu sơ lược về SPA, Webpack sắp tới nhờ đón chờ phần tiếp theo nhé? Mình sẽ hướng dẫn các bạn chi tiết hơn về webpack, react, redux, typescripts v...v

1
0
...