[react]리액트 시작하기

node.js 다운로드 후 설치

react 설치

1. vs 코드에 설치할 폴더 열기

2. 터미널 실행 > npx create-react-app 폴더명

// 현재 열려있는 폴더 생성 희망 시 npx create-react-app . 으로 가능

3. localhost:3000 인터넷창이 뜨면 설치 완료

 

로컬 주소 : localhost:3000

 

미리보기

터미널 > npm start

오류 발생 시 npm install 후 npm start

* 연결 끊기 터미널 > 컨트롤 c 

 

새로운 프로젝트 생성 

터미널 > npx create-react-app 폴더명

ex)npx create-react-app mashup-todolist

 

참고1

https://www.youtube.com/watch?v=AoMv0SIjZL8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=1

참고2

https://codingapple.com/unit/react1-install-create-react-app-npx/

 

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

베이스가 되는 구문

import './App.css';

function App() {
  return (
    <div className="App">
      <section>
        <h1>h1입니다</h1>
        <button>버튼입니다</button>
      </section>
    </div>
  );
}

export default App;


상동=================================================


import './App.css';

function Btn(){  
  return (
    <section>
      <h1>h1입니다</h1>
      <button>버튼입니다</button>
    </section>
  )
}

function App() {
  return (
    <div className="App">
      <Btn></Btn>
    </div>
  );
}

export default App;

섹션을 함수로 뺄 경우 함수명의 가장 앞자리는 대문자

소문자로 지정할 경우 에러발생

 

닫는 태그가 없는 input, br같은 태그들도 /를 사용하여 닫아줘야함

<br> → <br/>

 

별도 파일로 컴포넌트 생성

import 불러올 함수명 from "파일 위치"

로 import 가능

별도 생성된 파일에서 export default App에서 App을 컴포넌트 명으로 변경해줘야함

ex) Btn을 별도 파일로 지정할 경우 export default Btn으로 수정

 

emmet 사용 설정

settings.json 오픈 후 기입

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}