Smok Code's video: React Couse 03: Material Design

Building beautiful web pages with React doesn't have to be hard. It's actually very easy! Here I create a simple layout from scratch. Check out the full tutorial, and drop me a comment if you learned something! Repo: https://github.com/Drakemor/ReactFromZero Start: https://github.com/Drakemor/ReactFromZero/commit/fb1019225b4ea209b5c8fded211e622fa312b650 Finish: https://github.com/Drakemor/ReactFromZero/commit/f56e6a0f674be280f25c54c6bacae436ea1e4170 MD Colors: https://material-ui.com/customization/color/ In this series we’re developing a front-end for a CRUD application with React. End goal is to build an app where users can store their RPG characters, edit and share them with other players. Check the description for a link to current commit on github repo. Oh and also - there’s a convenient node package for react. Let’s open a console and instal it: npm install @material-ui/core Now we’re ready to import Components from Material modules. As you know we’re building a webpage to create and present game character profiles. What views are we going to need here? landing page a character list a full-page, detailed view of character and character management view All of these should be wrapped in a common root that would provide navigation bar, default theme, headers and footers. Let’s start with that. I’ll place this in App.js. First we want to make sure that no matter what browser is used - all paddings, margins and such are the same. To do it - we can use the CssBaseline component. Let’s import { CssBaseline } from '@material-ui/core' and add it to the page. We’ll also remove style files provided by create-react-app: remove the import lines in App.js and index.js Wrapping the content in Container class allows us to limit how wide the webpage will be, and have the same margins on both sides. We can already see it’s looking way better. Now for the Navigation: In the NavBar.js we’d like to import AppBar, Toolbar and Button, and wrap our router-links in Material-UI elements. AppBar provides background and shading, Toolbar will arrange elements in a single row, and Buttons - well, they provide animation effect when clicking. To use the Link component from the router internally - we can pass the component prop to each button. We’re almost done with the main setup. I’d like to set up my own colors here and there, so let’s add some custom styling. To do it in a single place I’ll create a new component that will wrap my entire app: Theme.js I don’t want to everything from scratch, so I’ll just use material-ui color webpage to come up with something nice: https://material-ui.com/customization/color/ Scrolling down to playground we can two most important colors - we’ll use this hash to create a MuiTheme. Let’s import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; and chosen colors: import { deepPurple, amber } from '@material-ui/core/colors'; I’ll copy the hash from the color customization tool over… And I’ll export a default function which will wrap all children in ThemeProvider with my custom theme. This way I can keep all the details here. Let’s replace the fragment in App.js with my Theme component and see this in action. That’s great. Another customisation I want to make here is the background color: I want the body background to be dark, but the actual page should stay white. Let’s start by setting default background color in my theme: background: { default: " " }, It works, but I’m missing the second piece - the white background under the text. Solution is simple - wrap everything in the root Container a Paper component. I’m going to set the minimal height just for good measure: style={{minHeight: "95vh"}} We completed building our basic framing for the views. Now let’s move over to our landing page. This is going to be really simple - I just want a hello message and subtitle, maybe over a nice elevated card.