터미널 리액트 설치
터미널 리액트 폴더 경로
npx create-react-app .
y
npm start
기본 규칙
- 폴더이름은 영문 소문자로만 작성
- 리액트는 html이 index.html 하나다
index.html < index.js < App.js 의 구조
인덱스html이 최종적으로 받음
-
리액트 html문은 가장 외각에 하나의 태그로 묶여야 함
-
클래스를 지정할 떈 className 을 사용
-
빈태그(fragment)로도 묶어서 사용이 가능하다 <> </>
-
변수 {변수명}
-
삼항연산자가능
name 이 승환이라면 승환출력 아니라면 영표를 출력
{name === '승환' ? <h1>승환.</h1> : <h1>영표</h1>}- 스타일은 객체형식 { { } }
<div style={{color:'red'}}> - 임포트
import './test.css'; //백그라운드블랙 이건css임포트
import App2 from './App2'; 이거 두개는 js임포트 js임포트는 자동완성으로 경로까지 잡힘
import App1st from './compo/App1st';react strict mode
https://ko.reactjs.org/docs/strict-mode.html
<React.StrictMode>
</React.StrictMode>1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>2. index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; //app.js 를 App태그로 임포트
import App2 from './App2';
import reportWebVitals from './reportWebVitals';
//id가루트인것가져오기 // index.html과 연결해줌
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<App2 />
</React.StrictMode>
<App2 />
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();3. App.js
import logo from './logo.svg';
import './App.css';
import './test.css'; //백그라운드블랙
import App2 from './App2';
import App1st from './compo/App1st';
import App2nd from './compo/App2nd';
//App태그를만드는공간
function App() {
const name = '승환'
const data = 'App1st'
//리턴안에 사용자정의태그구조를작성할수잇다
return (
//JSX문법 (JS+HTML)
//규칙1 : html구조는 하가지 태그로 묵여야 한다
//규칙2 : 모든 태그는 닫는 태그가 존재
//규칙4 : 클래스를 지정할 떈 className 을 사용
// 빈태그(fragment)로도 묶어서 사용이 가능하다 <> </>
//변수 {변수명}
//삼항연산자가능
//name 이 승환이라면 승환출력 아니라면 영표를 출력
//{name === '승환' ? <h1>승환.</h1> : <h1>영표</h1>}
//<div style={{color:'red'}}> 스타일은 객체형식
<>
<div style={{ color: 'red' }} id='test'>
{name === '승환' ? <h1 >승환. <h1 className='first'>승환.</h1></h1> : <h1>영표</h1>}
</div>
<div style={{ color: 'red' }} id='test'>
{data === 'App1st' ? <App1st></App1st> : <App2nd></App2nd>}
</div>
<App2></App2>
<App1st></App1st>
<App2nd></App2nd>
</>
);
}
//다른파일에서 가져갈 수 있게
export default App;
// index.js파일에서 아래처럼 가져감
//import App from './App'; //app.js 를 App태그로 임포트3. App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}3. index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}