Today we're going to modernize Monument, a static magazine website. It is now time to refactor some code for use with a modern front-end library: React!
The objective of this lab is to:
- Refactor a static html site to use a component-based approach
- Familiarize yourself with React's filesystem and architecture on your terms
- Create a reusable, robust codebase that can serve as a boilerplate for other work
To refactor the Monument site, first clone this repo
What's included in this repo?
screenshots
directory, which should guide your CSSstatic-starter-site
directory, which is the website we want to refactor. The site has:- two webpages, represented in the html files
index
andblog
- a CSS directory
- the images you'll need to use in your React site
- two webpages, represented in the html files
Suggested implementation
- Create a React application in a new directory. The path to your react app should look something like this:
monument-react-refactor/react-directory-for-refactor
- meaning the React app is on the same level as the README and the screenshots directory. - Copy all of your
html
content (minus thehead
tag) into a new React component. - Copy images and css into a
public
folder. - Link all of the images and styles into your new component. You may overwrite the
index.css
with the original static-starter-site css. - Separate the different pieces of the html into small, logical components.
Suggested components for index.html
:
- NavBar
- Landing
- Header
- Archive
- Article
- Article
- Article
- About
- Gallery
- Contact
- Footer
Suggested components for blog.html
:
- NavBar
- Blog
- Header
- Article
- Sidebar
- Comment
- Footer
Keep components as large as possible until you begin to see opportunities to capitalize on repetition or obvious semantic separations, such as articles, sections, header/main/footer, etc. This will keep your workflow comprehensive and straightforward. One early but major pitfall of React development is the tendency to prematurely optimize components to their smallest kernels. Taking the time to work incrementally ensures consistent code.
The blog
and index
page may share components, but for better organization you can import each piece into a larger blog-component
and landing-page-component
.
The goal of this assignment to review and understand the static html site, and translate that into React components that can be rendered without routing. You can demonstrate the switch between pages by commenting out one page's components at a time.