Note: This document is a work in progress. You can help improve it.

Hello, React

Day One - Hello, react

  • react name origin: reacts to its environment

  • create-react-app (ADD TIME)

    • tool built by developers at Facebook to help you build React applications.
    • It saves you from time-consuming setup and configuration. Simply run create-react-app command to create and start a new react project.
    • create-react-app name-of-your-app
    • yarn install then yarn start since we are using yarn not npm
    • localhost:3000 (browser)
  • npm vs yarn

    • both are package managers
    • yarn is slightly better (for the moment)
  • Components

    • React components are small, reusable pieces of code that return a React element to be rendered to the page
  • Props

    • attribute of a component
    • Most components can be customized when they are created, with different parameters. These creation parameters are called props.
  • Rendering multiple components (i.e. map)

    • render method renders only one DOM element
    • DOM element can have as many children as it wants
  • import React, { Component } from "react"; this boilerplate almost always goes on top of every react component

  • react-article-demo (approx 00:39:35)

    // all the files needed need to be imported
    import React, { Component } from 'react'
    import './App.css'
    // import Header component from Header.js in current directory ("./" => current directory)
    import Header from './Header'
    // import Header component from Articles.js in current directory
    import Header from './Articles'
    // import Header component from Footer.js in current directory
    import Header from './Footer'
    
    class App extends Component {
      render() {
        return (
          // DOM element
          <div>
            // children components of DOM element // these components need to
            exist, either within the same page or as separate files and imported
            to the page
            <Header />
            <Articles />
            <Footer />
          </div>
        )
      }
    }
    
    // component needs to be exported so it can be available for other components to import
    export default App
    
  • to add class, use className (approx 01:05:20)

    • <div className="all-main-content"> ... </div>
  • Props (approx 01:12:10)

    import React, { Component } from 'react'
    // import Article component from Article in current directory
    import Article from './Article'
    
    class Articles extends Component {
      render() {
        return (
          <div className="all-main-content">
            <main>
              <Article
                title="Gavin can't spell Artclie"
                content="Gavin can't type on a monday. Thats why. He also went to a party last night"
              />
              <Article
                title="What is wrong with Gavin"
                content="Gavin is tired this morning"
              />
              <Article
                title="Sending Gavin back to school"
                content="If you pay, he will go"
              />
              <Article title="React is cool" content="Hell yeah it is" />
            </main>
          </div>
        )
      }
    }
    
    export default Articles
    
    • Article.js

      • this.props.title will render out each title property in Articles component ("Gavin can't spell Article", "What is wrong with Gavin", "Sending Gavin back to school", "React is cool" )
      • this.props.content will render out each content property in Articles component as this.props.title did with title property
      • You can create unlimited different articles using Article component
      import React, { Component } from 'react'
      
      class Article extends Component {
        render() {
          console.log(this.props)
      
          return (
            <article className="intro-article">
              <h2 className="article-title">{this.props.title}</h2>
              <p>{this.props.content}</p>
              <a className="read-more" href="#">
                read more about {this.props.title}
              </a>
              <div className="read-more-underline" />
            </article>
          )
        }
      }
      
      export default Article
      
  • Loading Props data from somewhere else (approx 01:24:00)

    import React, { Component } from "react";
    import Article from "./Article";
    
    class Articles extends Component {
      render() {
        const data = [
          {
            title: "Gavin can't spell Article",
            content:
               "Gavin can't type on a Monday . That's why. He went to a party last night"
          },
          {
            title: "What is wrong with Gavin",
            content: "Gavin is tired this morning"
          }
        ];
    
        // use map to iterate through each data
        return (
          <div className="all-main-content">
            <main>
              {data.map(element => {
                return <Article title={element.title} content={element.content} />}
                })}
            </main>
          </div>
        );
      }
    }
    
    export default Articles;
    
  • Array.map review (approx 1:32:25)

    • The map() method creates a new array with the results of calling a provided function on every element in the calling array.
      data = [
        {
          title: "Gavin can't spell Article",
          content:
             "Gavin can't type on a Monday . That's why."
        },
        {
          title: "What is wrong with Gavin",
          content: "Gavin is tired this morning"
        }
      ]
    
      // element can be replaced with any string
    
      data.map(element => {
        return `Hello ${element.title} your content is ${element.content}`
        })
    
      // element -> tacoTuesday
      data.map(tacoTuesday => {
        return `Hello ${tacoTuesday.title} your content is ${tacoTuesday.content}`
        })
    
      // Both will return the same thing
    
    -> ['Hello Gavin can\'t spell Article your content is Gavin can\'t type on a Monday. That's why',
        'Hello What is wrong with Gavin your content is Gavin is tired this morning']
    
  • eventually Articles.js code will look like this

    import React, { Component } from 'react'
    import Article from './Article'
    
    class Articles extends Component {
      render() {
        const data = [
          {
            title: "Gavin can't spell Article",
            content:
              "Gavin can't type on a Monday . That's why. He went to a party last night",
          },
          {
            title: 'What is wrong with Gavin',
            content: 'Gavin is tired this morning',
          },
        ]
    
        // save new array in a variable and just refer to it in a DOM
        // (approx 1:39:10)
        const articles = data.map(element => {
          return <Article title={element.title} content={element.content} />
        })
    
        return (
          <div className="all-main-content">
            <main>{articles}</main>
          </div>
        )
      }
    }
    
    export default Articles
    

React is declarative

(approx 1:42:00)

  • React is declarative functional reactive style programming
    • Page will react to the data

Today's work