RFR Section 3 – Let’s Start Building Our App


React

Updated Mar 14th, 2022

Table of Contents

Course Summary

Chapter Details

Chapter 16. Starting Our Complex App

Visit course repo at learnwebcode/react-course. Copy/paste somce code. Update the CSS stylesheet. In index.html hollow out body and add a div and script tag. In the “main/js” file paste in your clipboard. convert class attributes to “className.” Control D may be a good tip here. Make JSX friendly. Confirm react powering the interface by adding 3 question marks.

Staying organized: Break things down into bite-sizes components. header, home-guest, footer components. Components folder.

import React from "react"
import "ReactDOM" from "react-router-dom"

function Header () {
  return(
    <>
      Paste in from repo here
    </>
  )
}

export default Header

In the “Main.js” file import the component and then render it in the “return JSX area.”

function Main() {
  return (
  <>
    <Header />
    <HomeGuest />
    <Footer />
  </>
  )
}

Repeat this process for “HomeGuest.js” and “Footer.js” files.

Chapter 17. Routing (Single Page Application)

What is client-side-routing? Most crucial aspect f the web is the address bar and being able to share link addresses. Use JavaScript to load new pages.

Set up “About US” page and “Terms” Page by creating the Javascript files in the components folder.

Not a course about html so copy and paste from the course repo. From where header ends and right before the footer begins. Update class to be className.

In “Main.js” file import and render the About and Terms component.

Display based on URL. Install “react-router-dom” and import {BrowserRouter, Switch, Route} from “react-router-dom.”

Import {BrowserRouter, Switch, Route} from "react-router-dom"

function Main() {
  return(
  <BrowserRouter>
    <Switch>
    <Route path="/" exact>
      <HomeGuest />
    </Route>
    <Route path="/about" exact>
      <About />
    </Route>
    <Route path="/terms" exact>
      <Terms />
    </Route>
    </Switch>
  </BrowserRouter>
  )
}

In the “Footer.js” file, import “Link” from “react-router-dom” and convert the tradition anchor tags to use Javascript to navigate:

import {Link} from "react-router-dom"

<Link to='/about'>About</Link>

Illusion of client-side routing but in order for it to work we always need index.html and we do this in “webpack.config.js” file and set a “historyApiFallback” key to the index.html file.

In the “Header.js” file import “Link” from “react-router-dom” and update the traditional anchor tags to using the Link.

Chapter 18. React Developer Tools

We can see raw HTML tree but it would be nice to see the component tree.

Install chrome extension with +2m users. May need to restart the browser. See two new tabs of Components and Profile.

This can be very useful.

Chapter 19. Creating a Visual Studio Code Snippet

Avoid typing out boiler plate code over and over.

Type snippet into the command palette and look for configure user snippet. We can create global or specific to one language. Search for react. click on JavaScript react and not TypeScript react.

Empty out file and paste in raw code from the repo from “vscode-react-component.txt” “snippet-generator.app” will help you auto-generate converted code to create the snippet you want.

Create a new “Comtainer.js” file and use our new snippet with “rc tab”

Chapter 20. Create a Reusable “Container” Component

All componenents are reuasble but here we mean flexible.

We want to have multiple container widths. Classes like “container” and “container–narrow.” Want to customize the class via props so we don’t have to memorize.

In About.js wrap all of the existing JSx with Container tags.

Need to import Container component in the files you are using it.

Add props to the Container component and in the div add “props.children”

On the opening Container tag we can add a prop of wide and set to true.

We delete the existing classes and add curly brackets to use ternary operator

{"container py-md-5 " + (props.wide ? '' : 'container--narrow')}

Chapter 21. Quick Details & Composition

We want the “title” to change dynamically

Only want code to run the first time the page is rendered and we do this with useEffect

useEffect(() => {
  document.title = "About Us | Complex App"
  window.scrollTo(0,0)
}, [])

But we want this for all pages and don’t want to duplicate our code. Composition is recommended here

Create a “Page.js” file and give it props and cut and paste code above into this and make about us dynamic with ${props.title}

In the “Main.js” swap “Container” for “Page” component. Now use “Container” in the “Page” component. We no longer need useEffect in the “About” component.

Update your other comps like Header to.

Composition is passing props around to different components.