React 를 써야 하는 이유 및 인스톨, 미리보기, 개발 준비

React 를 써야하는이유

1. 화면전체가아닌 부분 업데이트로 앱처럼 동작함(Instagram, Twitter, facebook ..)

2. 웹 개발후에 앱으로 발행할수 있음(PWA, React-native)

3. Angler, Vue 보다 사용자가 가장많음.

4. 취직시에 유리함

 

단점,

1. 문법이 어려움

 

 

인스톨

1. nodejs.org 에서 nodejs 인스톨

2. vs code 인스톨

 

프로젝트 생성

Run vscode

VSCODE : create a folder(React class)

VSCODE : open terminal(ctrl shift `)

VSCODE terminal: npx create-react-app myproject(myproject라는 프로젝트 생성)

VSCODE : Open myproject folder

 

미리보기 실행

VSCODE terminal:  npm start

 

기본 문법

1. 중괄호 {}  : Tag 사이에 무엇이든(변수, 함수, 사진, 문자열 등)  넣고 싶을때 사용

 

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

function App() {
  let posts = "hi hi";
  let posts2 = { color: "blue", fontSize: "30px" };
  function 함수() {
    return 100;
  }
  return (
    <div className="App">
      <div className="black-nav">
        <div className={posts}></div>
        <div style={{ color: "blue", fontSize: "30px" }}>Test</div>
        <div style={ posts2 }>Test2</div>
      </div>
      <h1>{posts}</h1>
      <h1>{함수()}</h1>
      <img src={logo} />
    </div>
  );
}

export default App;

2. State : 자주 바뀌는 데이터를 저장

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [state, setstate] = useState(["Man", "Woman"]);

  return (
    <div className="App">
      <div className="black-nav">
        <div>State</div>
      </div>
      
        <h3>{state}</h3>
        <h3>{state[0]}</h3>
        <h3>{state[1]}</h3>
      
    </div>
  );
}

export default App;

 

 

 

 

 

다른 방법

1. mkdir react-app

2. cd react-app

2. npm install -g create-react-app

npx create-react-app 은 실행시마다 다운받아서 최신버젼을 설치함

5. create-react-app .

6. npm run start

7. npm run build

8. npm install -g serve

9. serve -s build

8+9 = npx serve -s build

 

 

참고 문서

reactjs.org/docs/create-a-new-react-app.html#create-react-app

Create a New React App – React

github.com/facebook/create-react-app

facebook/create-react-app

seomal.org/

Seomal