Pure React - 1

[netcat-na-diary]

Чтобы вернуть несколько элементов из компонента, не оборачивая их в общий элемент, можно использовать React.Fragment (was added in React 16.2)

function HelloWorld() {
  return (
    <React.Fragment>
      <Hello/>
      <World/>!
    </React.Fragment>
  );
}

Узнать версию Реакт

import React from 'react';
console.log(React.version);

Выражение (exprеssion) возвращает значение и может быть использовано внутри JSX

1 + 2
buttonLabel
aFunctionCall()
aFunctionName

statement не возвращает значения и не может быть использовано внутри JSX

примеры

var a = 5
if(true) { 17; }
while(i < 7) { i++ }

«If» in JSX
1 способ - тернарный оператор

function ValidIndicator() {
  var isValid = true;
  return (
    <span>{isValid ? 'valid' : 'not valid'}</span>
  );
}

2 способ - булевый оператор &&

function ValidIndicator() {
  var isValid = true;
  return (
    <span>
      {isValid && 'valid'}
      {!isValid && 'not valid'}
    </span>
  );
}

(&& возвращает первое ложное значение (то, на котором остановились вычисления), а если его нет, то последнее)

Пример

const LikeButton = ({ count }) => (
  <span className="like-button">
    <i className="fa fa-heart"/>
    {count > 0 &&
      <span className="like-count">
        {count}
      </span>
    }
  </span>
);

Создать приложение и перейти в его папку

create-react-app static-tweet && cd static-tweet

Template Strings - с обратными кавычками

person = `${firstName} ${lastName}`;
url = `foo.com/users/${userId}/items/${itemId}`;

Добавить Moment.js

npm add moment

import moment from 'moment';