Create ReactJS Project Structure

Nguyen_Dinh_Nam · February 12, 2018, 4:45pm

Xin chào các pro, em thực sự là newbie mới tìm hiểu về reactjs.

Khi em tạo project bằng các gói tạo sẵn trên npm thì nó tự sinh ra cấu trúc thư mục file.
Vì em muốn hiểu được luồng chạy của react nên em muốn tự modify cấu trúc thư mục về dạng client-server đơn giản nhất.
Em đã tìm rất nhiều kiểu cấu trúc trên internet nhưng thực sự cái nào cũng phải run react-scripts start => để chạy script có sẵn trong node module, muốn đổi index.html vs index.js hay public thư mục đều phải custom lại trong node_module. điều này khi update code từ npm sẽ gây ra mất code. => việc custom lại cấu trúc file theo ý thích khá khó khăn với beginer tụi em.

Không biết có pro nào đã từng tìm hiểu luồng react cụ thể để mai này có thể modify tùy ý chưa ạ.
Có thể cho em xin 1 link git simple project react không ạ.

Em cảm ơn mọi người ạ

P/s: Đơn giản là chạy 1 project chỉ cần vài file js đơn giản chẳng hạn. Chứ hiện tại nó tự gen cấu trúc thư mục em mò khó quá.

thangngoc89 · February 12, 2018, 5:07pm

Mình làm việc rất nhiều với react, dùng create-react-app cũng có, cấu hình từ đầu cũng có rồi. Nhưng mới newbie, mình thành thật khuyên là hãy dùng create-react-app vì có thể mất cả tuần để cấu hình app react cho đúng.

Nguyen_Dinh_Nam · February 13, 2018, 5:48am

Thank Anh,
nhưng hiện tại em muốn tích hợp thêm folder bên server side thì phải xây dựng ra sao để phần node_module có thể để cả client và server đều dùng được ạ.
Em đã tìm hiểu MERN nhưng nó có nhiều file cấu hình râu ria mà em không hề muốn động tới , ví dụ nó có cả docker mà trong khi đó em chưa mò về docker bao giờ, nên hiện tại em muốn trong project chỉ có những phần mà em thực sự hiểu rõ.

Như phần bên Express thì có các express-generator có truyền các tham số -ejs các kiểu để cho mình có thể dễ dàng custom lại cây thư mục.

Dao_An · February 13, 2018, 6:53am

thangngoc89 · February 13, 2018, 9:00am

Trừ khi bạn dùng SSR thì cần tích hợp với express, còn lại thì nên tách riêng client side với sẻver side ra để dễ quản lí dependencies, vì gộp 2 cái lại một hồi nó nhảy lên cả trăm dependencies

Với lại như vậy sẽ giúp bạn dùng cấu trúc thư mục của mỗi thằng mà ko cần thay đổi nhiều. CRA thì rất đơn giản, cần mỗi cái App.JS, còn lại thư mục bạn xếp mấy tầng cũng dc