react 기초1

1. 파일 만드는 법

cmd 창
create-react-app .

2. 개발환경 실행

npm runs start

실행 중지 : ctrl + c

 

3. 각각 디렉토리 구조

public

- index.html

<div id="root"></div> : 컴포넌트가 들어가는 곳 / 안에 들어가는 컴포넌트는 src에서 수정

src

- index.js : 진입 파일

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

// 1. document.getElementById('root') : root는 index.html의 root
// 2. import App from './App';
//    <App /> : 컴포넌트

- App.js : 실제 구현(출력) 파일! / 가장 바깥쪽에 태그하나는 있어야함! 

함수 방식과 클래스 방식 존재 

함수 방식 ( function type )

import React from 'react';
import './App.css';
function App(){
	return(
    	<div className="App">
        
        <div>
    );
}
export default App;

클래스 방식 ( class type ) : 주로 씀!

import React, { Component } from 'react';
import './App.css';

class App extends Component{
	render(){
    	return (
        	<div className="App">
            
            </div>
        );
    }
}

export default App;

 

- index.css / App.css  : 페이지 css 수정

 

4. 배포방법 ( deploy )

build : 빌드디렉토리 생성

npm run build

웹서버의 문서경로는 build디렉토리안에 위치할 것

npm install -g serve : npm을 이용한 간단한 웹서버/ serve 명령어를 통해 웹서버 설치가능
npx serve -s build : serve라는 웹서버 다운받아서 실행시킬때 build라는 디렉토리를 documnet root로 하겠다