linkedin-skill-assessments-quizzes

React.js

Q1. Якщо потрібно імпортувати лише компонент з бібліотеки React, який синтаксис використовується?

Q2. Якщо функціональний компонент завжди повинен рендеритись однаково за однакових пропсів, яка проста оптимізація продуктивності доступна для нього?

Q3. Як виправити синтаксичну помилку, що виникає при виконанні цього коду?

const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

Q4. Якщо в файлі є наступний імпорт, що використовується для керування станом у компоненті?

import React, {useState} from 'react';

Q5. Використовуючи покращення об’єктних літералів, можна повернути значення назад в об’єкт. Який результат буде виведено в консоль при логуванні person?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

Q6. Яка бібліотека для тестування найчастіше асоціюється з React?

Довідка

Q7. Щоб отримати перший елемент масиву (“cooking”) за допомогою деструктуризації масиву, як потрібно змінити цей рядок?

const topics = ['cooking', 'art', 'history'];

Q8. Як передавати дані через дерево компонентів, не передаючи пропси вручну на кожному рівні?

Довідка

Q9. Що буде виведено в консоль при виконанні наступного коду?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);

Q10. Як називається інструмент, який перетворює JSX у виклики createElement?

Q11. Чому може бути корисно використовувати useReducer замість useState у React-компоненті?

Q12. Які пропси з об’єкта props доступні компоненту з наступним синтаксисом?

<Message {...props} />

Q13. Розгляньте наступний код з React Router. Як називається :id у властивості path?

<Route path="/:id" />

Q14. Якщо створено компонент під назвою Dish і його рендерять у DOM, який тип елемента буде відрендерено?

function Dish() {
  return <h1>Mac and Cheese</h1>;
}

ReactDOM.render(<Dish />, document.getElementById('root'));

Q15. Як виглядає цей React-елемент, враховуючи наступний код?

React.createElement('h1', null, "What's happening?");

Довідка

Q16. Яку властивість потрібно додати до компонента Suspense, щоб відобразити спінер або стан завантаження?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

Довідка

Q17. Як би ви описали змінну message, обгорнуту в фігурні дужки нижче?

const message = 'Hi there';
const element = <p>{message}</p>;

Q18. Що можна використовувати для обробки розбиття коду?

Довідка

Q19. Коли використовується useLayoutEffect?

Джерело “useLayoutEffect — це версія useEffect, яка викликається перед тим, як браузер перемалює екран.”

[Довідка] Правильна відповідь на запитання “Коли використовувати useLayoutEffect?” така:

Коли потрібно змінити верстку екрана.

useLayoutEffect використовується, коли потрібно виконати зміни в DOM, що залежать від оновленого компонування елементів. Він дозволяє вносити зміни в DOM синхронно перед тим, як браузер виконає етап малювання. Це може бути корисно, коли потрібно виміряти або маніпулювати версткою, наприклад, отримати розміри або позиції елементів, розрахувати зсуви прокрутки або виконати інші операції, що потребують актуальної інформації про верстку.

Інший варіант відповіді є неточним:

“Коли потрібно, щоб браузер перемалював перед запуском ефекту” — це неправильно. Мета useLayoutEffect полягає в тому, щоб виконати ефект синхронно після оновлення DOM, але перед тим, як браузер перемалює, дозволяючи вносити зміни, пов’язані з версткою, до того, як відбудеться візуалізація.

Пояснення: useLayoutEffect виконується перед хуком useEffect, не зважаючи на мутації DOM. Хоча хук React useLayoutEffect встановлюється після хука useEffect, він викликається першим!

Q20. У чому різниця між поведінкою при клацанні цих двох кнопок (за умови, що this.handleClick правильно прив’язаний)?

A. <button onClick={this.handleClick}>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>

Q21. Як деструктурувати властивості, що передаються до компонента Dish?

function Dish(props) {
  return (
    <h1>
      {props.name} {props.cookingTime}
    </h1>
  );
}

Q22. Коли можна використовувати React.PureComponent?

Довідка

Q23. Чому важливо уникати копіювання значень пропсів у стан компонента, де це можливо?

Q24. Що таке проп children?

Довідка

Q25. Який атрибут є заміною innerHTML у React для використання в DOM браузера?

Довідка

Q26. Які з цих термінів зазвичай описують React-застосунки?

Довідка

Q27. Чому при використанні webpack потрібно використовувати loader?

Q28. Як називається представлення інтерфейсу користувача, яке зберігається в пам’яті та синхронізується з “реальним” DOM?

Q29. Ви написали наступний код, але нічого не рендериться. Як виправити цю проблему?

const Heading = () => {
  <h1>Hello!</h1>;
};

Q30. Яке ключове слово використовується для створення константи в JavaScript?

Q31. Як називається React-компонент, який перехоплює помилки JavaScript у будь-якому місці дерева дочірніх компонентів?

Довідка

Q32. У якому методі життєвого циклу робляться запити на дані в класовому компоненті?

Довідка

Q33. React-компоненти складаються для створення інтерфейсу користувача. Як саме компоненти складаються?

Q34. Усі React-компоненти повинні діяти як _ щодо своїх пропсів.

Q35. Як називається [e.target.id] у цьому фрагменті коду?

const handleChange = (e) => {
  setState((prevState) => ({ ...prevState, [e.target.id]: e.target.value }));
};

Довідка

Q36. Як називається цей компонент?

class Clock extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}

Q37. Що передається у функцію Array.map()?

Q38. Чому краще передавати функцію в setState, а не об’єкт?

Довідка

Пояснення: Оскільки this.props і this.state можуть оновлюватися асинхронно, не слід покладатися на їхні значення для обчислення наступного стану.

Q39. Який пакет містить функцію render(), що рендерить дерево React-елементів у DOM?

Q40. Як встановити усталені значенні для неконтрольованого поля форми?

Q41. Що потрібно змінити в цьому коді, щоб він працював?

const clock = (props) => {
  return <h1>Look at the time: {props.time}</h1>;
};

Довідка

Пояснення: У JSX теги з малої літери вважаються HTML-тегами.

Q42. Який хук можна використовувати для оновлення заголовка документа?

Q43. Яку функцію з React можна використовувати для обгортання імпортів компонентів для їх лінивого завантаження?

Довідка

Q44. Як викликати setDone тільки при монтуванні компонента, використовуючи хуки?

function MyComponent(props) {
  const [done, setDone] = useState(false);

  return <h1>Done: {done}</h1>;
}

Q45. Зараз handleClick викликається замість того, щоб передаватися як посилання. Як це виправити?

<button onClick={this.handleClick()}>Click this</button>

Q46. Яка відповідь найкраще описує функціональний компонент?

Q47. З якої бібліотеки походить функція fetch()?

Q48. Що станеться, коли цей хук useEffect буде виконано, за умови, що name ще не дорівнює John?

useEffect(() => {
  setName('John');
}, [name]);

Q49. Що не викличе повторного рендерингу React-компонента?

Q50. Ви створили новий метод у класовому компоненті під назвою handleClick, але він не працює. Який код відсутній?

class Button extends React.Component{

  constructor(props) {
    super(props);
    // Відсутній рядок
  }

  handleClick() {...}
}

Q51. React не рендерить два сиблінг-елементи, якщо вони не обгорнуті у фрагмент. Нижче наведено один зі способів рендерингу фрагмента. Яка скорочена форма для цього?

<React.Fragment>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</React.Fragment>

<...>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</...>

<//>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
<///>

<>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</>

<Frag>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</Frag>

Q52. Якщо потрібно відобразити значення стану count у компоненті, що потрібно додати в фігурні дужки в h1?

class Ticker extends React.component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <h1>{}</h1>;
  }
}

Q53. Згідно з наступним кодом, коли компонент Hello призначається змінній greeting?

const greeting = isLoggedIn ? <Hello /> : null;

Q54. У наступному блоці коду, якого типу змінна orderNumber?

ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));

Q55. Ви додали властивість стилю до h1, але виникає помилка неочікуваного токена під час виконання. Як це виправити?

const element = <h1 style={ backgroundColor: "blue" }>Hi</h1>;

Q56. Яка функція використовується для оновлення змінних стану в класовому компоненті React?

Q57. Розгляньте наступний компонент. Який колір зірки за замовчуванням?

const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;

Q58. У чому різниця між поведінкою кліку цих двох кнопок (припускаючи, що this.handleClick не прив’язано правильно)?

  A. <button onClick=this.handleClick>Click Me</button>
  B. <button onClick={event => this.handleClick(event)}>Click Me</button>

Q59. Як додати до цього коду з React Router, щоб відобразити компонент під назвою About?

<Route path="/:id">
  {' '}
  <About />
</Route>

<Route path="/tid" about={Component} />

<Route path="/:id" route={About} />

<Route>
  <About path="/:id" />
</Route>

Довідка

Q60. Який класовий компонент еквівалентний цьому функціональному компоненту?

const Greeting = ({ name }) => <h1>Hello {name}!</h1>;

class Greeting extends React.Component {
  constructor() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

class Greeting extends React.Component {
  <h1>Hello {this.props.name}!</h1>;
}

class Greeting extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

class Greeting extends React.Component {
  render({ name }) {
    return <h1>Hello {name}!</h1>;
  }
}

Q61. Відповідно до наведеного коду, що описує другий аргумент, переданий у функцію render?

ReactDOM.render(
  <h1>Hi<h1>,
    document.getElementById('root')
)

Q63. Що є першим аргументом, x, який передається у функцію createElement?

React.createElement(x, y, z);

Q64. Який метод життєвого циклу класового компонента буде викликаний одночасно з цим ефектом Hook?

useEffect(() => {
  // щось робити
}, []);

Довідка

Q65. Яка назва базового компонента цього компонента?

class Comp extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}

Q66. Коли використовується портал, що є першим аргументом?

ReactDOM.createPortal(x, y);

Довідка

Q67. Що таке setCount?

const [count, setCount] = useState(0);

Довідка

Q68. Для чого використовується функція map у наведеному коді?

const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);

Q69. Опишіть, що відбувається в цьому коді?

const { name: firstName } = props;

Q70. Що не так з цим кодом?

const MyComponent = ({ names }) => (
  <h1>Hello</h1>
  <p>Hello again</p>
);

Q71. Коли використовується портал, що є другим аргументом?

ReactDOM.createPortal(x, y);

Q72. Що буде виведено в тег <div>?

const MyComponent = ({ children }) => (
  <div>{children.length}</div>
);
...
<MyComponent>
<p>
  Hello <span>World!</span>
</p>
<p>Goodbye</p>
</MyComponent>

Q73. Як називається цей патерн?

const [count, setCount] = useState(0);

Q74. Який файл завантажується першим у браузері в базовому проекті React?

Q75. Код нижче нічого не рендерить і генерує помилку: “ReactDOM is not defined.” Як виправити цю проблему?

import React from 'react';
import { createRoot } from 'reactjs-dom';

const element = <h1>Hi</h1>;
// Примітка: Помилка в рядку нижче
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(element);

Q76. У цьому компоненті, як відобразити, чи користувач увійшов у систему?

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      Користувач:
    </div>
  );
}

Q77. Ви рендерите список у React, коли в консолі з’являється попередження: “Warning: Each child in a list should have a unique ‘key’ prop.” Як виправити цю проблему?

Q78. Як би ви згенерували шаблонний код для нового застосунку, який ви створюєте для збору спідньої білизни?

Джерело: React Docs

Q79. Додайте код, який запустить фотонні торпеди при натисканні кнопки.

class StarTrekkin extends React.Component {
  firePhotonTorpedoes(e) {
    console.log('піу піу');
  }
  render() {
    return; // Відсутній код
  }
}

Джерело: React Docs

Q80. Як називається процес визначення, чи потрібне оновлення?

Q81. React є проєктом з відкритим кодом, але якою компанією він підтримується?

Q82. Яку команду можна використовувати для створення проєкту React?

підказка

Q83. Як називається розширення для браузера, яке використовують розробники React для зневадження застосунків?

Q84. Який інструмент не є частиною Create React App?

Q85. Яке розширення синтаксису JavaScript зазвичай використовується для створення елементів React?

Q86. Як можна перевірити типи властивостей без використання Flow або TypeScript?

Q87. Як додати id “heading” до наступного елемента h1?

let dish = <h1>Mac and Cheese</h1>;

Q88. Яке значення кнопки дозволить передати ім’я людини, яку потрібно обійняти?

class Huggable extends React.Component {
  hug(id) {
    console.log("hugging " + id);
  }
  render() {
    let name = "kitten";
    let button = // Відсутній код
    return button;
  }
}

Пояснення: Це питання перевіряє знання класових компонентів React. Потрібно використовувати this, щоб викликати методи, оголошені всередині класових компонентів.

Q89. Який синтаксис використовується для створення компонента в React?

Довідка

Пояснення: Компоненти React схожі на функції, які повертають HTML-елементи. Компоненти є незалежними та багаторазовими частинами коду. Вони служать тій самій меті, що й функції JavaScript, але працюють ізольовано та повертають HTML. Компоненти бувають двох типів: класові та функціональні.

Q90. Ви хочете вимкнути кнопку, щоб вона не генерувала жодних подій onClick. Яку властивість використовувати для цього?

Q91. У цій функції, як найкраще описати компонент Dish?

function Dish() {
  return (
    <>
      <Ingredient />
      <Ingredient />
    </>
  );
}

Q92. Коли викликається функція componentDidMount?

Довідка

Q93. Для чого можна використовувати webpack у розробці React?

Q94. Коли використовується розширення React Developer Tools для Chrome, що означає, якщо значок React червоний?

Довідка

Q95. Як би ви змінили конструктор, щоб виправити цю помилку: “ReferenceError: Must call super constructor in derived class before accessing ‘this’…”?

class TransIsBeautiful extends React.Component {
  constructor(props){
  // Відсутній рядок
  console.log(this) ;
  }
  ...
}

Q96. Яку мову не можна використовувати з React?

Q97. Цей код є частиною застосунку, який збирає покемонів. Як би ви вивели список зібраних покемонів?

constructor(props) {
    super(props);
    this.state = {
        pokeDex: []
    };
}

Довідка

Q98. Який результат виконання цього коду?

function add(x = 1, y = 2) {
  return x + y;
}

add();

image

Пояснення: функція, викликана без параметра, використовуватиме типове значення для параметрів, тому x завжди буде дорівнювати 1, а y завжди буде дорівнювати 2.

Q99. Коли може бути використаний React.ref?

Довідка

Q100. Який патерн використовується в цьому блоці коду?

const { tree, lake } = nature;

Довідка

Q101. Як би ви виправили цей блок коду, щоб переконатися, що властивість sent встановлена в булеве значення false?

ReactDom.render(
  <Message sent=false />,
  document.getElementById("root")
);

<Message sent={false} />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));

<Message sent="false" />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));

Передача пропсів компоненту

Q102. Цей код є частиною застосунку, який збирає покемонів. Хук useState є частиною стану, що зберігає імена зібраних покемонів. Як би ви отримали доступ до зібраних покемонів у стані?

const PokeDex = (props) => {
  const [pokeDex, setPokeDex] = useState([]);
  /// ...
};

Пояснення: useState завжди повертає масив із двома значеннями: сам стан (перше значення) і функцію set, яка дозволяє оновлювати стан (друге значення). Довідка по useState

Q103. Що передати в проп onClick, щоб дозволити передати властивість initName у обробник greet?

const Greeting = ({ initName }) => {
  const greet = (name) => console.log("Hello, " + name + "!");
  return <button onClick={ ... }>Greeting Button </button>
}

Пояснення: Очевидно, що в питанні була помилка, де замість greet було написано hug. Відкинувши це, все одно можна винести уроки з цього питання.

Q104. Як називається компілятор, що використовується для перетворення JSX у JavaScript?

JSX Transform with Babel

Q105. Який хук використовується для запобігання повторному створенню функції під час кожного рендеру компонента?

React Hooks useCallback документація

Q106. Навіщо може використовуватися хук useRef?

Довідка

Q107. Що з наведеного є обов’язковим для використання React?

Довідка

Q108. Який правильний спосіб отримати значення з контексту?

Довідка

Q109. Навіщо використовується ref?

Довідка

Q110. Який метод слід перевизначити, щоб зупинити оновлення компонента?

Довідка

Q111. Яка функціональність команди “webpack”?

Q112. Який метод не є частиною ReactDOM?

Q113. У React ключ повинен бути?

Довідка

Q114. Яка компанія розробила ReactJS?

Довідка

Q115. Яка бібліотека найчастіше асоціюється з React?

Довідка

Q116. Що з наведеного використовується в React.js для підвищення продуктивності?

Довідка

Q117. Який з наведених варіантів допомагає React зберігати дані односпрямованими?

Довідка

Q118. Який варіант є правильним рефакторингом класового компонента Greeting у функціональний компонент?

class Greeting extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!<h1>;
  }
}

Q119. Чому список очікування (waitlist) не оновлюється правильно?

const Waitlist = () => {
  const [name, setName] = useState('');
  const [waitlist, setWaitlist] = useState([]);
  const onSubmit = (e) => {
    e.preventDefault();
    waitlist.push(name);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <label>
          Name: <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        </label>
        <button type="submit">Add to waitlist</button>
      </form>

      <ol>
        {waitlist.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ol>
    </div>
  );
};

Довідка

Q120. Який патерн використовується в Context.Consumer нижче?

{(isLoggedIn)=>{isLoggedIn ? "Online" : "Offline"}}

Q121. У React.js який з наведених варіантів використовується для створення класу для наслідування?

Довідка

Q122. Яка мета render() у React.js?

Довідка

Q123. Яка мета super(props) у React.js?

Довідка

Q124. Що таке Redux у React.js?

Довідка

Q125. Яка мета віртуального DOM у React.js і як він покращує продуктивність вебзастосунків?

Довідка

Q126. Ви запускаєте наступний код і отримуєте повідомлення про помилку: “invalid hook call.” Що не так з кодом?

import React from 'react';

const [poked, setPoked] = React.useState(false);

function PokeButton() {
  return <button onClick={() => setPoked(true)}>{poked ? 'You have left a poke.' : 'Poke'}</button>;
}

Q127. Колега звертається до вас за допомогою щодо компонента react. Він каже, що кнопка poke рендериться правильно, але коли натискається кнопка, з’являється помилка: “setPoked is not defined”. Що не так з їхнім кодом?

function PokeButton() {
  const { poked, setPoked } = useState(false);
  return <button onclick={() => setPoked(true)}>{poked ? 'You have left a poke.' : 'Poke'}</button>;
}

Q128. Цей компонент завантажується динамічно. Що слід замінити на XXXX, щоб завершити код?

const OtherComponent = React.lazy(() => import('./OtherComponent.js'));

function MyComponent() {
  return (
    <XXXX fallback={<spinner />}>
      <OtherComponent />
    </XXXX>
  );
}

Q129. Елементи у списках у React повинні мати __ які є ___ .

Q130. Ви хочете запам’ятати функцію зворотного виклику, щоб переконатися, що React не створює функцію під час кожного рендеру. Який хук ви б використали для цього?

Джерело: CodeDamn

Q131. Ви хочете виконати мережеву операцію в результаті зміни стану компонента з назвою userInput. Що ви заміните на XXXX?

useEffect(callNetworkFunc, XXXX);

Q132. Коли відображається компонент Hello?

<div>{isLoggedIn ? <Hello /> : null}</div>

Q133. Коли використовується useLayoutEffect?

Q134. У чому різниця між state і props у React?

Q135. Яку мову не можна використовувати з React?

Q136. Яка відповідь найкраще описує функціональний компонент?

Q137. З якої бібліотеки походить функція fetch()?

Q138. У React, яка мета пропса key під час рендерингу списку компонентів?

Q139. Яка основна функція React Router?

Q140. Коли слід використовувати Redux у React застосунку?

Q141. Яка мета React hooks?

Q142. Як можна передати дані через дерево компонентів React, не передаючи props вручну на кожному рівні?

This site is open source. Improve this page.