[React] react 설치하기

React

[React] react 설치하기

쿨키드 2022. 9. 20. 22:32

React
설치하기

파워셀창을 켜서 npx-create-react-app 리액트생성할폴더이름을 넣는다.

npm run build : build 폴더 생성

npm start 웹페이지 크롬에 생성

자바스크립트 파일을 만들고, 폴더를 생성한다.

내가 만드는 파일을 바로 올리는 건 안된다. js에서 수정 해야 함.

리액트는 html하나만 생성

cd .. ->부모폴더로

cd react05 -> react05 폴더로

code . -> 폴더 vscode로 open

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

getElementById('root')에
 <React.StrictMode> 
    <App /> 
  </React.StrictMode> 를 넣는다.

html은 모듈화를 할 수 없다. 데이터를 공유하는 방법이 없다.

백에서 할 수 있던 모듈화를 자바스크립트로 할 수 있게 해준다 = 리액트!

브라우저 언어를 사용해서 모듈화를 할 수 있게 하는 점이 리액트의 가장 큰 장점 = 프론트엔드가 생기게 된 계기

but, 자바스크립트 문법./언어를 사용해야함.

function App() {
  return (
    <h2>모르겠다</h2>
    <div>모르겠다</div>
👉 오류 뜬다. 엘리먼트가 2개 이상의 경우, 섹션, 디브 또는 프래그넌트(<></>)로 묶어줘야함 <></>
  )
}
export default App;

👇 요런식으로 수정

function App() { 
  return ( 
    <section> 
      <h2>모르겠다</h2> 
      <div>모르겠다</div> 
    </section> 
  ) 
} 
export default App;

또는

function App() { 
  return ( 
    <> 
      <section> 
        <h2>모르겠다</h2> 
        <div>모르겠다</div> 
      </section> 
    </> 
  ) 
} 
export default App;

리액트에서는 div class가 아니라 ClassName이다.

const Header = () => {
    return (
        <header className="Header">  // 클래스이름은 프래그넌트이름으로 한다.
            header
        </header>
    )
}
export default Header;

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않는다.