sinevik

Как-то у вас всё многословно и сильно переусложнено. Зачем целиком переопределять obj и несколько раз вызывать setState? - результат следующего вызова перетирает результат предыдущего, наверняка причина того, что ограничения координат не применяются, кроется где-то тут. Наверное, стоит создавать объект один раз, сразу с нужными значениями свойств, как-то так:

class App extends React.Component {
  state = {
    divStyle: {
      display: 'flex',
      alignItems: 'center',
      width: '1000px',
      height: '500px',
      outline: '1px solid red',
      position: 'relative',
    },
    move: {
      position: 'absolute',
      width: '200px',
      height: '100px',
      outline: '1px solid green',
      left: 100,
      top: 200,
    },
  }

  handlerMouseDown = e => {
    this.deltaX = e.pageX - this.ourdiv.offsetLeft;
    this.deltaY = e.pageY - this.ourdiv.offsetTop;
    window.addEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseUp = e => {
    window.removeEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseMove = ({ pageX }) => {
    this.setState(({ move }) => ({
      move: {
        ...move,
        left: Math.min(700, Math.max(100, pageX - this.deltaX)),
      },
    }));
  }

  render() {
    return (
      <div>
        <div style={this.state.divStyle}>
          <div
            ref={ourdiv => this.ourdiv = ourdiv}
            style={this.state.move}
            onMouseDown={this.handlerMouseDown}
            onMouseUp={this.handlerMouseUp}
          ></div>
        </div>
      </div>
    );
  }
}

В конструкторе можете "прибить":
this.getMouse = this.getMouse.bind(this)
с помощью оператора bind ваш метод класса (getMouse) всегда будет вызываться в контексте this (которая в момент бинда ссылается на ваш класс)

У вас хандлер неправильный.
Во-первых переименуйте с Mousedown в handleClick.
В JavaSсript не принято называть методы с большой буквы, а хандлеры принято называть в формате handleSomeEvent или someEventHandler.

Во-вторых либо используйте class field function:

handleClick => e {
  console.log(this.ourDiv);
};

либо оберните хандлер в анонимную функцию при передаче в onClick:

<div
  style={this.state.move}
  onClick ={() => this.handleClick()}
  ref={ourDiv => this.ourDiv = ourDiv}
></div>

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

При вызове MouseDown this будет равен undefined. Подробнее можно почитать здесь.

Чтобы такого не произошно, можно исользовать стрелочные функции (лучший вариант):

onClick = (e) => {
     console.log(this.ourDiv);
}

Либо в конструкторе написать:

constructor(props){
    super(props);
    //...
    this.onClick = this.onClick.bind(this);
}

Самый худший вариант - обернуть функцию в стрелочную, ведь она будет создаваться на каждый вызов render:

<div onClick={() => this.onClick()}/>

Высота .containerlogo чуть больше высоты .header, а так как и .menu-container и .containerlogo плавающие (float), то первый просто зацепляется за второй. Нужно явно задать высоту для .containerlogo в 60px

Не надо вам изучать PHP, он вам не нужен. Не тратьте время. Пишите для учебных примеров API на Node.js. Node.js React разработчику однозначно стоит изучить.
Попробуйте Koa или Expess простенький сервер на них написать пара минут.

ну проще всего взять написать на php api а из реакта стучаться к этому апи используя fetch или axios

попробуйте вот так

render() {
    console.log(this.props);
    let result = this.props.mark[0]
    return (
    <div>
      <p>{result}</p>
    </div>
    )
  }

но лучше так

render() {
    console.log(this.props);
    let result = this.props.mark[0]
    return (
    <div>
{this.props.mark!==undefined && this.props.mark.length!==0
?
this.props.mark.map(
(el,ind)=><p>{el}</p>
)
:null
}
    </div>
    )
  }

Привяжите value к состоянию

change(e){
    this.setState({WeatherObj : e.target.checked })
  }

и

<input id="checkBox" value={this.state.WeatherObj} type="checkbox" onClick={this.change.bind(this)}/>

У вас в событие передается нативный event, следовательно вы можете считать цель события, так сказать - event.target (элемент на котором произошел клик), что вернет DOM элемент( ваш чекбокс) и у него считать свойство checked

итого: event.target.checked (у вас это буквой e обозначено, значит e.currentTarget.checked , currentTarget - потому что так советует документация по реакту, потому что... - дальше уже сами =) )

p.s. обязательно читать

Добавьте text-align: justify

https://jsfiddle.net/s83cy89n/1/

Ширину для таких блоков не стоит задавать вообще.
Для инлай-блоков нужно указывать родителю font-size: 0;

<div id="one"></div>
<div id="two"></div>
<div id="tree"></div>
<div id="four"></div>

Из-за переноса строки. Если бы они выглядели так:

<div id="one"></div><div id="two"></div><div id="tree"></div><div id="four"></div>

то влезли бы.
Вот наглядно:
https://jsfiddle.net/bizlex/569698c6/1/

Прочтите это, дополнительные отступы - проблема в строчных элементах (inline-block) и работайте лучше с flexbox :)

Потому что вы задали display: inline-block;
Сделайте картинку просто блочной или задайте vertical-align: top
https://webref.ru/css/vertical-align

https://jsfiddle.net/L0e9kp2t/

p.s. не используйте id для стилизации, пишите классы.

Вылазит из-за того, что #header имеет line-height: 60px; а блочно-строчные элементы выровнялись по базовой линии.

Свойство vertical-align не работает для float элементов, т.к. они выпадают из общего потока документа.

обязательно использовать такой древний ужасный хак?
Если нет, то вот вариант покрасивее(в плане организации и очевидности кода): https://jsfiddle.net/zLe1q5y4/2/