Připravte se na svůj React Interview

Všechny rozhovory jsou skličující. Vím, jak se cítíte při hledání všech možných tipů na pohovor a očekávaných otázek. Po několika pohovorech jsem dostal svou první vývojářskou práci a chci se podělit o to, co jsem se během cesty naučil. Doufám, že to pomůže.

Existuje tolik typů kódovacích pohovorů, ale v tomto příspěvku se budu zabývat pouze kódovacími úkoly v daném čase .

Budete muset vytvořit něco jednoduchého (uživatelské rozhraní, základní cvičení rámce/knihovny/jazyka) v omezeném čase.

Zde je přiřazení kódování reakcí. Předstírejme, že jde o skutečný pohovor. (Tento úkol jsem získal z tohoto videa. Ve skutečnosti měl tento úkol provést na třích svých pohovorech. ) Připojil jsem svou nevýhodu kódu, ale zkuste si napsat svůj vlastní kód, než jej uvidíte.

Přiřazení kódování

1. Přečtěte si jej pozorně a určete mu priority

Měli byste si pozorně přečíst pokyny. Nesbírejte. Když jste nervózní, pravděpodobně vám uniknou detaily. Čtěte, jako byste byli korektorem, a pak stanovte priority úkolů. Přemýšlejte o tom, co od vás chtějí vidět . A znovu zkontrolujte termín .
(Volitelné:Vynechejte posledních 5–10 minut na zkoušku.)

Z výše uvedeného úkolu chtějí tazatelé zjistit, zda můžeme použít Fetch API, map, useEffect a response-router . Takže toto jsou klíčové vlastnosti.

2. Držte se základů

Pokud nemáte předchozí zkušenosti jako vývojář a ucházíte se o juniorskou roli, tazatelé obvykle nebudou očekávat, že napíšete kód na vysoké úrovni. Místo toho chtějí zjistit, zda máte minimální kvalifikaci.

  • Ujistěte se, že si kódy dobře uspořádáte (používám hezčí ) a používat správné sémantické značky (nepřetěžujte div ).
  • Pokud se chystáte odněkud zkopírovat a vložit řádek kódu, ujistěte se, že nepoužíváte var .
  • Nezapomeňte vložit atribut alt pro obrázky a jedinečný klíč pro každý z potomků mapy.

Všechny jsou tak zásadní, že to každý ví. Co se ale stane, když na pohovoru zmeškáte něco, co všichni znají ? Nechtějte to vědět.

3. Udělejte si zkoušku

Ve dvou z mých rozhovorů jsem byl požádán, abych nahrál svůj kód do veřejného úložiště, aby tazatelé mohli stáhnout můj repo a zkontrolovat kód. To znamená, že by neměl být žádný problém, když stahují repo a spouštějí váš kód.

Představte si, že máte prezentaci. Všechno jste připravili a všichni čekají, až to předvedete. Na poslední chvíli však nelze otevřít váš soubor ppt nebo se projektor náhle nepřipojí. Nemůžete zaručit, že váš kód bude úspěšně spuštěn na jiném počítači.

Pokud vám tedy zbývá čas, místo abyste na ně udělali dojem dalšími funkcemi nebo CSS, zkuste kód stáhnout do jiné složky a ujistěte se, že vše půjde hladce.

3. Měli byste být schopni vysvětlit svůj kód.

Tazatelé budou procházet řádek po řádku a budou se vás ptát na váš kód.
Možné otázky budou...

4. NEBUĎTE SE V OBRÁVĚ při kontrole kódu

Vím, že je někdy těžké oddělit se od svého kódu. Ale nikdo nechce najímat někoho, kdo se bude bránit každé zpětné vazbě.

Tazatelé pravděpodobně upozorní na to, co jste udělali špatně, co jste mohli udělat lépe. Zachovejte vnímavý přístup a oceňte jejich zpětnou vazbu. (Kolikrát by profesionální vývojáři zkontrolovali a okomentovali váš kód zdarma?) Chtějí také vidět, jak byste reagovali na budoucí kontroly kódu.

Nakonec zde je můj kód pro tento zesměšňovač úkol.

///App.js

import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import UserDetail from "./components/UserDetail";

function App() {
    return (
        <Router>
            <div className="App">
                <Switch>
                    <Route path="/profile" exact component={Home} />
                    <Route path="/profile/:id" exact component={UserDetail} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;
///components/Home.js

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export default function Home() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetchUsers();
    }, []);

    const fetchUsers = async () => {
        const res = await fetch("https://randomuser.me/api/?results=10");
        const data = await res.json();
        try {
            setUsers(data.results);
        } catch (err) {
            console.log(err);
        }
    };

    return (
        <div className="userList">
            {users &&
                users.map(user => (
                    <li key={user.login.uuid}>
                        <Link
                            to={{
                                pathname: `/profile/${user.login.uuid}`,
                                state: { user }, //pass the data so that you can use it via useLocation
                            }}
                        >
                            {user.name.first} {user.name.last}
                        </Link>
                    </li>
                ))}
        </div>
    );
}
///components/UserDetail.js

import React from "react";
import { useLocation } from "react-router-dom";
//get the corresponding data sent from Link state

export default function UserDetail() {
    let params = useLocation();
    const { name, location, email, dob, picture } = params.state.user;

    return (
        <div>
            <h2>
                {name.first} {name.last}
            </h2>
            <img src={picture.large} alt={name.first} />
            <p>
                {dob.age} / {location.country}
            </p>
            <p>{email}</p>
        </div>
    );
}

Závěr

Bez ohledu na to, jak moc se na pohovory připravujete, nezaručí vám to pokaždé triumf. Jo, život je na hovno. Pokud jeden zničíte, nenechte se tím zmást.

V rozhovorech jsem také udělal pár hloupých chyb. Ale dobrá věc na tom být člověkem je, že se můžete poučit ze svých chyb. Selhání vám dá vědět, co přesně můžete se zlepšit a můžete začít od toho.

Proces hledání práce není sprint; je to maraton. Nebuďte zklamaní odmítnutím a chybami a pokračujte v podávání žádostí.

Hodně štěstí při programovacích rozhovorech!

Titulní fotografie od Arnolda Francisca na Unsplash