Code 301 Reading Notes

Class 05

<== Previous Lesson Next Lesson ==>

<== Home 🏠

Elements are what components are “made of”. . .

The only method you must define in a React.Component subclass is called render() . . .

• react-lifecycle-methods-diagram

React Docs

The difference between state and props { Component State } - React Docs

props get passed to the c omponent (similar to function parameters)

whereas state is managed within the component (similar to variables declared within a function).

Things to consider about data in regards to state :

1. Is it passed in from a parent via props? If so, it probably isn’t state.
2. Does it remain unchanged over time? If so, it probably isn’t state.
3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

✏️ RAW NOTES . . . r e p e t i t i o n . . .

What can I remember about rendering Hello World

App.js - default parent, Import React, App(css) and Header.js to the top of this page…then export.

import React from 'react';
import './App.css';
import Header from './Header.js';

class App extends React.Component {
  render(){
    return(
    <div>
      <Header />
    </div>
    )
  }
}

export default App;

Header.js Import React, Header(css) to the top of this page, return: <h1></h1>…then export.

import React from 'react';
import './Header.css';

class Header extends React.Component {
  render() {
    return(<h1>Aloysious remembers bits and pieces</h1>);
  }
}

export default Header; 

Reading

• React Docs - thinking in React

<== Home 🏠