Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Seorang teman memberi tahu saya bahwa dia telah lulus dan mulai magang.Namun perusahaan masih menggunakannyaPemandangan, pemimpinnya mengatakan bahwa dia akan diizinkan untuk menggunakannya setelah beberapa saatReaksiSebelum mengerjakan suatu proyek, pelajari sendiri terlebih dahulu.

Saya menemukan beberapa dokumen untuknya. Ngomong-ngomong, karena saya juga menulis blog, sebaiknya saya menulisnya sendiri. Saya harap ini dapat membantu orang yang membutuhkan.

Daftar isi

1 instalasi proyek

1.1 Pilih direktori dan mulai terminal

1.2 Instal perintah buat-reaksi-aplikasi

1.3 Buat proyek

1.4 Lihat file direktori

1.5 Mulai proyek

2 Library pihak ketiga yang pasti akan digunakan

2.1 js-alat-kotak-besar

2.1.1 Kelas waktu dan tanggal

2.1.2 Kelas toko web

2.1.3 Kelas acara

2.1.4 Kelas angka

2.1.5 Kelas string

2.1.6 Kelas verifikasi reguler

2.1.7 kelas ajax

2.1.8 data kelas data

2.1.9 kelas peramban peramban

2.2 praprosesor kurang atau sass

2.3 perpustakaan permintaan aksio

2.4 perpustakaan UI

---

1 instalasi proyek

1.1 Pilih direktori dan mulai terminal

Anda dapat menemukan folder di komputer Anda sebagai direktori untuk mempraktekkan proyek React ini, lalu masukkan "cmd" di URL folder tersebut, terminal akan muncul, dan Anda juga dapat menentukan direktori target:

 

Di sinilah Anda memasukkan "cmd" dan tekan Enter untuk membuka jendela pop-up terminal.

1.2 Instal perintah buat-reaksi-aplikasi

Jalankan perintah berikut, -g artinya menginstalnya secara global

npm install -g buat-reaksi-aplikasi

1.3 Buat proyek

Misalnya kita ingin membuat file bernama js-alat-kotak-besar-bereaksi proyek, maka Anda dapat menjalankan perintah berikut:

buat-aplikasi-reaksi js-alat-kotak-besar-bereaksi

Terminal kemudian akan diinstal,Instalasi mungkin agak lambat, tunggu dengan sabar, seperti terlihat pada gambar di bawah ini setelah instalasi selesai:

1.4 Lihat file direktori

• Direktori publik menyimpan file html yang sudah dikenal dan beberapa file statis yang diperlukan;
• Direktori src merupakan direktori penting untuk pengembangan proyek.
• Lebih jauh ke bawah, index.js adalah file entri.
• Anda dapat mencoba membuat beberapa perubahan di App.js, lalu memeriksa efek halaman web

1.5 Mulai proyek

Pada gambar di atas, kita menggunakan editor VSCode untuk membuka proyek React. Saat ini, masukkan perintah di konsol:

npm mulai

Kemudian, proyek akan secara aktif membantu kita mengaktifkan browser,http://host lokal:3000/Alamatnya, dan kemudian Anda dapat melihat ikon React yang berputar, dan proyek diinstal.

 

2 Library pihak ketiga yang pasti akan digunakan

Setelah instalasi proyek selesai, pengembangan proyek akan dimulai. Seperti kata pepatah, jika seorang pekerja ingin melakukan pekerjaannya dengan baik, ia harus mengasah tenaganya terlebih dahulu.Sebelum pengembangan proyek, mari kita bahas beberapa hal yang pasti akan digunakan dalam pengembangan proyek front-end.Perpustakaan pihak ketiga .Dengan menggunakan perpustakaan pihak ketiga ini, mereka dapat membantu kami berkembanglebih hemat。

2.1 js-alat-kotak-besar

Pertama datang ke alamat pembelajaran js-tool-big-box, klik disini:alamat pembelajaran perpustakaan alat js-tool-big-box

js-tool-big-box hampir merupakan perpustakaan npm yang harus digunakan untuk proyek pengembangan front-end. Ia memiliki fungsi yang kaya dan mudah digunakan, membuat pengembangan front-end menjadi sangat efisien. Fungsinya saat ini termasuk namun tidak terbatas pada:

2.1.1 Kelas waktu dan tanggal

1. Konversi waktu dan tanggal;
2. Format waktu yang lebih fleksibel;
3. Akuisisi waktu yang lebih personal;
4. Jangka waktu dari titik waktu tertentu hingga saat ini (informasi pengembalian lebih detail)
5. Tentukan apakah tahun tersebut merupakan tahun biasa atau tahun kabisat;
6. Berapa hari dalam sebulan;
7. tanda Zodiak;
8. hari libur resmi dalam setahun;
9. Dapatkan waktu dari kota-kota utama di seluruh dunia;

2.1.2 Kelas toko web

1. Dapatkan nilai parameter di url
2. mengatur cookie;
3. Dapatkan kue;
4. Hapus cookie;
5. Setel Penyimpanan lokal;
6. Dapatkan Penyimpanan lokal

2.1.3 Kelas acara

1. Anti-guncangan
2. Mencekik

2.1.4 Kelas angka

1. Ribuan dipisahkan koma;
2. Tentukan apakah lebih besar dari 0;
3. Tentukan apakah bilangan bulat lebih besar dari 0;
4. Hasilkan angka acak dalam rentang yang ditentukan;
5. Hasilkan nomor acak dengan jumlah digit tertentu;
6. Ubah angka menjadi huruf kecil Cina;
7. Ubah angka menjadi huruf besar Cina;

2.1.5 Kelas string

1. senar terbalik;
2. Henggang dan punuk kecil
3. Henggang berubah menjadi punuk besar;
4. Perbandingan nomor versi;
5. Dapatkan panjang byte dari sebuah string;
6. menghasilkan uuid;
7. Mendapatkan jenis kelamin, umur dan tanggal lahir berdasarkan nomor identitas;
8. Tambahkan simbol khusus di tengah string untuk menyembunyikan informasi penting;
9. Konversi string huruf besar dan huruf kecil;

2.1.6 Kelas verifikasi reguler

1. Verifikasi format email;
2. Verifikasi format nomor ponsel;
3. Verifikasi format URL;
4. Verifikasi format nomor ID;
5. Verifikasi format alamat IP;
6. Validasi format kode pos;

7. Tentukan apakah itu karakter Unicode;

8. Deteksi nilai kekuatan kata sandi;

2.1.7 kelas ajax

1. Kirim permintaan jsonp;
2. Unduh versi file yang berfungsi murni;
3. Unduh file, ambil + unduh versi fungsi;

2.1.8 data kelas data

1. Dapatkan sejumlah nilai acak dari array;
2. Salin teks ke papan klip;
3. Deduplikasi array;
4. Dapatkan tipe data yang lebih detail;
5. Penyortiran array numerik (urutan maju dan mundur);
6. Penyortiran array objek (urutan maju dan mundur)

2.1.9 kelas peramban peramban

1. Tentukan apakah browser saat ini bersifat seluler;
2. Tentukan apakah elemen tersebut berada dalam rentang yang terlihat;

3. Dapatkan apakah browser saat ini menggulir ke atas atau ke bawah, dan dapatkan jarak saat ini dari atas dan bawah;

4. Menghidupkan dan mematikan layar penuh;

5. Dapatkan agen pengguna browser dan informasi detail;

2.2 praprosesor kurang atau sass

Cara penulisan CSS tradisional relatif low-end. Menggunakan praprosesor seperti less atau sass dapat membuat pengembangan CSS lebih efisien dan sangat disarankan.

Dokumen Studi(Kurang Mulai Cepat |.Dokumentasi Bahasa Mandarin Less.js - Situs Web Bahasa Mandarin (bootcss.com))

2.3 perpustakaan permintaan aksio

Umumnya, proyek akan melibatkan interaksi dengan server, dan saat ini Anda dapat menggunakan aksio untuk mengirim permintaan.

dokumentasi pembelajaran aksio(dokumentasi axios berbahasa Mandarin |. situs web axios berbahasa Mandarin |. axios (axios-js.com))

2.4 perpustakaan UI

Untuk React, jika ini adalah pengembangan sisi-C, kami masih berharap dapat menulis sendiri beberapa pustaka UI yang relatif ringan, tetapi jika ini adalah pengembangan sisi-B, kami merekomendasikan Ant Design.

Dokumen Pembelajaran Desain Semut(Ant Design - Bahasa desain UI tingkat perusahaan dan pustaka komponen React)