create simple web page in React
Tags: react, beginners, tutorial
Published: 2021-11-07 16:57:17


This post aims at explaining how to create simple React app for beginners.
Then, I'm going to make single home page in React.

Finished product is [this](https://miyuki-room.netlify.app/) and source code is [here](https://github.com/KamiHitoe/react-mypage)


## Table of Contents

1. create react app
2. install some dependencies
3. separate components
4. make components
5. fulfill contents

### 1. create react app

First of all, I create react app using npm.

```shell
npx create-react-app react-tutorial
cd react-tutorial
```

### 2. install some dependencies

This time, I use [Material UI](https://mui.com/) to create components. Then I install it.

```shell
npm install @mui/material
```

### 3. separate components

Web site can be dismantled into multiple components. In this case, my page is dismantled like below figure.

![dismantled page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8o3d4nts2julfzrgxoi.png)
 
Once you can dismantle your app into multiple components, you just make components !!

### 4. make components

First, I make Header component and Footer component.

Footer.js
```js
import React from 'react';

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

export default Footer;
```

Second, I make Section component.

Section.js
```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;
```

Please pay attention to {props.children}. this is Composition where you can insert other JSX and components. I will insert List component here.

Next, I make List component.

List.js
```js
import React from 'react';

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

export default List;
```

Finally, I make ButtonAppBar component often called Navbar.

ButtonAppBar
```js
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>
  );
}
```

if you want to use loop components, you use map() method like above.

### 5. fulfill contents

At the end of making website, let's fulfill contents.

Contents.js
```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 };
```

Then I end up making App.js

App.js
```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>
  );
}
```

Eventually the app will look like [this](https://miyuki-room.netlify.app/)

## Conclusion

This time, I just create stateless app. So next I will create statefull and more complex app !