Post date: Sep 25, 2018 10:37 PM
This week, I began the process of building the website itself, and setting up all of its needed boilerplate. For this particular project, we elected to use React with Webpack and Babel. React provides us with a framework to build dynamic websites out of modular components. Babel allows us to use more modern ECMAScript syntax and features, as well as React’s JSX syntax. The JSX syntax enables creating React components with HTML-like syntax. As an example, <h1>Hello world</h1> is rendered as a header containing the text “Hello world.” Webpack bundles all of our code into a single file that can be easily distributed as part of the website.
To handle routing between different pages, we opted to use the react-router-dom package. This allows us to create routes as React pages, and simplifies the creation of a web server, because we can simply redirect all routes to our index.html file and let React handle the rest.
For styling, we chose to use the material-ui package. This provides us with a set of React components adhering to Google’s Material Design standard, as well as a means for styling the components in the JavaScript files themselves.
Currently, we have only a few placeholder pages created, namely a home page, an about page, a contact page, a page listing all artifacts, and a page for any given artifact. With that said, these pages have no content yet. However, it gives us a skeleton of the project to work from and to rapidly add content to.
-Ben Hetherington