create simple web page in React

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 and source code is here

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.

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

2. install some dependencies

This time, I use Material UI to create components. Then I install it.

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.

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

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

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

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

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

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

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

Conclusion

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