Matvey

Да архитектура не сложная.
Обработать запрос на сервере - передать роутеру - отдать клиенту данные для рендеринга.
Или что интересует конкретно? Вопросов может быть очень много, я с этим сталкивался сам. Например, как эмулировать страницы для ПС, для меня оказался наиболее сложным.

Сделайте так:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { someAcion } from '../somePlace';

class App extends Component {
  ...
  componentWillReciveProps(nextProps) {
    if (this.props.location !== nextProps.location) {
       this.props.someAciton();
    }
  }
  ...
}

const mapDispatchToProps = {
  someAction,
};

export default withRouter(connect(null, mapDispatchToProps)(App));

не долго гугля наткнулся на это (внутри диаграмма, которая всё объясняет)

По поводу того почему промисы оформляются как микротаски есть такое пояснение:

Treating promises as tasks leads to performance problems, as callbacks may be unnecessarily delayed by task-related things such as rendering. It also causes non-determinism due to interaction with other task sources, and can break interactions with other APIs, but more on that later.

Если коротко, в event loop по очереди выполняются таски, однако сам таск может включать некую очередь из микрозадач, которая, в свою очередь, выполнится в контексте текущего таска. То есть, если взять таски x и y, где y следует за x, то получится, что console.log('promise') выполнится в контексте таска x(в самом его конце, аккурат перед началом выполнения следующего таска), а console.log('timer') - в котексте таска y.

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

не включая основы js

Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
...

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
4) Как компоненты приложения получают "пропсы" из "стора"?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, "как в js вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
...

Общее:
0) package.json
1) Webpack, gulp, etc...
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
...
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.

Бывают, но только в хороших конторах, которые делают большие продукты, а не клепают лендиги каждый день.

Там-то все и будет завязано вокруг javascript. Сейчас очень популярно делать одностраничные приложения и всю его логику ты будешь пилить на javascript, и к верстке будешь иметь минимальное отношение. Посмотри к примеру на gmail, twitter, youtube, meduza.io и т.д. Много ли там работы верстальщику? Нет.

Но, отсутствие нужды в верстке не отменяет того факта, что нужно уметь в CSS(а лучше LESS/SASS), разбираться в адаптивном и респонсив подходах, иногда нужно знать bootstrap(все это можно освоить за 2-3 недели). Ты же все-таки будешь на стороне фронта и будешь смотреть на эти вещи и лучше тебе их понимать.

const a = v1 => {
  const f = v2 => a(v1 + v2);
  f.valueOf = () => v1;
  return f;
};


a(1)(2)(3)(4)(5) * 6  // 90
10 + a(4)(5)(6)       // 25
Math.pow(a(8)(1), 3)  // 729
a(4)(6) - a(3)        // 7

Хосподи, ну тут вам и написали ахинеи, слов нет.

Начнём с того, что результат вот этого

var b = new Array(1000000);
b.map((_, i) => i * 2); // [empty × 1000000]

Будет пустой массив из 1КК «дырок», а не `[0, 2, 4, ..., 1999998]`

Во-вторых, посмотрите, что делает array.map и сравните с вашим `for`.

В-третьих, v8, такой v8, что до сих пор не могут выкинуть js-реализацию этих методов и запилить нормульную native-имплементацию.

В-четвертых, создание стрелочной функции не бесплатно.

В-пятых, мекробенчмарки (без контекста) — зло.

P.S. Вот FF молодец: https://jsbench.github.io/#d498a7c676aa46e17eb9a8e...

Во-первых, у вас тест с map неправильный, гляньте в консоль.

Во-вторых, for это цикл, в котором 1) сначала выполняется initialization, 2) потом перед каждой итерацией проверяется condition, 3) выполняется тело цикла, 4) а после итерации выполняется final-expression, вот и всё. А map включает в себя еще некоторую логику, как минимум сборку нового массива, и неизвестно что еще; map это сложная функция.

https://www.awwwards.com

https://github.com/akella
https://github.com/pepelsbey

www.kaerus.de/ebay
обратите внимания -- переключение фото товаров без единого символа на js (вообще ничего на странице нет на js)
переключение размера и цвета -- все на голом HTML, увеличение фото по кклику
и при этом слайдер адаптивный еще в добавок, чистый html

также посмотрите на работы Артемия Лебедева -- там с версткой у них вышка

lea.verou.me

И так, с Webpack 3 все довольно просто, если знать нюансы:
1) Нужно понимать, что то что мы хотим загрузить должно быть в отдельном файле - чанке.
2) Для того что бы создался чанк необходимо все импорты этого компонента грузить "лениво". Это очень важно, в свое время именно это мешало мне разбить существующий проект на чанки.
3) Ну и самое простое: грузим через промис import:

const loadEditor = () => import(/* webpackChunkName: "my-best-editor-chunk" */ 'react-dart-editor');
  loadEditor().then(m => use it);

4) Конфиг webpack:

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin('manifest'),

Так же можно импортировать и функции.

Я использую такой компонент:


Использовать так:

<Chunk
  load={loadEditor} // была уже выше
  component="EditorAside" // если нужно что-то, что импортируется не по дефоулту
  show={true/false} // отображать ли компотнент
  preload={true/false} // осуществлять ли предзагрузку чанка
  props1="1"
  props2="2"
/>

P.S. Об использовании компонентов в роутере написано хорошо в туториале =)

Привет.
Структура. В моем текущем проекте мы эксперементировали и с папкой 'test' отдельно для тестов, и с файлами тестов в одной папке с исходниками. И командой пришли к выводу, что для нас второй вариант выглядит лучше. Так как у нас микросеврисная архитектура, то сами приложения маленькие и нет необходимости создавать отдельные папки для одного - двух файлов (например models, controllers etc).



Если у вас монолитное приложение с кучей файлов и папок, то я бы выбрал вариант с папкой `test`.
Инструменты для тестирования: mocha (фрейморк для тестирования), chai (ассерт либа), sinon (для spies, stubs, mocks), istambul (для code coverage).

на мой взгляд необходимо сделать результаты вашей деятельности более видимыми не только вашему текущему реководителю, НО и другим и желательно, чтобы у них возник спрос результаты вашей работы - это на мой взгляд один из вариантов развития ситуации к достижению вашей цели в рамках текущей компании. НО если вы чувствуете, что здесь уже нет, то рассмотривайте вариант смены работодателя, т.к. бывает даже такое, что принятый новый человек будет оценен на 10-20 т.р. больше, чем тот который уже имеет достаточно "большой пробег" на той же должности.

Рецепт прост.

1. Максимальная квалификация - а она хорошо растет, когда работаешь в компании с намного более опытными чем ты коллегами.
   
2. Работа в компании, где действительно нужна высокая квалификация.
   

Ну и естественно тебе самому должно быть интересно самосовершенстоваться в ИТ, а не тупо ради денег.
Если только ради денег - то ты никогда не догонишь тех ребят, у которых программирование и работа и хобби.

В первом случае адреса не равны, почему?

Потому что arr и ptr - это две разных переменных. Соответственно, они не могут занимать одну и ту же область памяти. &arr[0] "идентичен" arr, а не &arr.