Teknologian jakaminen

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

Ystävä kertoi minulle valmistuneensa ja aloittaneensa harjoittelun.Mutta yritys käyttää edelleenVue, johtaja sanoi, että hän saa käyttää sitä jonkin ajan kuluttuaReagoiEnnen kuin teet projektin, opi se ensin itse.

Löysin muuten hänelle dokumentteja, koska kirjoitan myös blogia, joten toivon, että se voi auttaa apua tarvitsevia.

Sisällysluettelo

1 projektin asennus

1.1 Valitse hakemisto ja käynnistä pääte

1.2 Asenna create-react-app -komento

1.3 Luo projekti

1.4 Näytä hakemistotiedostot

1.5 Aloita projekti

2 kolmannen osapuolen kirjastoa, joita varmasti käytetään

2.1 js-tool-big-box

2.1.1 Aika- ja päivämääräluokka

2.1.2 Verkkokauppaluokka

2.1.3 Tapahtumaluokka

2.1.4 Numeroluokka

2.1.5 Jousiluokka

2.1.6 Säännöllinen tarkastusluokka

2.1.7 ajax-luokka

2.1.8 datan tietoluokka

2.1.9 selaimen selainluokka

2.2 vähemmän tai sass esiprosessori

2.3 axios pyytää kirjastoa

2.4 käyttöliittymäkirjasto

---

1 projektin asennus

1.1 Valitse hakemisto ja käynnistä pääte

Löydät tietokoneeltasi kansion tämän React-projektin harjoitteluhakemistoksi, kirjoita sitten kansion URL-osoitteeseen "cmd", pääte ponnahtaa esiin ja voit myös määrittää kohdehakemiston:

 

Kirjoita tähän "cmd" ja paina Enter avataksesi päätteen ponnahdusikkunan.

1.2 Asenna create-react-app -komento

Suorita seuraava komento, -g tarkoittaa sen asentamista maailmanlaajuisesti

npm install -g create-react-app

1.3 Luo projekti

Haluamme esimerkiksi luoda tiedoston nimeltä js-tool-big-box-react Project, voit suorittaa seuraavan komennon:

luo-reagoi-sovellus js-tool-big-box-react

Terminaali asennetaan sittenAsennus voi olla hieman hidasta, odota kärsivällisesti, kuten alla olevassa kuvassa näkyy, kun asennus on valmis:

1.4 Näytä hakemistotiedostot

• Julkinen hakemisto tallentaa tutut html-tiedostot ja joitain staattisia vaadittuja tiedostoja;
• src-hakemisto on tärkeä hakemisto projektin kehittämisessä.
• Alempana oleva index.js on syöttötiedosto.
• Voit yrittää tehdä joitain muutoksia App.js-tiedostoon ja tarkistaa sitten verkkosivun tehosteen

1.5 Aloita projekti

Yllä olevassa kuvassa käytämme VSCode-editoria avaamaan React-projekti. Syötä tällä hetkellä komento konsoliin:

npm aloitus

Sitten projekti auttaa meitä aktiivisesti aktivoimaan selaimen,http://localhost:3000/Osoite, ja sitten näet pyörivän React-kuvakkeen, ja projekti on asennettu.

 

2 kolmannen osapuolen kirjastoa, joita varmasti käytetään

Projektin asennuksen valmistuttua aloitetaan projektin kehitys. Kuten sanonta kuuluu, jos työntekijä haluaa tehdä työnsä hyvin, hänen täytyy ensin teroittaa energiaansa.Ennen projektikehitystä puhutaan muutamasta asiasta, joita varmasti käytetään etupään projektikehityksessä.Kolmannen osapuolen kirjastot .Näiden kolmansien osapuolien kirjastojen avulla ne voivat auttaa meitä kehittymääntehokkaampi。

2.1 js-tool-big-box

Tule ensin js-tool-big-boxin oppimisosoitteeseen, napsauta tätä:js-tool-big-box työkalukirjaston oppimisosoite

js-tool-big-box on lähes pakollinen npm-kirjasto etupään kehitysprojekteihin. Siinä on runsaasti toimintoja ja se on helppokäyttöinen, mikä tekee etupään kehityksestä erittäin tehokkaan. Sen nykyiset toiminnot sisältävät, mutta eivät rajoitu niihin:

2.1.1 Aika- ja päivämääräluokka

1. Kellonajan ja päivämäärän muuntaminen;
2. Joustavampi aikamuoto;
3. Henkilökohtaisempi ajan hankinta;
4. Aikajakso tietystä ajankohdasta tähän hetkeen (tarkemmat palautustiedot)
5. Selvitä, onko kyseessä tavallinen vuosi vai karkausvuosi;
6. Kuinka monta päivää kuukaudessa on;
7. horoskooppimerkki;
8. vuoden lakisääteiset vapaapäivät;
9. Hanki aika tärkeimpiin kaupunkeihin ympäri maailmaa;

2.1.2 Verkkokauppaluokka

1. Hae parametrin arvo URL-osoitteessa
2. asettaa evästeet;
3. Hanki evästeet;
4. Poista evästeet;
5. Aseta paikallinen tallennustila;
6. Hanki localStorage

2.1.3 Tapahtumaluokka

1. Anti-shake
2. Kaasu

2.1.4 Numeroluokka

1. Tuhannet pilkuilla erotettuina;
2. Määritä, onko se suurempi kuin 0;
3. Määritä, onko kokonaisluku suurempi kuin 0;
4. Luo satunnaislukuja määritetyllä alueella;
5. Luo satunnaisluku tietyllä määrällä numeroita;
6. Muunna numerot pieniksi kiinaksi;
7. Muunna numerot isoiksi kiinaksi;

2.1.5 Jousiluokka

1. merkkijono kääntää;
2. Henggang ja pieni kyhmy
3. Vaakasuora mäki kääntyy suureksi kyhmyksi;
4. Versionumeroiden vertailu;
5. Hanki merkkijonon tavupituus;
6. generoida uuid;
7. Hanki sukupuoli, ikä ja syntymäaika henkilötunnuksen perusteella;
8. Lisää erikoissymbolit merkkijonon keskelle tärkeimpien tietojen piilottamiseksi;
9. Merkkijono isojen ja pienten kirjainten muunnos;

2.1.6 Säännöllinen tarkastusluokka

1. Sähköpostimuodon vahvistus;
2. Matkapuhelinnumeron muodon tarkistus;
3. URL-muodon vahvistus;
4. ID-numeron muodon tarkistus;
5. IP-osoitteen muodon tarkistus;
6. postinumeron muodon validointi;

7. Selvitä, onko se Unicode-merkki;

8. Tunnista salasanan vahvuusarvo;

2.1.7 ajax-luokka

1. Lähetä jsonp-pyyntö;
2. Lataa tiedoston puhtaasti toiminnallinen versio;
3. Lataa tiedostot, hae + lataa toimintoversio;

2.1.8 datan tietoluokka

1. Hanki satunnainen määrä arvoja taulukosta;
2. Kopioi teksti leikepöydälle;
3. Array deduplication;
4. Hanki yksityiskohtaisempia tietotyyppejä;
5. Numeerisen taulukon lajittelu (eteenpäin ja päinvastainen järjestys);
6. Objektijonojen lajittelu (eteenpäin ja päinvastainen järjestys)

2.1.9 selaimen selainluokka

1. Selvitä, onko nykyinen selain mobiililaite;
2. Selvitä, onko elementti näkyvällä alueella;

3. Selvitä, vierittääkö nykyinen selain ylös vai alas, ja saat nykyisen etäisyyden ylhäältä ja alhaalta.

4. Kytke koko näyttö päälle ja pois päältä koko näyttö;

5. Hanki selaimen userAgent ja yksityiskohtaiset tiedot;

2.2 vähemmän tai sass esiprosessori

Perinteinen tapa kirjoittaa CSS on suhteellisen matala. Esiprosessorien, kuten less tai sass, käyttö voi tehdä CSS-kehityksestä tehokkaampaa ja on erittäin suositeltavaa.

Tutkimusasiakirjat (Less Quick Start |. Less.js -kiinalainen dokumentaatio - vähemmän kiinalainen verkkosivusto (bootcss.com))

2.3 axios pyytää kirjastoa

Yleensä projektit sisältävät vuorovaikutusta palvelimen kanssa, ja tällä hetkellä voit käyttää aksioita pyyntöjen lähettämiseen.

axios oppimisdokumentaatio(axios kiinalainen dokumentaatio |. axios kiinalainen verkkosivusto |.)

2.4 käyttöliittymäkirjasto

Reactille, jos se on C-puolen kehitystä, toivomme silti, että voimme kirjoittaa käsin joitain suhteellisen kevyitä käyttöliittymäkirjastoja, mutta jos se on B-puolen kehitystä, suosittelemme Ant Designia.

Ant Design -oppimisasiakirja(Ant Design - Yritystason käyttöliittymäsuunnittelukieli ja React-komponenttikirjasto)