blog만들기 전, setting작업

1. vscode 설치하기(code를 짜면서 terminal(=cmd)돌리기에 최적화 되어있음-자기가 원래 쓰던 editor이 있고 terminal 사용에 능숙하면 그거 이용해도 상관 없음)

2. nodejs 설치하기(가장 최신버전깔기-버전이 맞지 않으면 설정시 오류가 날 수 있음)

3. 바탕화면에 react라는 폴더 만들기

4. vscode에서 open folder로 react파일열기

5. vscode의 terminal에서

   npx create-react-app blog 입력
   npx: 라이브러리 설치 도와주는 명령어(nodejs 설치가 잘되어있어야 이용 가능)
   create-react-app: 리액트 셋팅 다된 boilerplate,만들기 쉽게 도와주는 라이브러리,한번에 설치 쉽게 해주는 라이브러리

6. blog라는 폴더가 생성된다.(success라고 뜨면 성공!)

7. vscode에서 open folder로 blog폴더 열어주기
   *src/App.js가 메인 페이지이다.

8. 미리보기 페이지 띄우기(terminal에서 입력)=크롬 설치 필요!!

   npm start

메인페이지가 실행되는 원리!!

src/App.js --src/index.js-->public/index.html

//index.js가 document.getElementById(id)를 통해 App.js의 html코드를 id로 만들어둔걸 index.html로 바로 보내서 저장하면 바로 페이지에 표시된다. 그래서 메인페이지를 index.html이 아니라 App.js라고 하는거임.

blog폴더에 깔린것들

-node_modules: 라이브러리 모은 폴더(npm,npx구동을 위한)
-public: static(정적인,변화가 없는) 파일 보관함 like 사진
-src: 소스코드 보관함
대부분 코딩 App.js에다가 함/App.css에는 css코드
-package.json: 설치한 라이브러리 목록(버전등..자동으로 설치하면 기록됨)

JSX

1. 일단 App.js에서 필요없는 코드 삭제
2. js문법중 일부인 function인데 이 안에 html코드를 작성해서 넣으면 구동됨(이게 jsx문법이다! like html 대용)

<jsx 특징>

-태그에 class 줄 수 없음,so, className="클래스명"하면 된다
-데이터 바인딩 쉽게 할 수 있다 {}안에 변수명을 넣어주면서 해당 내용을 가져오게 된다.
->기존 js/html만 이용하면 일일이 다 변경하고 바꾸어 줘야 한다면 { 변수명 }을 이용해서 한번에 해결!
{}안에 함수,class명을 넣어도 됌! 이미지 import하고 사용시 이미지명/그냥 바로 사진(파일주소)
-이미지넣을때,

<img src="{이미지명}">

-style,font속성 넣을때, style,font={스타일} 즉, object형식으로! 속성명:속성값

<div style={{ color : 'blue' }}> 안녕하세요 </div>
<div font={{ fontSize: '20px' }}> 안녕하세요 </div> //camelCase작명관습!(-사용 x)