import React, { Component } from 'react'; // react 모듈을 불러와서 사용하겠다!
// (react를 사용할땐 꼭 저렇게 import해줘야함)
class App extends Component { // Component를 만드는 방식은 총 2가지가 있다 Class/함수
render() { // render()에서는 꼭 JSX형태의 코드를 리턴해 줘야함
return (
<div> //이게 바로
<h1>안녕하세요 리액트</h1> //JSX
</div> //Code!
);
}
}
export default App; // 작성한 컴포넌트를 다른 곳에서 불러와서 사용 할 수 있도록 내보내기 해주기
JS로 변환되는 HTML
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<input type="text"> // 이러면 아래와 같은 Error
</div> // 꼮! <input type="text"/> /로 닫아주기🔥🔥🔥🔥
);
}
}
export default App;
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>상자1</div> //불가능!!
<div>상자2</div> // 다른 ELement로 감싸줘🔥🔥
<div>
<div>상자1</div>
<div>상자2</div> // 편안..
</div>
);
}
}
export default App;
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<div>상자1</div>
<div>상자2</div> // 편안..
</Fragment>
);
}
}
export default App;
불필요한 상위 div가 없쥬?
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
<h1>hello {name}</h1> //🔥🔥🔥 이렇게 {}로 감싸주면 사용 가능!
</div>
);
}
}
export default App;
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
{
1 + 1 === 3
? '맞다' // 🔥🔥조건문!
: '틀리다'
}
</div>
);
}
}
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const name = 'react'; // 변수 설정!!
return (
<div>
{
name === 'react' && <div>리엑트다!!</div>
}
</div>
);
}
}
export default App;
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const value = 2; // 변수 설정!!
return (
<div>
{
(() => {
if (value === 1) return <div>1이다!</div>
if (value === 2) return <div>2이다!</div>
if (value === 3) return <div>3이다!</div>
return <div>없다</div>
})() // 🔥🔥즉시 실행 함수!
}
</div>
);
}
}
export default App;
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
const style= {
backgroundColor: 'purple', // 🔥🔥 '-'있던 style요소들은 camelCase로!!
padding: '16px',
color: 'yellow',
fontSize: 30 + 6 + 'px' // 🔥🔥 JS의 특징 그대로 사용 가능!
}; // 변수 설정!!
return (
<div style={style}> // 🔥🔥 중괄호로 JS값 불러오기!
안냐세요!
</div>
);
}
}
export default App;
import React, { Component, } from 'react';
import './App.css' // 🔥🔥 Class 불러오기!
class App extends Component {
render() {
return (
<div className="App"> // 🔥🔥 class 적용하기!
안냐세요!
</div>
);
}
}
export default App;
import React, { Component, } from 'react';
import './App.css'
class App extends Component {
render() {
return (
<div>
{/*🔥🔥🔥React에서는 이렇게 주석처리 할 슈 있어요*/}
<h1
className="adfasdf" // 근데 또 이렇게는 됨 ㅋㅋㅋ??? >
React!
</h1>
</div>
);
}
}
export default App;