ReactJS Coding Challenge

ReactJS Coding Challenge

Objektívny

Vyvinúť aplikáciu Single Page App (SPA), ktorá zobrazuje jednoduchý informačný panel, ktorý zobrazuje štyri dlaždice, z ktorých každá zobrazuje jednu štatistiku pre množinu údajov, ktorá sa získava prostredníctvom volania REST API. Užívateľ by mal mať možnosť požiadať o načítanie nových údajov a vidieť štatistiky v aktualizácii dlaždíc, aby odrážali nový súbor údajov.

Podrobnosti o výzve kódovania

ako vyčistiť pole

Požiadavky

1. Aplikácia musí byť implementovaná pomocou komponentov ReactJS a vyvinutá pomocou JavaScriptu alebo TypeScriptu, pričom sa uprednostňuje druhý z nich.
2. Aplikácia zobrazí štyri štatistické dlaždice: priemer, medián, štandardná odchýlka a režim.
3. Aplikácia zobrazí tlačidlo, ktoré po kliknutí spôsobí načítanie novej množiny údajov (nahradí aktuálnu množinu údajov) a aktualizáciu displeja palubnej dosky tak, aby odrážal novo načítané údaje.
4. Aplikácia zobrazí vstupné pole, ktoré bude akceptovať číslo, a tlačidlo odoslania, ktoré po kliknutí spôsobí, že sa číslo pridá do aktuálne načítanej množiny údajov a dlaždice palubnej dosky sa aktualizujú tak, aby odrážali nový stav množiny údajov.

Dlaždice palubnej dosky

1. Priemer - https://en.wikipedia.org/wiki/Arithmetic_mean
2. Medián - https://en.wikipedia.org/wiki/Median
3. Štandardná odchýlka - https://en.wikipedia.org/wiki/Standard_deviation
4. Režim - https://en.wikipedia.org/wiki/Mode_(statistics)

očakávané výsledky

data-1234.json

data-4321.json

Tech Stack

Zásobník klientov

• ReactJS (Javascript)
• Reagovat Hooks
• Háky na mieru
• Štýlové komponenty
• Pohyb snímača
• Jednotkové testy
  • Je
  • React Testing Library
• Testy od konca do konca
  • Cyprus

Server Stack (pre ostatné hovory API)

• Uzol
• expresné
• Javascript
• Jednotkové testy
  • Jasmine

Rýchly štart

Skripty

git clone

npm install

Po klonovaní projektu sa budete chcieť uistiť, že ste nainštalovali všetky závislosti, aby ste mohli začať fungovať.

npm run dev

Tento príkaz spustí server aj klienta súčasne vo vývojovom režime. Server počúva http: // localhost: 3001 (Poznámka: Nebudete to môcť stiahnuť priamo vo webovom prehliadači) a aplikácia Reagovať beží http: // localhost: 3000

npm run server

Otvorené http: // localhost: 3001 vo webovom prehliadači a otestujte svoje rozhranie Rest API. Koreňová cesta ( http: // localhost: 3001/ ) vám ukáže krátku dokumentáciu a informácie o verzii.

npm run test

Spustí testovacieho bežca v režime interaktívnych hodiniek. Pozrite si časť o prevádzkové testy Pre viac informácií.

npm run cypress

Spustí testovací bežec Cypress v interaktívnom režime.

akcie analýzy sentimentu reddit

npm run cypress:e2e

Zaistite, aby bola spustená aplikácia React http: // localhost: 3000 pred spustením tohto príkazu, pretože sa ho Cypress pokúsi získať prístup, aby vykonal svoju úlohu. Tento príkaz spustí test, ktorý som vytvoril, a pošle ho na terminál.

Čo je vo vnútri?

Rýchly pohľad na adresáre najvyššej úrovne, ktoré v tomto projekte uvidíte.

| _+_ | - V cyprus> integrácia> informačný panel adresára, pre tento projekt som vytvoril end-to-end testy

| _+_ | - React sa bude vyvíjať a implementovať do tohto priečinka

| _+_ | - Namiesto vytvorenia samostatného servera Node.js, ktorý poskytuje pre túto výzvu rozhranie Rest API, som sa vydal smerom k vytvoreniu servera proxy servera Node.js, aby som proces zjednodušil a urýchlil. Ak sa o tom chcete dozvedieť viac, môžete prečítajte si tento článok .

Pre priečinok projektu na serveri som ho štruktúroval tak, aby v aplikácii bolo jasné oddelenie obáv/vrstiev. V zásade máme naše | _+_ |, ktoré odosielajú žiadosti na naše | _+_ | (spracováva žiadosti), ktoré volajú na | _+_ | vrstva (obchodná logika), ktoré volajú na | _+_ | kde sa vytvárajú metódy, ktoré volajú do databázy alebo externých rozhraní API. K dispozícii je tiež samostatný adresár utils, ktorý obsahuje všetky bežné/zdieľané funkcie.

ako kúpiť shiba inu mincu na robinhood

| _+_ | - Toto je aplikácia React, ktorá bude odosielať požiadavky Rest API na server prostredníctvom vlastného háku React ( useDataFetch ) na získanie súboru údajov potrebného na výpočet štatistických údajov, ktoré sa majú zobraziť na informačnom paneli.

Vytvoril som niekoľko ďalších hákov React, ktoré mi s touto úlohou pomôžu ( Štatistiky použitia a použiteNumArray ). Podrobnosti o implementácii výpočtov existujú v súbore NumArray triedy, na ktoré sa volá priamo z vypočítať médium , vypočítať Priemer , countStdDeviation a countMode .

Naše komponenty sú štruktúrované tak, aby došlo aj k oddeleniu obáv, ale je tu priestor pre ďalšie oddelenie.

| _+_ | - Kontajner na Hlavička a Telo komponentov

| _+_ | - Kontajner na Palubná doska , Formulár a DataReload komponentov.

| _+_ | - Kontajner s logom, názvom a popisom

čo je kryptomena ckb

| _+_ | - Kontajner na Dlaždica komponent, kde pre každú štatistiku je jeden.

| _+_ | - Kontajner na vstup ( Vstup komponent a useInput vlastný hák React) a tlačidlo odoslania ( Tlačidlo ).

| _+_ | - Kontajner na dve tlačidlá ( Tlačidlo ), ktoré po kliknutí spustia volanie Rest API na server na získanie údajov.

Využívam | _+_ | a občas aj zmiešanie s | _+_ | aby ste priniesli animáciu, ktorú uvidíte. V prípade CSS som k rozloženiu pristúpil k úplne základnému prístupu, ktorý je zameraný predovšetkým na mobilné zariadenia. Na zmenu štýlov mám iba niekoľko zarážok, ale na úpravu stránky som použil Flexbox.

Testovanie

Testy jednotiek (žart, knižnica reagujúca na testovanie)

Testy od začiatku do konca (Cypress)

Podrobnosti na stiahnutie:

Autor: briang123

GitHub: https://github.com/briang123/reactjs-stats-code-challenge

#reactjs #javascript #react

Pozri Tiež:

• Čo je Dink Doink (DINK) | Čo je to token Dink Doink | Čo je to DINK token
• Ako nasadiť aplikácie Vue do AWS | Naučte sa akcie GitHub
• Responzívne preklápacie hodiny v jQuery
• Ako a kde kúpiť token Gulag (GULAG) - jednoduchý sprievodca krok za krokom
• Rozdiel medzi Asyncdata a Fetch