lnked

Потому что в тот момент, когда вы вызваете этот метод внутри реакта, ваш компонент ещё не примонтирован или не отрендерен. Реакт не ломает специально стандартные методы, чтобы вам было сложнее работать. Покажите свой код и мы сможем вам объяснить что именно вы делаете неправильно.

SSR не для SEO. Современные поисковики вполне себе умеют запускать JS на страницах, подгружать данные по AJAX, анализировать переходы с historyAPI и все такое прочее.
SSR нужен в первую очередь для ускорения первичного запуска. Суть в том, что пользователь получает уже сформированную страницу по своему запросу, ему не нужно ждать пока данные подгрузятся и отобразятся на странице, он может сразу потреблять контент. А вот после загрузки сайт работает уже как SPA.
То есть при SSR не грузится каждая страница с сервера, грузится только первая, но именно та, что запросил пользователь. Последующие страницы уже отрисовываются на клиенте, а сервер отдает лишь данные.

https://www.smarty.net/docsv2/ru/language.modifier...

То-есть получится примерно так:

<meta itemprop="datePublished" content="{$news.date|date_format:"%Y-%m-%d"}">

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-собеседования вопросы.

Можно передавать в connect опцию withRef:

export default connect(mapStateToProps, null, null, { withRef: true })(Component);

Получать ref переданного в connect компонента надо так:
this.someRefName.getWrappedInstance();
где someRefName - это ref полученный от connect.

getWrappedInstance будет доступна для вызова только если вы передадите опцию withRef.

render() {
  const { isSelected } = this.state;
  const content = isSelected ? '1' : '0';

  return (
    <App>
      <Button
        onClick={this.handleClick}
        isSelected={isSelected}
      >
        Button
      </Button>
      <p>{content}</p>
    </App>
  );
}

В примере div.App заменен на StyledComponent App

<Route path="/home/services" component={Service} />

4 причины использовать MobX

1. 1 Легко научиться и использовать
   
2. Меньше кода писать
   
3. Полная поддержка объектно-ориентированного программирования
   
4. Работе с вложенными данными легко
   

2 Причины не использовать MobX

1. Слишком много свободы
   
2. Трудно отлаживать
   

Я использую MobX сейчас, потому что я могу писать код в 3 раза быстрее, чем с Redux.

Редукс в значительной степени зависит от принципов функционального программирования:
На мобкс влияет объектно-ориентированное программирование и принципы реактивного программирования:

const self = {
  a: 'AAA',
  b: function() {
    self.a = '3 A';
  }
}

export default self;

Завести какой-нибудь файл, в котором
export const ee = new EventEmitter();

Там, где она нужна,
import { ee } from './any-file-name';

При клике на одном из узлов DOM, событие click "всплывает" вверх по дереву до тех пор пока не достигнет корня или не будет отменено в явном виде.

React передает в обработчик события "синтетический" объект события, который, помимо прочего имеет метод stopPropagate. Этот метод (как и его нативный аналог) останавливает дальнейшее "всплытие" события вверх по дереву DOM. Вот как можно использовать этот метод на практике:

var Block = React.createClass({
    handleClose: function(e) {
        e.stopPropagation();
        alert('close');
    },
    handleClick: function(e) {
        alert('click');
    },
    render: function() {
        return (
            <div onClick={this.handleClick}>
                <span>Foo Bar Baz</span>
                <span onClick={this.handleClose}> &#215;</span>
            </div>
        );
    }
});

Проще говоря вам надо применить e.stopPropagation(); при клике на нужный вам элемент(лайк)
Ссылка на вопрос на stackoverflow: https://ru.stackoverflow.com/questions/537267/reac...

Здесь такой вопрос уже не раз задавался. При REST подходе, сервер выдает только ответы на ваши api запросы, например в json. Роутинг и шаблонизация, все это организуется уже на клиенте.

Пример:
зарпос серверу: GET /news (выдай новости)

Клиент:
отрисуй новости по шаблончику (который на клиенте уже задан, сервер вообще не при делах)

Читайте файлы/директории и генерируйте инстансы в цикле.
Или используйте те же глобы для генерации.

(с глобами, код не мой, но суть та же)

const path = require('path');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {};

glob.sync(`${basePath}/src/layouts/*.?(pug|jade)`).forEach(item => {
  config.plugins.push(
    new HtmlWebpackPlugin({
      filename: `${path.basename(item, path.extname(item))}.html`,
      template: item
    })
});

Неправильный подход к разработке. Варианты, как это сделать правильно:
1. Данные забираются Ajax запросом по API
2. Если хотите отдавать данные со страницей, можно записать в любой тег в атрибут data-state или в тег скрипт, в ключ window.__data
3. Можно написать node сервер с SSR и делать рендер на стороне сервера.

Связь с бекендом по REST API. Отправляете запрос, получаете ответ. Все просто.
Вообще список задач можно и в localstorage сохранять.
Но если решили сохранять в базу, то примерно так должно происходить сохранение задач:
1. Пользователь заполнил форму и нажал "Добавить"
2. POST запрос на сервер
3. В случае успеха ответ и сохранение данных в store redux
4. список обновляется и задача отображается в интерфейсе

Если нет эндпоинтов на сервере можно написать заглушки на фронте, например, инъекцию липовых данных через connect.
Или можно сразу написать эндпоинты на сервере. Если работаешь один можно использовать оба варианта. Я обычно сразу пишу эндпоинты.

Бандл в режиме разработки собирать не надо, webpack dev server его пересобирает налету при каждом изменении. Советую настроить hot reload.

Так же в современных приложениях часто реализуют server side rendering. Тут масса своих тонкостей и об этом лучше почитать соответствующие статьи.