index.html
<html>
<head>
<link rel="stylesheet" href="index.css" />
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.html에서
<div id="root"></div>이 부분은 한마디로 컨테이너라고 생각하면 됨.
리액트에서 여기에 글을 넣어주고 하기 위해서는
index.js에
ReactDom.render(<h1>Hello, everyone!</h1>, document.getElementById("root"));
이렇게 ReactDom.render()로 처음에는 넣어줄 content를 써주고
그 다음에 들어갈 컨테이너를 getElementById("")로 지정해주면 되었다.
ul로 리스트 두개 작성하는것도 연습해보았는데
아주 간단하게
ReactDOM.render(
<ul><li>Thing 1</li><li>Thing 2</li></ul>,
document.getElementById("root")
)이렇게 해주면 됨
다음으로 component만들어서 render해주는걸 보자
index.js
function Navbar() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
)
}
// Challenge: Create your own custom React component!
// Call it "MainContent", and have it return a simple
// h1 element that says "I'm learning React!"
// Afterward, render it below the Navbar (which
// you can do inside the ReactDOM.render call below)
function MainContent() {
return (
<h1>I'm learning React!</h1>
)
}
ReactDOM.render(
<div>
<Navbar />
<MainContent />
</div>,
document.getElementById("root")
) MainContent라는 react component를 만들어줬고
h1으로 return해줬다
그리고 그걸 render하는곳에 navbar 다음에 render해줬음..
아까 react로 간단하게 render하는
ReactDOM.render(<h1 className="header">Hello, React!</h1>, document.getElementById("root"))이거 대신 바닐라자바스크립트를 이용하게 되면
- Create a new h1 element
- Give it some textContent
- Give it a class name of "header"
- append it as a child of the div#root
*/
const h1 = document.createElement("h1")
h1.textContent = "This is an imperative way to program"
h1.className = "header"
document.getElementById("root").append(h1)이렇게 훨씬 복잡하게 된다.. 이럴때는 일일히 뭘 해야하는지
프로그램한테 알려주게 되는데 이런애들을 imperative라고 한다..
프로그램이 알아서 하는건 declarative라고 하는데
react가 바로 declarative 하기 때문에 인기가 좋다고 함.
