Insolation

Антон Спирин Цитурую

это короткий вариант записи, который можно использовать только с babel. Конкретно плагин transform-class-properties. Он входит в прессеты stage-2, stage-1, stage-0. Так, что если используете один из них смело используйте.
Запись:

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };

    this.handler = this.handler.bind(this);
  }

  handler(e) {
    // do something
  }
}

Аналогична:

class Parent extends Component {
  state = {
    data: [],
  };

  handler = e => {
    // do something
  };
}

В React разработке это один стандартов.

Ребята поопытнее, скажите честно, бывало ли у Вас такое, что Вы не совсем понимали логику языка в том или ином моменте?

Хах, как же знакомо. Я также начинал с JS, и учил достаточно долго (где-то +- пол года - год).

Иногда возникает непонимание при изучении логики этого самого JS.

Это нормально, просто пишите про то, что не понимаете. Даже тут можете задавать вопросы. JS запутанный язык, но и очень очень классный)

Учитывая то, что это мой первый язык - возможны ли "затупы" из-за этого?

Конечно. Надо некоторое время что-бы понять что такое цикл,переменная, массивы и т.д

Если да - лечится ли это опытным путем практики и теории?

Опять же да. Параллельно учите алгоритмы и структуры данных, т.к это можно сказать основа основ, и если с этим разберетесь, то дальше будет куда легче и приятнее.

В свое время мне помогло:

1. https://learn.javascript.ru/ - JS
   
2. https://www.freecodecamp.org/ - Algorithm & WebDev
   
3. https://leetcode.com/ - Algorithm
   
4. https://www.udemy.com/modern-javascript-from-the-b... - JS
   
5. Практика и еще раз практика.
   

Удачи)

Да правильно. То есть вы просто пытаетесь достучатся к некому значению в объекте.
Квадратные скобки дают вам просто преимущество в том, что они разрешают юзать в себе переменные. С обращением через точку, вам бы такого не позволило.

Читать:
1 - https://medium.com/@prufrock123/js-dot-notation-vs...
2 - https://codeburst.io/javascript-quickie-dot-notati...

У вас просто не хватает сообразалки вот и все.
Как решить?
Только путём кодинга. Посылайте свое резюме, если оно хорошее то будут кидать вам таски, вот на них и практикуйтесь (мб еще и с работой повезет). Возьмите сделайте что-то по туториалу, а потом сами перепишите. Кароч все сводится к одному - садитесь и пишите код. Только так можно выбраться. Ну и решайте конечно же логические задачки, учите алгоритмы, практикуйте.

P.S Мне не нравится codewars, лучше попробуйте https://leetcode.com/

как правильно реактом с апи общаться

С помощью fetchи с помощью lifecycle методов React'а.

class Test extends Component{
	constructor(){
  	super()
    this.state = {
    	someData: []
    }
  }
  
  componentDidMount(){
  	.fetch(//Ваша урла)
    	.then(data => {
      	return data.json
      }).then(data=>{
      //Делаете что-то например перербор и JSX)
      //Обновляете стейт если надо
      }
  } 
  
  render(){}
}

1-2 Оборачиваете блок 1 и 2 в <div class="wrapper"></div>. Даете ему display: flex;
Блоку 1 добав. overflow-y: auto; ну и фиксированную высоту (там уже на свое усмотрение) и width: 30%, а блоку 2 width: 70%;


UPD: Вот на скорую руку накидал пример
https://codepen.io/Slasher_/pen/KoKzQO

UPD2: Не увидел в тегах Bootstrap. Вам его нужно?