Написал 3 компонента, но они криво работают, что делать?

Question

[historydev]

const main = document.querySelector('.container');

class Header extends React.Component {
	render() {
		return (
			<header>
				<div class="brand">History</div>
				<nav>
					<ul>
						<li>Menu 1</li>
						<li>Menu 2</li>
						<li>Menu 3</li>
						<li>Menu 4</li>
						<li>Menu 5</li>
					</ul>
				</nav>
			</header>
		);
	}
}

class LeftSidebar extends React.Component {
	render() {
		return (
			<aside class="leftSidebar">
			
			</aside>
		);
	}
}

class RightSidebar extends React.Component {
	render() {
		return (
			<aside class="RightSidebar">
			
			</aside>
		);
	}
}

ReactDOM.render(<Header/>,main);
ReactDOM.render(<RightSidebar/>,main);
ReactDOM.render(<LeftSidebar/>,main);

body,html {
	padding: 0;
	margin: 0;
	height: 100%;
	background: #002136;
	overflow: hidden;
}

.container {
	width: 100%;
	height: 100%;
}

.leftSidebar {
	width: 15%;
	height: 98%;
	background: url('../img/sidebar.png');
	background-size: 100% 100%;
	margin-top: 1%;
	float: left;
}

.RightSidebar {
	width: 15%;
	height: 85%;
	background: url('../img/sidebarright.png');
	background-size: 100% 100%;
	float: right;
}

Вот так выглядит, css reset подрубил навсякий но толку 0

Comments

[historydev]

BD_ l3ftoverZ!, в таком случае где я нарукоблудил?

[historydev]

BD_ l3ftoverZ!, секунду

[historydev]

BD_ l3ftoverZ!, https://codepen.io/History/pen/PoYWJjV

[Ivan Bogachev]

HistoryART, Добавьте недостающие части в пример, сейчас он совсем не работает:

[historydev]

Ivan Bogachev, ой, точно, там-же нельзя class ставить, спасибо, а пред. комментатор ошибся.

[historydev]

Ivan Bogachev, такс, вот обновлённый

const main = document.querySelector('.container');


class Header extends React.Component {
	render() {
		return (
			<header>
				<div className="brand">History</div>
				<nav>
					<ul>
						<li>Menu 1</li>
						<li>Menu 2</li>
						<li>Menu 3</li>
						<li>Menu 4</li>
						<li>Menu 5</li>
					</ul>
				</nav>
			</header>
		);
	}
}

class LeftSidebar extends React.Component {
	render() {
		return (
			<aside className="leftSidebar">
			
			</aside>
		);
	}
}

class RightSidebar extends React.Component {
	render() {
		return (
			<aside className="RightSidebar">
			
			</aside>
		);
	}
}

ReactDOM.render(<Header/>,main);
ReactDOM.render(<RightSidebar/>,main);
ReactDOM.render(<LeftSidebar/>,main);

[historydev]

BD_ l3ftoverZ!, как это реализовать?

[historydev]

BD_ l3ftoverZ!, запихнуть в контейнер тег скрипт и в нём вызывать?

[historydev]

BD_ l3ftoverZ!, Сейчас попробую

[historydev]

BD_ l3ftoverZ!, Пустота

const main = document.querySelector('.container');


class Header extends React.Component {
	render() {
		return (
			<header>
				<div className="brand">History</div>
				<nav>
					<ul>
						<li>Menu 1</li>
						<li>Menu 2</li>
						<li>Menu 3</li>
						<li>Menu 4</li>
						<li>Menu 5</li>
					</ul>
				</nav>
			</header>
		);
	}
}

class LeftSidebar extends React.Component {
	render() {
		return (
			<aside className="leftSidebar">
			
			</aside>
		);
	}
}

class RightSidebar extends React.Component {
	render() {
		return (
			<aside className="RightSidebar">
			
			</aside>
		);
	}
}

class Main extends React.Component {
	render() {
		return (
			<Header/>
			<RightSidebar/>
			<LeftSidebar/>
		);
	}
}



ReactDOM.render(<Main/>,main);

[historydev]

BD_ l3ftoverZ!, вспомнил из урока, нужно обернуть их в div и всё будет работать.

[Анатолий Куликов]

HistoryART, можно ещё в <> обернуть, так тоже будет работать

[historydev]

Анатолий Куликов, спасибо, но блок лучше

[historydev]

BD_ l3ftoverZ!, в ответ напиши, отмечу