📌React yarn 설치 방법 및 기본셋팅 + 컴포넌트 만들기 + 리액트 컴포넌트 보는 크롬 확장프로그램 (React Developer Tools)

1. yarn을 설치 ( cmd 창에 아래 코드를 순차적으로 입력하여 설치함 )

* npm / yarn :   npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자
전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스
(opens new window)에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능

> NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자
> yarn은 2016년 페이스북에서 개발한 패키지 관리자. 리액트(React)와 같은 프로젝트를 진행하며 겪었던 어려움을
해결하기 위해 개발, npm과 같은 기능을 수행하나, npm 레지스트리와 호환하면서 속도나 안정성 측면에서 npm보다 향상
(보통 npm이 아닌 yarn을 사용하는듯함)

 

| Yarn React 

npm i yarn --global


// 위 코드로 최초 yarn 설치를 했다면, 아래와 같이 코드작성하여 시작하면됨
// 아래는 'begin'폴더에 작성했고 다른걸로 해도됨

yarn create react-app begin
// 설치시간 조금 소요됨

 

 

설치중

 

 

 

 

 

2. yarn의 경로를 잡고 시작

cd begin
// 위 설치가 끝나면 begin이라는 폴더가 생성되므로 이곳으로 경로설정

yarn start
// 위 명령어로 리액트 페이지가 하나 실행됨

 

 

 

 

 

 

3. App.js에서 html 짜듯 작업시작하여 마크업하면 리액트페이지 (http://localhost:3000/) 에서 실행됨

+ App.css에서 스타일시트 작성하여 style을 적용함

+ index.css에서 reset.css를 작성하듯 style을 적용함

 

* React Fragment  <>  </> 로 감싸서 작업해야 오류 안뜸 (아래 폼 참고)

•  React Fragment : React에서는 JSX에서 여러 요소를 반환하려면 하나의 부모 요소로 감싸야 함.
  만약 div나 span 같은 태그로 감싸면 불필요한 DOM 요소가 생길 수 있음. Fragment는 이를 해결하기 위해 도입된 기능
•  

* 'App'은 컴포넌트 인데 컴포넌트 이름 첫자는 대문자여야함

import React from 'react';
import './App.css';

function App() {
  return(
  <div>
    <h1>리액트 테스트 제목</h1>
    <p>리액트 테스트</p>
  </div>

);
}


export default App;

컴포넌트 명이 대문자로 시작+똑같이 되어 있는 모습 / 결과페이지 (host 3000)

 

 

+ index.js에 보면 id root가 index.html의 id로 지정된걸 가져와서 보여준다는걸 확인가능

즉, App.js에서 알맹이 마크업을 하면, index.js를 통해 index.html에 표기해주는 구조

 

 

 

 

4. 기초셋팅 (아래 파일들은 필요없으므로 삭제)

[src 폴더]

- reportWebVitals.js <index.js에 연결된 아래 코드 또한 삭제

import reportWebVitals from './reportWebVitals';

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

- App.test.js

- logo.svg

- setupTests.js

최종파일

 

 

 

 

 

 

++++

5. header 컴포넌트 만들어서 넣기

 

1. src 폴더에 header.jsx를 만들고 아래 폼과같이 작성

import React from "react";

function Header(){
    return (
        <>
            <header className="header">
                <h1 className="logo">로고</h1>
                <ul className="nav">
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                </ul>
            </header>
        </>
    );
}

export default Header

폴더구성

 

 

2. 만든 header.jsx를 App.js에 연결 

*단독태그를 사용함

import React from 'react';
import './App.css';
import Header from './header';
// 이곳에 main,footer가 추가되어 나가게됨

function App() {
  return(
    <>
    <Header/>
    <Main/>
    </>

);
}


export default App;

 

이곳에 CSS 효과를 주고 싶다면  1. 번과정 header.jsx에 css를 임포트함 

import React from "react";
import "./header.css"; //<임포트한 부분
function Header(){
    return (
        <>
            <header className="header">
                <h1 className="logo">로고</h1>
                <ul className="nav">
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                </ul>
            </header>
        </>
    );
}

export default Header

 

 

 

3. 아래와 같이 header 밑, mainImg 밑 , Content.. 등등을 차곡차곡 쌓아나가면 됨

결과화면

 

 

 

 

 

 

 

4. 검사 - components에서 확인해보면 위에서 쌓은 컴포넌트가 보임

* 아래 확장프로그램 설치해야함

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

* 

 

 

 

 

 

 

 

 

++ | 그냥 리액트 설치방법

1. node js 설치 (LTS설치)

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

 

2. 명령어 입력하여 설치 및 생성 (초반에 시간 좀 걸림)

D:\cpu\react>npx create-react-app-blog
아래 문구
npx create-react-app blog  
(blog는 폴더명할것으로 지음)

 

3. cd로 위치 잡고 시작

npm start

 

4. 필요없는 파일은 위 포스팅 보고 정리

 

 

++ 에러뜰때 최신버전이 아니여서 안되는 경우가 많으니

아래 코드로 버전확인후, 낮으면 위의 node사이트에서 업데이트해야함

node -v
npm -v