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;
  • importing 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