REACT FACTS

---

Contributors: Trevor Rapp, Bob Ziroll

project completed as an instructor lead tutorial in Scrimba's Front End Developer Career course.

Untitled_.Feb.8.2023.12_49.PM.mp4

---

---

DESCRIPTION:

"You can't control other people's actions. You can only choose how you ReactJS"

-- Trevor Rapp, aspiring React developer and undercover Dad Joke Operator

A basic static page built using React.

---

QUICKSTART GUIDE

To use the app simply click on the View Project button or visit https://trrapp12.github.io/groovy-blocks/.

---

PROJECT DEMONSTRATES:

• Use of State and Props
• Use of JSX
• Use of basic syntax and architecture of React
• Use of parent > child components
• Use of custom composable, reusable components
• Use of Bable and Webpack through Create React App
• Use of git CLI and GitHub repositories
• Use of CSS and images in React environment
• Use of import and export statements
• Use of local server with webpack

---

CHALLENGES I OVERCAME:

• The original scope of the project did not include a light/dark mode. I took on the extra challenge to help me learn how to better use state in a real-world issue I might face. To solve that I had to keep state in the parent app and pass it to the nav component and the main component. I then use ternary operators and props to create elements that would change with state

import React from 'react'
import largeLogo from "../images/large_group.svg"

function Body (props) {

  console.log(props.isDark)

  return (
    <div className={props.isDark ? "body--container" : "body--container background-light"}>
      <h1 className={props.isDark ? "body--title condensed-letter-spacing" : "condensed-letter-spacing font-light"}>Fun Facts about React</h1>
      <ul>
        <li className={props.isDark ? "body--list-items" : "body--list-items font-light"}>Was first released in 2013</li>
        <li className={props.isDark ? "body--list-items" : "body--list-items font-light"}>Was originally created by Jordan Walke</li>
        <li className={props.isDark ? "body--list-items" : "body--list-items font-light"}>Has well over 100K stars on Github</li>
        <li className={props.isDark ? "body--list-items" : "body--list-items font-light"}>Is maintained by Facebook</li>
        <li className={props.isDark ? "body--list-items" : "body--list-items font-light"}>Powers thousands of enterprise apps, including mobile apps</li>
      </ul>
      <img className="large-logo" src={largeLogo} alt="subdued react logo on background"></img>
      <button onClick={() => props.toggle()} id='circle' className={props.isDark ? 'clicked' : 'not-clicked'}>
            <div id="circle" className="circle"></div>
            <div className="empty"></div>
        </button>
    </div>
  )
}

export default Body

---

MY OWN PERSONAL CONTRIBUTIONS INCLUDED

• light / dark mode.

---

SCRIMBA FRONT END DEVELOPER CAREER CERTIFICATE:

This project was completed as part of the Scrimba The Frontend Career Path, which is composed of:

• over 1000 lessons
• over 65 hours of instruction
• over 30 instructor-lead, hands-on projects
• over 15 Solo Projects (completed completely alone, with only Figma files and user stories provided.)

CERTIFICATE OF COMPLETION - The Frontend Developer Career Path.pdf

---

ATTRIBUTIONS

• Course developed and lead by Bob Ziroll as part of Scrimba's Front End Developer Career course.

• This project was bootstrapped with Create React App.

---

YOU CAN FIND ME AT:

*For more information see my LinkedIn, or return to my Github