React에서 간단한 웹 페이지 만들기

이 게시물은 초보자를 위한 간단한 React 앱을 만드는 방법을 설명하는 것을 목표로 합니다.
그럼 React에서 하나의 홈페이지를 만들겠습니다.

완제품은 this 소스코드는 here

목차

반응 앱 만들기

일부 종속성 설치

별도 구성 요소

부품 만들기

이행 내용

1. 리액트 앱 만들기

먼저 npm을 사용하여 반응 앱을 만듭니다.

npx create-react-app react-tutorial
cd react-tutorial

2. 일부 종속성을 설치합니다.

이번에는 Material UI을 사용하여 구성 요소를 만듭니다. 그런 다음 설치합니다.

npm install @mui/material

3. 별도의 구성 요소

웹 사이트는 여러 구성 요소로 분해될 수 있습니다. 이 경우 마이페이지는 아래 그림과 같이 해체됩니다.



앱을 여러 구성 요소로 분해할 수 있게 되면 구성 요소를 만들기만 하면 됩니다!!

4. 컴포넌트 만들기

먼저 Header 컴포넌트와 Footer 컴포넌트를 만듭니다.

Footer.js

import React from 'react';

function Footer() {
  return (
    <footer>
      <p>@2021 miyuki-room.com</p>
    </footer>
  )
}

export default Footer;

두 번째로 Section 컴포넌트를 만듭니다.

Section.js

import React from 'react';

function Section(props) {
  return (
    <section>
      <h1 className="heading">{props.title}</h1>
      <p>{props.text}</p>
      {props.children}
    </section>
  )
}

export default Section;

{props.children}에 관심을 가져주세요. 이것은 다른 JSX 및 구성 요소를 삽입할 수 있는 구성입니다. 여기에 목록 구성 요소를 삽입하겠습니다.

다음으로 List 컴포넌트를 만듭니다.

List.js

import React from 'react';

function List(props) {
  return (
    <ul>
      <li>{props.element}</li>
    </ul>
  )
}

export default List;

마지막으로 Navbar라고 하는 ButtonAppBar 구성 요소를 만듭니다.

ButtonAppBar

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
// import MenuIcon from '@mui/icons-material/Menu';
import { contents } from './Contents';

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="fixed" color="default">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Miyuki's Room
          </Typography>
          {/* loop button */}
          {contents.map((e, i) => (
            <Button key={i} color="inherit" href={"/#"+ e.toLocaleLowerCase()}>{e}</Button>
          ))}
        </Toolbar>
      </AppBar>
    </Box>
  );
}

루프 구성 요소를 사용하려면 위와 같이 map() 메서드를 사용합니다.

5. 내용 이행

웹사이트 만들기가 끝나면 콘텐츠를 완성합시다.

Contents.js

import React from 'react';

const contents = [
  'About',
  'Learning',
  'Works',
  'Social',
]

const sectionContents = [
  {
    title: <a id={contents[0].toLowerCase()}>{contents[0]}</a>,
    text: "I am Japanese and software engineer beginner. I'm learning Web Development, Data Analysis"
  },
  {
    title: <a id={contents[1].toLowerCase()}>{contents[1]}</a>,
    text: "React.js, GraphQL, Python"
  },
  {
    title: <a id={contents[2].toLowerCase()}>{contents[2]}</a>,
    text: "coming soon ..."
  },
  {
    title: <a id={contents[3].toLowerCase()}>{contents[3]}</a>,
    text: ""
  },
]

const socialContents = [
  <a 
    href="https://github.com/KamiHitoe"
    target="_blank"
    rel="noreferrer"
  >Github</a>,
  <a 
    href="https://qiita.com/revvve44"
    target="_blank"
    rel="noreferrer"
  >Qiita</a>,
  <a 
    href="https://dev.to/miyuki"
    target="_blank"
    rel="noreferrer"
  >DEV</a>,
  <a 
    href="https://twitter.com/starmiya_miyuki"
    target="_blank"
    rel="noreferrer"
  >Twitter</a>,
  <a 
    href="https://note.com/hit_kam"
    target="_blank"
    rel="noreferrer"
  >note</a>,
]

export { contents, sectionContents, socialContents };

그런 다음 결국 App.js를 만듭니다.

App.js

import React from 'react';
import Section from './components/Section';
import Header from './components/Header';
import Footer from './components/Footer';
import List from './components/List';
import ButtonAppBar from './components/ButtonAppBar';
import {
  sectionContents,
  socialContents,
} from './components/Contents';


export default function App() {
  return (
    <div>
      <ButtonAppBar />
      <Header />

      {/* loop Section */}
      {sectionContents.map((e, i) => {
        if (i === 3) {
          return (
            /* render list */
            <Section key={i} title={e.title} text={e.text}>
              {socialContents.map((e, i) => 
                <List key={i} element={e} />
              )}
            </Section>
          )
        } else {
          return <Section key={i} title={e.title} text={e.text} />
        }
      })}

      <Footer />
    </div>
  );
}

결국 앱은 다음과 같이 표시됩니다this.

결론

이번에는 상태 비저장 앱만 만듭니다. 그래서 다음에는 stateful하고 더 복잡한 앱을 만들겠습니다!