React
node modules, public, src 이렇게 크게 3가지 폴더로 구성된다.
1) node_module
2) public: index.html, images, data(mock data)
3) src : index.js,app.js
3-1) component(heder,nav,footer..)
3-2) pages(login.js, login.css..)
3-3) style(common.scss, reset.scss))index.html ,index.js, app.js 의 관계
> index.html
There is only a single html file in React which is 'index.html'.
리엑트에는 하나의 html 파일만이 존재한다.
<body>
<div id="root"></div>
</body>그리고 index.html의 body태그 안에는 id='root'인 div태그 하나만 존재한다.
> index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './pages/Main/Main';
import Routes from './Routes';
ReactDOM.render(<Routes />,document.getElementById('root'));routes가 들어간 자리에 보통 app component가 들어간다.
getElementById('root')는 index.html의 id='root'인 div 태그의 위치에 첫번째 요소를 render 해준다.
--> ReactDOM.render( render하고 싶은 component, render 할 컴포넌트의 위치)
> App.js
import React { Component } from 'react';
class Counter extends Component {
state = {
color: black,
count:0,
};
render() {
return (
<div>
<span>{}</span>
<h1>Hello World</h1>
<button>Increment</button>
</div>
);
}
}--> (cc tab)
class 안에 render method가 있다.
그리고 return 안에 JSX(Javascript XML)이라는 syntex가 있다.
babel이라는 modern JS compiler로 코드가 pass through하면
babel은 JSX syntex를 브라우저가 이해할 수 있는 plain JS로 변환시켜 화면에 render한다.
- JSX에는 h1태그와 button 태그를 묶는 parent tag가 꼭 있어야 한다. div 태그로 묶거나 빈 <> 로 묶을 수 있다.
- JSX는 class 대신 className을 쓴다.
- state object includes any data that this component needs(ex. color:''..)
- curly braces{} (중괄호): Inbetween these {} we can add any valid JS expressions!
SOoo.. if you want to render the value of the count property which is '0'..
render() {
return (
<div>
<span>{this.state.count}</span>
</div>
);
}whala! it works
Front-end 🐕🦶