react 시작하기

❗프로젝트 만들기

npm init react-app 프로젝트명

 

❗프로젝트 기본 구조

• node_modules 폴더 : 다양한 자바스크립트 라이브러리가 자동으로 설치가 되어있음
• public 폴더 : 리액트로 개발하는 모든 파일은 javascript로 구성, 최종적으로 index.html로 구동
• src 폴더 : 리액트 코드들을 개발해나감
• package.json : 전체 프로젝트에 대한 정보를 담고 있음

 

❗프로젝트 설치 완료 및 실행

npm start

npm start 실행시 index.js 실행

 

 

❗컴포넌트 만들기(경로 : pages/Home.js)

1. 함수형 컴포넌트

import React from "react";
function Home(){
  return <h1>Home화면입니다.</h1>
}
export default Home;

// 화살표 함수
const Home = () =>{
  return <h1>Home화면입니다.</h1>;
}

1. 클래스형 컴포넌트

import React,{Component} from "react";
class Home extends Component{
  render(){
    return <h1>Home화면입니다.</h1>
  }
}
export default Home;

❗App.js 수정

import Home from "./pages/Home"

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;