import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
Hello World
</div>
);
}
}
export default App;
ES6에서는 class키워드 등장 class 나왔다고해서 자바스크립트가 아닌건 아님
App.js <div>안에 내용 다지우고 helloworld로 변경 App.css도 다지우고 테스트 F12로 Element 확인
리턴한값이 컴포넌트
render함수 오버라이딩해서 값을 리턴시키면 그 값이 컴포넌트
npm start해서 서버 켜진뒤 url뒤에 어떤값을 넣어도 무조건 index.html
index.js
import React from 'react'; // const React = require('react');
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import App2 from './App2'; // require 하는거
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
//ReactDOM.render(<App2 />, document.getElementById('root')); // 같은 root라서 app를 app2로 덮어버림
ReactDOM.render(<App2 />, document.getElementById('root2')); // 위치 잡아주는거 index.html 에서
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root2"></div>
</body>
</html>
index.html에 내가 만든 뷰를 번들해주는거까지 프로젝트가 해줌 나중에 개발할때는 번들작업을 개별적으로 해줘야함 번들이 js파일
render를 어떻게 하느냐가 중요함 그다음 webpack
주 코드는 bundle.js로 만들어져서 bundle.js을 컴파일하여 컴포넌트가 생성되고 view가 완성
webpack 설정에 어떤 번들을 컴파일해서 어디에 넣어놔라 라는 설정을 해줘야함
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<h1>hello</h1>
<h2>world</h2> // 2개의 태그를 리턴시 에러가난다 <div>로 감싸는 등 해서 반드시 1개의 태그만 리턴해야한다
);
}
}
export default App; // 다른곳에서 사용할수있도록 export 시킴
컴포넌트이기때문에 하나의 태그만 리턴해야함 하나의 태그 = 엘레먼트 2개의 태그가있으면 엘레먼트가 2개라서 어느것이 컴포넌트인지 헷갈려서 에러가남
컴포넌트 = html 덩어리
React.Fragment : 여러개의 태그를 하나로 패키징하는것, 추천하는 방식은아님 (보통 div를 사용)
dl : definition list
import React, { Component } from 'react';
import './App2.css';
class App2 extends Component {
render() {
return (
<div className='App2'>
<dl>
{
[1, 2, 3, 4].map( (e, i) =>
<React.Fragment>
<dt>index:{i}</dt>
<dd>element:{e}</dd>
</React.Fragment>
)
}
{/* <dt>index:0</dt>
<dd>count:1</dd>
<dt>index:1</dt>
<dd>count:2</dd>
<dt>index:2</dt>
<dd>count:3</dd> */}
</dl>
<h2> Hello World </h2> //가상 dom에서 렌더링하게해야함 컴포넌트를 dom으로 만들어놓고 html로 싹 변경
// 브라우저는 안에 dom이 있고 js는 ReactDOM이 해야함 이건 index.js가 해줌
</div>
);
}
}
export default App2;
동적으로 만들때는 javascript코드를 사용
람다식은 모든언어가 똑같다
객체 하나를 리턴해야하기때문에 하나로 패키징을 해줘야함
<React.Fragment>
<dt></dt>
<dd></dd>
</React.Fragment>
번들러는 webpack 하나만 사용
자동 refresh는 vscode에서 해주는거고 실제 개발할때는 안해줌
import React, { Component} from 'react'; // const React = require('react');
import './Movie.css';
class Movie extends Component {
render(){ // html을 리턴해주는놈
return(
<div className='Movie'>
<h1>극한직업</h1>
</div>
);
}
}
export default Movie; // 외부에서 쓸수있도록 밖으로 빼냄
import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
class App extends Component {
render() {
return (
<div className='App'>
<Movie />
<Movie />
<Movie />
<Movie />
<Movie />
<Movie />
</div>
//<React.Fragment>
// <Movie />
// <Movie />
// <Movie />
// <Movie />
// <Movie />
// <Movie />
//</React.Fragment>
// <div className="App">
// <h1>hello world</h1>
// </div>
);
}
}
export default App;
export한것을 위처럼 사용할수있음
