gate5th

npm install -g create-react-app
create-react-app oldschoolshuffle
git init

gate5th

npx create-react-app oldschoolshuffle

gate5th

//index.js
import App from './App'         -------------->      import App from './components/App';

gate5th

//in App.js

render(){
    return (
    <div className="App">
            <header className="App-header">          
                  Old School Shuffle
            </header>
        <div className="featuredPost">
            <p>Featured post here</p>

gate5th

//in App.js

render(){
    return (
    <div className="App">
            <header className="App-header">          
                  Old School Shuffle
            </header>
        <div className="featuredPost">
            <p>Featured post here</p>

gate5th

/*App.css*/

.App {
  margin: auto;
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
  display: grid;        /* Sets the element to grid mode */
  grid-template-columns: 2fr 1fr;  /*  We want 2 columns, with the first column 2/3 of the space */
  grid-column-gap: 20px;         /* give us 20px margin between columns */

gate5th

//on the command line

npm install --save @material-ui/core

gate5th

<!-- add Roboto font to /public/index.html -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

gate5th

//FeaturedPost.js

import React, { Component } from 'react';
import './FeaturedPost.css';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';

class FeaturedPost extends Component {

gate5th

/* FeaturedPost.css */

.FeaturedPost {
    height: 100%;
    display: flex;   /* Flex is more flexible than CSS Grid and better for smaller components */
    align-items: flex-start;
}

.content {
    padding: 10px;