[노마드 코더] Creating your first React Component #2.0

https://nomadcoders.co/courses

1) This site can't be reached는 서버가 동작되고 있지 않아서 생긴다.

Terminal에  npm start  입력해서 서버를 시작하면

작업중인 페이지가 브라우저에 나타난다.

 

 Local: http://localhost:3000    

//작업중인 컴퓨터 브라우저에서 사용

 On Your Network:  http://192.168.219.105:3000  

//같은 와이파이 연결된 기기에서 사용

---

3) JSX는 JavaScript와 HTML의 결합

ex) <App />

React.js는 바닐라 자바스크립트와 동일한 콘셉트로 동작하지만 JSX는 React에서만 사용된다.

---

4) Component를 만들어 보자

src폴더에 새 파일을 만든다. ex) Potato.js

새 파일에는 반.드.시.

import React from "react";

를 넣어줘야됨

---

5) 어디에, 어떻게 Potato.js를 넣어야될까?

index.js에는 딱 1개의 component만 render 되어야하기 때문에 아래 코드는 동작하지 않는다.

(component 를 2개 render 하기 때문에)

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import Potato from "./Potato";


ReactDOM.render(<App /><Potato />, document.getElementById("root"));

//혹은

ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<Potato />, document.getElementById("root"));

그러므로,

App.js안에서 Potato를 import하고 HTML로 넣어준다.

import React from "react";
import Potato from "./Potato";

function App() {
	return (
    	<div>
        	<h1>Hello</h1>
            <Potato />
        </div>
    )
}

export default App;

**React는 단 1개의 Component만 render할 수 있음

**모든 Component는 App Component 안에 있어야 됨.

---

6) Index.html / index.js / App.js

Public 폴더에 있는 index.html이 브라우저에 로드되고

function들로 만들어진 요소들이 그 안에 뿌려지게 된다.

**React 동작이 빠른 이유

//index.html
<div id="root"></div>

+

//App.js
import React from "react";

function App() {
	return(
    	<div>
        	<h1>Hello</h1>
        </div>
    )
}

+

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById("root"));

결과

<div id="root">
	<h1>Hello</h1>
</div>