생활코딩 React 2022 개정판 1일차

1. React란???

이 코드를

<header> 
	<h1> 
    	<a href = "/">web</a>
    </h1>
</header>
↓↓↓↓↓↓↓↓
<Header></Header>
이렇게 바꿀 수 있다!

사용자 정의 태그를 만드는 것이 핵심이다.

2. 실습 환경 구축

https://ko.reactjs.org/
리액트 사이트

먼저 node.js를 설치 해주어야 합니다.

https://nodejs.org/ko/
Node.js 사이트

설치가 끝나면 vscode를 열어줘서 폴더를 지정해주기!

터미널을 열어서

npx create-react-app 폴더이름

완성되면 이렇게 폴더가 생긴다

리액트 한번 실행해보기!

npm start // 리액트를 실행하는 명령어

완료 IMG

소스코드 수정방법

1.index.js

리액트 폴더가 만들어지면

src폴더에 여러 파일들이 존재합니다.
그중 index.js는 우리가 npm start를 했을 때 나오는 화면입니다.

현재 index.js에 은 같은 경로에 있는 App.js를 가져온 것입니다.

2.App.js

App.js를 열면 이런식으로 코드가 짜여져 있습니다.

평소에 사용하는 HTML과 유사한 구조로 되어 있으나 함수로 감싸져 있다??
[여기서 편집해서 UI를 만들어 나가야 한다.]

css 적용하는 방법

 HTML에서는 ??
 <link rel="stylesheet" href="경로">
 React에서는 ?? 
 위에서 import를 해주어야 한다.
 import '경로/이름.css';

3.배포하는 방법

npm run build [파일배포]

그럼 build라는 폴더가 생기는데

배포된 파일을 열어보려면

npx serve -s build

[ctrl]을 눌러서 Local 주소 열어보기!

배포끄읏