DEV Community

Cover image for create simple web page in React
Miyuki☆Starmiya
Miyuki☆Starmiya

Posted on

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
Enter fullscreen mode Exit fullscreen mode

2. install some dependencies

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

npm install @mui/material
Enter fullscreen mode Exit fullscreen mode

3. separate components

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

dismantled page

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 !

Top comments (0)