Download modern js - Download Kode Sumber modern js

modern js

Kode sumber lainnya

1.0.0

Unduh

Jalan menuju JavaScript modern dan bereaksi

Tujuan dari panduan ini adalah untuk memberikan daftar beberapa sumber daya gratis (artikel, buku, video?) Yang akan membantu Anda mempelajari JavaScript modern dan Perpustakaan React.

️ Panduan ini tidak dimaksudkan untuk mendaftar semua yang harus Anda ketahui tentang JavaScript atau React. Saya sudah mencoba membuat daftar apa yang bisa berguna jika Anda benar -benar baru di dunia ini berdasarkan pengalaman saya dan orang -orang yang saya temui. Jika hal favorit Anda tidak terdaftar di sana, itu tidak berarti saya tidak menyukainya atau tidak setuju. Misalnya TypeScript atau GraphQL bagus, tapi saya pikir tidak wajib untuk mempelajarinya sebagai pertama sebagai pemula .

1) JavaScript modern?

Tutorial yang mencakup semuanya:

Pelajari Pengembangan Web juga akan mengajarkan Anda HTML dan CSS.
JavaScript yang fasih sempurna untuk mempelajari JS dan konsep pemrograman umum.
Tutorial JavaScript modern bagaimana hal itu dilakukan sekarang. Dari dasar -dasar hingga topik canggih dengan penjelasan yang sederhana namun terperinci.
Belajar ES6 (ECMASCRIPT 2015)? Jika Anda biasa menulis JavaScript beberapa waktu yang lalu dan ingin mengejar ketinggalan dengan sintaksis modern.

Artikel dan video yang saya sukai:

Javascript modern dijelaskan untuk dinosaurus Anda akan belajar dasar -dasar tentang NPM, Babel, Webpack dll. Dan sejarah di baliknya.
Memahami pengangkat dalam JavaScript jika Anda berasal dari bahasa pemrograman lain, Anda mungkin merasa tidak nyaman dengan bagaimana kami dapat mendeklarasikan variabel dalam JS. Artikel ini akan membantu Anda merasa lebih baik!
Debug Javascript? Firefox atau Edge juga memiliki devtools mereka sendiri, tetapi saya pribadi lebih suka menggunakan chrome saat pengkodean.
Pemrograman fungsional dalam JavaScript? Video -video itu dibuat oleh mantan pengembang JS Spotify. Dia akan mengajari Anda konsep -konsep penting seperti janji, penutupan atau fungsi tingkat tinggi. Hal -hal itu sangat penting dalam bereaksi.
Komposisi atas warisan? Di sekolah saya harus melakukan banyak pemrograman berorientasi objek. Video ini membantu saya memahami mengapa itu tidak selalu diperlukan.

Dokumentasi

Terkadang Anda perlu mencari dokumentasi, misalnya jika Anda tidak tahu kata kunci tertentu dalam basis kode atau Anda ingin belajar cara menggunakan fungsi asli. Tentu saja Anda dapat menggunakan mesin pencari atau stackoverflow apa pun tetapi saya akan merekomendasikan menggunakan dokumen web MDN.

2) Bereaksi ⚛️

What Is React: Pengantar visual untuk pemula
JavaScript untuk diketahui untuk bereaksi
Dokter resmi adalah tempat terbaik untuk belajar bereaksi.
Panduan Pemula untuk Bereaksi?
Tip Bereaksi Progresif Untuk Membuat Performant Situs React Anda. Web.Dev juga memiliki banyak artikel seperti itu.
Pola belajar pola untuk membangun aplikasi web yang kuat dengan vanilla javascript dan bereaksi.

Hooks? Komponen kelas

Pengaitnya sangat spesifik, saya sarankan Anda memeriksa mengapa reaksi kait? ? Untuk mempelajari lebih lanjut tentang sejarah React dan atau mengapa kita sekarang menggunakan kait. Anda mungkin juga ingin belajar tentang komponen kelas dan beberapa pola yang digunakan untuk berbagi logika antar komponen (sebelum kedatangan kait) karena masih ada di banyak basis kode:

Bandingkan Diagram Aliran Hook dengan diagram metode siklus hidup komponen kelas
Komponen Orde Tinggi: Pola Desain Aplikasi Bereaksi
Membuat alat peraga

Manajemen negara dan perpustakaan lainnya

Pada titik tertentu Anda mungkin berpikir akan menyenangkan untuk memiliki akses ke beberapa jenis keadaan global dalam komponen reaksi apa pun untuk menghindari pembasahan alat peraga berulang -ulang ... orang mungkin memberi tahu Anda untuk menggunakan Redux atau Mobx atau Apollo atau XState atau [masukkan nama perpustakaan populer] untuk mencapainya tetapi mungkin terlalu terbebani! Saya akan merekomendasikan membaca artikel React State Management Libraries dan cara memilih untuk mendapatkan gambaran yang bagus. Perpustakaan Bereaksi untuk 2023 juga akan mengatasi subjek ini dan banyak lagi!

3) Apa selanjutnya!? ?

Tetap up to date dan temukan hal -hal baru dengan buletin react dan buletin bytes;
Berlatih Bereaksi dengan Create-React-App atau langsung di browser Anda di CodesandBox
Bangun aplikasi siap produksi dengan: vite, next.js, gatsby, bereaksi asli melalui expo;

Bagaimana dengan styling? ?

Beberapa dasar

Pelajari CSS kursus CSS Evergreen dan referensi untuk meningkatkan keahlian penataan web Anda.
CSS modern dijelaskan untuk dinosaurus
CSS-IN-JS atau CSS-dan-JS
Styling dan CSS Resmi React Doc

Perpustakaan somne yang dapat Anda gunakan untuk mengelola gaya Anda:

Tailwind
Modul CSS
vanilla-ekstrak
Emosi
Komponen gaya, saya pikir mereka adalah yang terbaik di antara pilihan bagi mereka yang terbiasa menulis CSS "klasik" dan ingin mengambil keuntungan dari mencampurnya dengan JavaScript.

Sistem Desain

Mungkin Anda hanya ingin membangun aplikasi dan menghindari menghabiskan banyak waktu menulis CSS dan HTML. Saya sarankan Anda menggunakan perpustakaan seperti material-UI, desain semut atau polaris. Jika Anda ingin membangun sistem desain Anda sendiri, saya akan menyarankan Anda untuk membaca desain atom.

Bagaimana dengan pengujian? ?

Tapi sungguh, apa itu tes JavaScript?
Cara Menggunakan Tutorial Perpustakaan Pengujian Bereaksi Memahami Jest dan belajar cara menulis tes otomatis melalui Perpustakaan Pengujian React (ada pustaka pengujian lainnya tetapi RTL adalah yang hebat yang direkomendasikan oleh DOC resmi).
Memahami ejekan ejek ejekan adalah teknik untuk mengisolasi subjek uji dengan mengganti dependensi dengan objek yang dapat Anda kendalikan dan periksa.
Mengapa Cypress? ? perpustakaan untuk menulis tes ujung ke ujung dan banyak lagi;

Alat lain yang saya default

Editor Kode: VS Code;
Formatter Kode Otomatis: Prettier;
Linter: eslint;
Kelola Git melalui UI alih -alih perintah: SourceTree atau VS Code;
Membangun dan menggunakan aplikasi Anda: netlify;
Integrasi Berkelanjutan: Travis CI;
Beli Nama Domain: Google Domains;

Perpustakaan Lain Saya Default

Routing: React-Router;
Internasionalisasi: Linguijs;
Kembangkan komponen Anda secara terpisah dan bagikan kepada tim Anda melalui buku cerita. Menyebarkan buku cerita Anda dan menjalankan tes tangkapan layar pada setiap cerita melalui Chromatic;
API Mocking Saat Menguji: Pekerja Layanan Mock;