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
- create react app
- install some dependencies
- separate components
- make components
- 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 !
Top comments (0)