[React] 설치 및 환경설정

KIC/React

[React] 설치 및 환경설정

octopengj 2020. 11. 2. 16:12

vscode 터미널에서

1. npm install -g yarn로 yarn 프로그램 설치

2. npm install -g create-react-app => 자동으로 구조형성

3. create-react-app 프로젝트명

설치 완료화면

yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  yarn start

cd myapp 경로 이동후

yarn start 서버가동 시작

ctrl + c 가동 종료

아래와 같은 리액트 창이 열린다.

*****리액트를 설치하면서 같이 설치가 되는 의존적인 라이브러리 용어개념 ***

1.babel (바벨)           ECMAScript6를 지원하지 않은  환경에서 ECMAScript syntax를
                              사용가능하게 설정(=>es6을 지원해주지 않은 브라우저가 리액트를
                              사용해주기위해 만들어진 라이브러리)

2.webpack      모듈 번들러(import  가능하게, 자바스크립트파일들을 하나로 합치게한다.)
    (웹팩)                  ~.ts->~.js(앵귤러)
                             ~.js(리액터)->yarn start
                      =>자바스크립트파일 =>모아서 메모리에 올려서 실행

작성법

public->myapp->index.html 파일의 <body>태그의 <div id="root">이곳에 작성하면 된다.</div>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

src->index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

이 두가지는 필수 요소이다.

import React from 'react'; // 리액트정보(컴포넌트 작성)

import ReactDom from 'react-dom'; // 컴퓨넌트를 화면출력에 필요

import './index.css'; // css파일 적용

import App from './App'; // 부착시킬 컴포넌트 정보 -> 부착(중첩)

// import 컴퓨넌트명(클래스명 or 함수명)from 컴포넌트 정보파일

import reportWebVitals from './reportWebVitals';

ReactDOM.render( // 화면에 출력시키는 함수 // ReactDOM에 render라는 함수

<App /> // 부착시킬 컴포넌트명

document.getElementById('root') // 부착시킬 위치 // index.html <div id="root"><App /></div>

<React.StrictMode> // 에러를 체크할 수 있도록 설정옵션

src-> App.js

화면에 뿌러질 컴포넌트를 만든다.

1. 클래스작성(데이터 저장->웹에 출력)

2. 함수작성(디자인 목적(화면출력))

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

함수가 아닌 클래스로 만들경우 디폴트(함수코드) 삭제하고 작성

import React from 'react';
// 스타일시트불러올 경우 
// import '경로포함' 불러온다.
class App extends React.Component{
  
}

import React from 'react';
// 스타일시트불러올 경우 
// import '경로포함' 불러온다.
class App extends React.Component{ // 여러가지의 함수를 가짐
  // 화면에 출력하기 위해서 render() 함수를 무조건 만들어줘야 한다.
  // render라는 함수는 Component가 가지고 있다.
  render(){ // html태그 // 주의할 점 render함수는 반화 값이 있다.
    //public index.html
    //<div id="root"><h1>리액트 구조 및 환경설정방법</h1></div>
    return(<h1>리액트 구조 및 환경설정방법</h1>)
  }

}
export default App; // index.js 파일에서 import하도록 설정 //export default 배포시킬 클래스명

터미널에서 엔진가동하여 확인

myapp> yarn start