7월25일47일차 - 리액트 시작, 기본 구성

react를 실행시키기 위해서는 node.js를 설치합니다.
설치가 되었는지 확인하기 위해서는 터미널에 node -v를 입력하면 됩니다.
>> v16.16.0

리액트 app을 만듭니다.
npx create-react-app react00를 입력하여 react00 폴더를 생성합니다.
package.json에는 설치한 파일들이 기록됩니다.

 

리액트 서버를 구동하는 순서입니다.
cd .. //경로를 이동합니다.
cd react00 //react00 폴더로 갑니다.
npm start //react를 시작합니다.

.gitignore 를 통해서 git에 모든 파일을 올리지 않도록 합니다. 리액트는 무겁습니다.
src폴더의 App.js 와 index.js 만 남겨도 문제 없이 실행됩니다.




return을 여러 줄에 걸쳐서 입력하려면 ()로 감싸면 됩니다.
  return (
    <>
      <h1>h1</h1>
      {/* <h2>h2</h2> */}
    </>
  );
  
component를 만듭니다. component의 이름을 정할 때 첫 문자는 대문자로 쓰는 것이 관습입니다.
function Test() {
  return (
    <>
      <ul>
        <li>menu01</li>
        <li>menu02</li>
        <li>menu03</li>
      </ul>
    </>
  );
}
export default Test;

App 에서 component를 import 하고 원하는 위치에 <Test />와 같이 넣어주면 됩니다.
import Test from "./test";
const App = () => {
  // console.log("ggg");
  return (
    <>
      <Test />
      <Test />
      <Test />
      <h1>h1</h1>
      {/* <h2>h2</h2> */}
    </>
  );
};
export default App;



css는 index.js에서 import 합니다.
import "./reset.css";

리액트에서는 클래스가 class가 아닌 className입니다. 
className을 준 뒤에 css를 작업하는 방식 그대로 합니다.



build를 통해서 배포할 수 있는 버전으로 만들어집니다.
npm run build 를 입력하면 배포할 때 반드시 필요한 파일들만 생성됩니다.

경로가 제대로 지정되어있는지 확인합니다. 최초에 src="" 에서 ./ 디렉토리에 .이 없습니다.
    <script defer="defer" src="./static/js/main.397386e7.js"></script>
    <link href="./static/css/main.edac6e76.css" rel="stylesheet" />

깃에 업로드를 하기 위해서 .gitignore에 포함되어 있는 build 폴더를 제외시킵니다.



html을 이용하지 않기 때문에 리액트는 html을 이용한 페이지에 비해 검색어에 노출되지 않는다는 특징이 있습니다.
리액트는 정말 무겁습니다. 로드에 시간이 많이 소요됩니다.