Mặc dù GatsbyJS là framework React, nhưng biết cách thêm JavaScript tùy chỉnh vào dự án Gatsby khá hữu ích. Có thể bạn vừa chuyển trang cũ sang Gatsby, và có đống custom vanilla JavaScript không thực sự muốn chuyển sang cú pháp ReactJS ngay — tôi hiểu.
May mắn thay thêm plain JavaScript vào Gatsby không khó chút nào, chỉ cần expose file đơn giản html.js, file này không hiển thị trong dự án Gatsby mặc định.
Để expose (làm sẵn sàng) file html.js, mở terminal, điều hướng đến thư mục gốc dự án Gatsby, và chạy:
cp .cache/default-html.js src/html.jsGiờ html.js có sẵn trong thư mục src dự án Gatsby.
Bên trong file html.js có đống cú pháp HTML bạn có thể nhận ra. Đừng động chạm mã hiện có, nhưng chú ý phần tử div có thuộc tính dangerouslySetInnerHTML. Chúng ta cần dùng cùng thuộc tính, với phần tử <script>.
Sao chép & dán đoạn sau ngay trên thẻ đóng body </body> của file html.js:
<script dangerouslySetInnerHTML={{ __html: ` console.log('Plain JavaScript inside Gatsby!'); ` }} />Lưu thay đổi, khởi động server Gatsby, hoặc refresh tab trình duyệt nếu Gatsby đang chạy. Nếu làm đúng, bạn sẽ thấy thông báo sau trong chrome console:
Plain JavaScript inside Gatsby!Thử thêm sự kiện click với alert bên trong phần tử script:
document.body.addEventListener('click', function() { alert('JavaScript!') })Giờ khi click bất kỳ đâu trên trang, sẽ bật alert "JavaScript!".
Tài nguyên:
Xem docs chính thức GatsbyJS về (adding custom JavaScript)[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]