Weitere ähnliche Inhalte
Ähnlich wie 2.jsx 101 (20)
2.jsx 101
- 2. ReactJS기본코드설명(App.js)
// 리액트를 불러와서 사용할수 있게 지원
import React from 'react';
// SVG(https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4)
// 스케일러블 벡터 그래픽스 파일
import logo from './logo.svg';
// CSS 로드
import './App.css';
// App 컴포넌트 생성 코드
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
2020.ReactJS 2
- 9. JSX문법-2
.if문대신조건부연산자
import React from 'react';
function App() {
const name = '리액트';
return (<>
{name === '리액트'?
(<h1>리액트 입니다.</h1>):
(<h1>리액트가 아닙니다.</h1>)}
</>);
}
export default App;
2020.ReactJS 9
- 12. JSX문법-5
.인라인스타일링
import React from 'react';
function App() {
const name = '리액트';
return (<div style{{backgroundColor: 'black', color: 'aqua'}}>
{name}
</div>);
}
export default App;
2020.ReactJS 12
- 15. JSX문법-8
.주석
import React from 'react';
function App() {
return <div
className="react" // 시작 태그를 여러줄 작성하게 된다면 여기에 작성 할수 있음
>리액트 입니다.
{/* 주석은 이렇게 작성합니다. */}
</div>;
}
export default App;
2020.ReactJS 15