Setting Up the UI Toolkit
We'll cover the following...
In "Project Planning and Setup", we sketched out a feature list and some UI mockups for Project Mini-Mek, created a new project using Create-React-App, added a basic Redux configuration, and enabled the use of Hot Module Replacement so that we could see changes in our UI without having to reload the entire page. In this part, we’ll set up the initial application layout to match our UI mockups, talk about folder structures, and look at an example of managing UI state with Redux.
Choosing a UI Toolkit
There’s a seemingly infinite number of web UI toolkits and CSS frameworks out there, of which Bootstrap and its variations are probably the most popular. I’ve been using Semantic-UI in another project, and been very happy with it. It has a nice appearance out of the box, uses very readable markup, and allows considerable customization for theming, including several built-in theme options for various parts such as buttons.
Semantic-UI consists of two main aspects: CSS-only content for styling, and logic for smarter widgets (such as AJAX fetching capabilities for the Dropdown component). The ...