30 Days Of React
1.0.0
Pelajari dengan Asabeneh dengan bergabung dengan bootcamp coding yang akan datang
Penulis: Asabeneh Yetayeh
Oktober, 2020
Hari 1 >>
| # Hari | Topik |
|---|---|
| 00 | Perkenalan Cara menggunakan repo Persyaratan Pengaturan |
| 01 | Penyegaran JavaScript |
| 02 | Mulai bereaksi |
| 03 | Menyiapkan |
| 04 | Komponen |
| 05 | Alat peraga |
| 06 | Daftar, Peta dan Kunci |
| 07 | Komponen kelas |
| 08 | Negara bagian |
| 09 | Rendering bersyarat |
| 10 | Bereaksi Struktur Folder Proyek |
| 11 | Acara |
| 12 | Bentuk |
| 13 | Komponen terkontrol dan tidak terkendali |
| 14 | Siklus Kehidupan Komponen |
| 15 | Paket pihak ketiga |
| 16 | Komponen orde tinggi |
| 17 | Bereaksi router |
| 18 | Ambil versus Axios |
| 19 | Proyek |
| 20 | Proyek |
| 21 | Kait |
| 22 | Formulir Menggunakan Hook |
| 23 | Mengambil data menggunakan kait |
| 24 | Proyek menggunakan kait |
| 25 | Kait khusus |
| 26 | Konteks |
| 27 | Ref |
| 28 | proyek |
| 29 | Mengeksplorasi |
| 30 | Kesimpulan |
??? Happy Coding ???
Selamat atas memutuskan untuk berpartisipasi dalam 30 hari reaksi tantangan pemrograman. Dalam tantangan ini Anda akan mempelajari semua yang perlu Anda gunakan untuk mengembangkan aplikasi React. Di akhir tantangan Anda akan mendapatkan sertifikat penyelesaian tantangan pemrograman 30 hari. Jika Anda membutuhkan bantuan atau jika Anda ingin membantu orang lain, Anda dapat bergabung dengan grup telegram.
Tantangan 30daysofreact adalah panduan untuk pemula dan JavaScript lanjutan dan pengembang React. Selamat datang di 30 hari bereaksi. React adalah perpustakaan JavaScript. Saya menikmati menggunakan dan mengajar bereaksi dan saya harap Anda juga akan melakukannya. Pada langkah demi langkah ini 30 hari reaksi tantangan, Anda akan belajar bereaksi yang merupakan salah satu dari perpustakaan JavaScript antarmuka paling populer. Bereaksi dapat melakukan semua yang bisa dilakukan JavaScript. React dapat digunakan untuk menambahkan interaktivitas ke situs web, untuk mengembangkan aplikasi seluler, aplikasi desktop, game . Saya yakin Anda akan belajar cukup banyak dalam 30 hari ke depan dan keterampilan pemrograman dan pemecahan masalah Anda juga akan meningkat secara signifikan.
Saya akan menggunakan bahasa Inggris percakapan dan lebih sedikit jargon untuk menulis tantangan ini. Konten akan terus diperbarui. Jika Anda menemukan kesalahan ketik atau tata bahasa, jangan kaget karena saya tidak melakukan bukti yang dibaca sebelum saya mempublikasikannya. Saya akan merekomendasikan Anda untuk fokus pada pesan utama tantangan alih -alih bahasa Inggris dan beberapa kesalahan kecil. Saya sangat menghargai jika Anda mengirimi saya permintaan tarik untuk perbaikan dan ingat untuk menarik terlebih dahulu dari master sebelum Anda mengirim permintaan tarik. Sebagian besar gambar yang saya gunakan dalam tantangan ini berasal dari tantangan 30daysofjavaScript karena itu Anda mungkin perlu mengganti nama nama file dan folder 30DaySofReact. Jika Anda pandai dalam array, loop, fungsi, objek, pemrograman fungsional, perusakan dan penyebaran dan kelas maka Anda akan dapat mengikuti tantangan dengan benar. Kalau tidak, saya sangat menyarankan Anda untuk memeriksa 30daysofjavascript.
Sebelum Anda menyelami kursus ini, Anda dapat memeriksa ulasan 30 hari bereaksi.
Tantangan ini mudah dibaca, ditulis dalam bahasa Inggris percakapan, menarik, memotivasi dan pada saat yang sama, sangat menuntut. Anda perlu mengalokasikan banyak waktu untuk menyelesaikan tantangan ini. Jika Anda seorang pelajar visual, Anda mungkin mendapatkan pelajaran video di saluran YouTube Washera. Berlangganan saluran, komentar dan ajukan pertanyaan di youtube vides dan jadilah proaktif, penulis pada akhirnya akan memperhatikan Anda.
Penulis suka mendengar pendapat Anda tentang tantangan, membagikan pemikiran Anda tentang tantangan 30 hari. Anda dapat meninggalkan kesaksian Anda di tautan ini
Pelajari dengan Asabeneh dengan bergabung dengan bootcamp coding yang akan datang
Untuk bergaul dengan tantangan, Anda harus memiliki berikut:
Bintangi repo ini untuk mendukung pekerjaan ini dan garpu repo untuk membuat salinan Anda sendiri agar berfungsi.
Anda harus selalu bekerja langsung dari salinan bercabang Anda.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-ReactUntuk menyelesaikan latihan sehari -hari, saran saya adalah membuat cabang terpisah untuk menampung folder latihan Anda atau perubahan lain yang Anda buat. Ini akan membuat cabang utama Anda tetap bersih setiap saat, yang berarti tuan Anda akan selalu mirip dengan master asli.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existDi cabang baru Anda, Anda dapat menggunakan file/folder untuk menyusun solusi Anda untuk latihan sehari -hari
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileMelakukan solusi Anda untuk garpu Anda
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierRepo ini akan diperbarui setiap hari sepanjang bulan. Ketika konten hari baru tersedia, Anda dapat memperbarui salinan bercabang dengan langkah -langkah di bawah ini.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterPerhatikan bahwa pembaruan hanya diterapkan pada cabang master. Jika Anda ingin memperbarui cabang lain, ulangi langkah 6-7 dengan nama cabang. Lihat Cuplikan di bawah untuk Cabang
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsSaya yakin Anda memiliki motivasi dan keinginan yang kuat untuk menjadi pengembang, komputer dan internet. Selain HTML tingkat menengah ke tingkat menengah, CSS dan JS. Jika Anda memilikinya, maka Anda memiliki segalanya untuk memulai.
Anda mungkin tidak memerlukan node.js sekarang tetapi Anda mungkin membutuhkannya untuk nanti. Instal Node.js.
Setelah mengunduh klik dua kali dan instal
Kami dapat memeriksa apakah node diinstal pada mesin lokal kami dengan membuka terminal perangkat atau prompt perintah kami.
asabeneh $ node -v
v12.14.0Saat membuat tutorial ini saya menggunakan Node versi 12.14.0, tetapi sekarang versi yang disarankan dari Node.js untuk diunduh adalah 12.17.0.
Ada banyak browser di luar sana. Namun, saya sangat merekomendasikan Google Chrome.
Instal Google Chrome jika Anda belum memilikinya. Kami dapat menulis kode javascript kecil di konsol browser, tetapi kami tidak menggunakan konsol browser untuk mengembangkan aplikasi.
Anda dapat membuka konsol Google Chrome baik dengan mengklik tiga titik di sudut kanan atas browser, memilih lebih banyak alat -> alat pengembang atau menggunakan pintasan keyboard. Saya lebih suka menggunakan pintasan.
Untuk membuka konsol chrome menggunakan pintasan keyboard. Adalah baik untuk mengetahui jalan pintas juga sebagai JavaScript dan React Developer Anda akan menghabiskan banyak waktu di konsol browser dan jangan malas untuk membukanya selama pengembangan.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Setelah Anda membuka konsol Google Chrome, cobalah untuk menjelajahi tombol yang ditandai. Kami akan menghabiskan sebagian besar waktu di konsol. Konsol adalah tempat di mana kode JavaScript Anda pergi. Mesin Google Console V8 mengubah kode JavaScript Anda menjadi kode mesin. Mari kita tulis kode JavaScript di google chrome console:
Kami dapat menulis kode JavaScript apa pun di Google Console atau konsol browser apa pun. Namun, untuk tantangan ini, kami hanya fokus pada konsol Google Chrome. Buka konsol menggunakan:
Mac
Command+Option+I
Windows:
Ctl+Shift+IUntuk menulis kode JavaScript pertama kami, kami menggunakan function console.log () bawaan. Kami meneruskan argumen sebagai data input, dan fungsi menampilkan output. Kami melewati 'halo, dunia' sebagai data input atau argumen dalam fungsi Console.log ().
console . log ( 'Hello, World!' ) Fungsi Console.log () dapat mengambil beberapa parameter yang dipisahkan oleh koma. Sintaks terlihat seperti sebagai berikut: Console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )Seperti yang dapat Anda lihat dari kode cuplikan di atas, Console.log () dapat mengambil banyak argumen. Disarankan untuk menggunakan cetakan sebanyak mungkin konsol. Buat hidup Anda mudah dengan menjaga konsol browser tetap terbuka.
Kami menambahkan komentar ke kode kami. Komentar sangat penting untuk membuat kode lebih mudah dibaca dan meninggalkan komentar dalam kode kami. JavaScript tidak menjalankan bagian komentar dari kode kami. Di JavaScript, setiap baris teks yang dimulai dengan // di JavaScript adalah komentar, dan apa pun terlampir seperti ini / * * / juga merupakan komentar.
Contoh: Komentar baris tunggal
// Ini adalah komentar pertama
// ini adalah komentar kedua
// Saya adalah satu komentar satu baris
Contoh: Komentar multiline
/* Ini adalah komentar multiline
Komentar multiline dapat mengambil beberapa baris
Javascript adalah bahasa web
*/
Bahasa pemrograman mirip dengan bahasa manusia. Bahasa Inggris atau banyak bahasa lain menggunakan kata -kata, frasa, kalimat, kalimat majemuk, dan lainnya lainnya untuk menyampaikan pesan yang bermakna. Makna sintaksis bahasa Inggris adalah pengaturan kata dan frasa untuk membuat kalimat yang terbentuk dengan baik dalam suatu bahasa . Definisi teknis sintaks adalah struktur pernyataan dalam bahasa komputer. Bahasa pemrograman memiliki sintaks. JavaScript adalah bahasa pemrograman dan seperti bahasa pemrograman lainnya, ia memiliki sintaksnya sendiri. Jika kita tidak menulis sintaks yang dipahami JavaScript, itu akan meningkatkan berbagai jenis kesalahan. Kami akan mengeksplorasi berbagai jenis kesalahan javascript nanti. Untuk saat ini, mari kita lihat kesalahan sintaksis.
Saya membuat kesalahan yang disengaja. Akibatnya, konsol meningkatkan kesalahan sintaksis. Sebenarnya, sintaksnya sangat informatif. Ini menginformasikan jenis kesalahan apa yang dibuat. Dengan membaca pedoman umpan balik kesalahan, kami dapat memperbaiki sintaks dan memperbaiki masalah. Proses mengidentifikasi dan menghilangkan kesalahan dari suatu program disebut debugging. Mari kita perbaiki kesalahan:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )Sejauh ini, kami melihat cara menampilkan teks menggunakan console.log () . Jika kita mencetak teks atau string menggunakan console.log () , teks harus berada di dalam kutipan tunggal, kutipan ganda, atau kutipan backtick. Contoh:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) Sekarang, mari kita berlatih lebih banyak menulis kode javascript menggunakan console.log () di google chrome konsol untuk tipe data angka. Selain teks, kami juga dapat melakukan perhitungan matematika menggunakan JavaScript. Mari kita lakukan perhitungan sederhana berikut. Konsol dapat secara langsung mengambil argumen tanpa fungsi konsol.log () . Namun, itu termasuk dalam pengantar ini karena sebagian besar tantangan ini akan terjadi dalam editor teks di mana penggunaan fungsi akan wajib. Anda dapat bermain -main secara langsung dengan instruksi di konsol.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Kami dapat menulis kode kami di konsol browser, tetapi itu tidak akan berhasil untuk proyek yang lebih besar. Dalam lingkungan kerja yang nyata, pengembang menggunakan editor kode yang berbeda untuk menulis kode mereka. Dalam 30 hari ini tantangan javascript, kami akan menggunakan kode studio visual.
Visual Studio Code adalah editor teks open-source yang sangat populer. Saya akan merekomendasikan untuk mengunduh kode Visual Studio, tetapi jika Anda mendukung editor lain, jangan ragu untuk mengikuti apa yang Anda miliki.
Jika Anda menginstal kode Visual Studio, mari kita mulai menggunakannya.
Buka kode Visual Studio dengan mengklik dua kali ikonnya. Saat Anda membukanya, Anda akan mendapatkan antarmuka semacam ini. Cobalah untuk berinteraksi dengan ikon berlabel.
Selamat! Anda telah menyelesaikan pengaturan yang Anda butuhkan untuk memulai dengan bereaksi, tetapi sebelum kami menyelami reaksi, mari kita lakukan penyegaran JavaScript. Jika Anda sangat nyaman dengan JavaScript, Anda dapat melewatkan hari 1 JavaScript penyegaran. Bagian Penyegaran Javascript sangat luas dan mungkin memakan waktu lebih dari satu hari. Dari pengalaman saya, orang -orang biasanya terjebak dalam bereaksi karena pengetahuan JavaScript mereka sangat dangkal karena itu untuk mengisi celah itu semua fitur JavaScript yang diperlukan yang dapat digunakan dalam React dicakup dalam bagian Penyegaran JavaScript. Ada banyak latihan tetapi Anda tidak diharuskan untuk menyelesaikannya. Klik di sini jika Anda ingin melewatkan JavaScript dan melompat langsung ke React.
? SELAMAT ! ?
Hari 1 >>
