[React.js] 리액트 파일 생성 & 컴포넌트 만들기

Create React App

react app 생성

npx create-react-app 파일명

컴포넌트 만들기

src파일 내에 js파일을 만든다.
파일내 함수내에 원하는 것을 만들어 변수에 저장한다.

const MyHeader = () => {
  return <header>이것은 헤더이다.</header>;
};

export default

파일을 밖으로 내보내려면 export default 함수명

export default MyHeader;

import form

내보낸 컴포넌트를 넣고 싶은 파일에 불러올려면 import 이름 from 경로

import MyHeader from "./myHeader";
import MyFooter from "./MyFooter";

예제

컴포넌트

1. MyHeader 컴포넌트

const MyHeader = () => {
  return <div></div>;
};

export default MyHeader;

2. My Footer 컴포넌트

const MyFooter = () => {
  return <footer>myfooter</footer>;
};

export default MyFooter;

컴포넌트 import

import한 컴포넌트를 사용할떄는 태그처러머 < >에 import할때 사용한 이름을 적어준다.

<MyHeader/>
<MyFooter/>

최종 코드

// import './App.css';

//컴포넌트 import
import MyHeader from "./myHeader";
import MyFooter from "./MyFooter";

function App() {
  return (
    //JSX문법
    <div className="App" style={style.App}>
      <MyHeader />
      <h2>안녕 리액트</h2>
      <b>React.js</b>
      <MyFooter />
    </div>
  );
}

export default App;

React는 JSX문법을 사용한다.