Learning React Essentials 2

Components and Props

Component and props(properties) is the building blocks of React.

• Javascript : input => function => output
• React : property => component => element

Component

Component is an important subject in React since React is component-based. Think of it as class in Python, function in Javascript, meaning it is a template used to make objects. Component should act like pure functions, maintaining props. Component name should always start with Capital.

• name starts with lower case => tag
• name starts with upper case => component

Types of React components is as follows :

• Stateless functional component : Pure function. If take the same input, returns the same output. Does not use internal state.
• Stateful class component : Use internal state.

A common practice is to minimize statefulness and exploit stateless functional component whenever possible. It improves apllication development/maintenance.

Stacking too many elements in a component is a overkill. By spliting elements in a component, a reusuable UI component can be made. Classify related elements and make them a component for future reuse.

If a component returns null, it won't be rendered. For example, look at below codes.

function MyComponent(props) { 
    // Javascript value here
    if (!props.shouldRender) {
        return null;
    } 
    return ( // parenthesis() are used to return an object. not required to express a single line. curly braces {} are used to evaluate JS expression. 
        <h1>Component rendered!</h1> // JSX value here
        <h2>Try again!</h2>
    );
}

What is a super in class component?

// initialize state
constructor(props) {
    //  Must call super constructor in derived class
    //  before accessing 'this' or returning from derived constructor
    // super is a parent class contructor, which defines 'this' keyword.
    // without super(props) defined, 'this' keyword won't be available below codes.
    // see here for more details : https://overreacted.io/why-do-we-write-super-props/#:~:text=In%20JavaScript%2C%20super%20refers%20to,ve%20called%20the%20parent%20constructor.
    super(props);
    this.state = {
      btnName : "hello react"
    };
  }

// Bookshelf component
function Bookshelf(props) { // property
    return <li>{props.title} is in {props.category} section.</li> // element
}

function Card() {
    return (
        <div>
            <Bookshelf title="Hello React" category="front end"/>
            <Bookshelf title="Introduction to VR" category="VR/AR"/>
            <Bookshelf title="Mastering Go" category="Backend"/>
        </div>
    );
}

// ReactDOM.render(element, container)
ReactDOM.render( 
    <Card />, // component name : Card
    document.getElementById('root')
); 

Controlled Input

To add data to backend side, we need to add a POST request in front end side. Input values in form tag will be changed based on React state changes, meaning form values and states are synced with each other.

handleChange(event) {
    this.setState( {
        value: event.target.value.toUpperCase() // change what user typed into uppercase. 
    });
}

Form elements that are controlled by React, meaning that the state of the elements is stored in a state and only can be changed with setState method. It has a merit that a developer can control user input with the setState method.

HTML file tag is an uncontrolled component since it is read-only.

<form action="http:localhost/example.html" method="post" enctype="multipart/form-data" >
    <input type="file" />
</form>

What is input null value? (tap to unfold)If input has a null value, it enables to enter some data. If not(when some value is hard-coded), not enabled.

Property

Props are inputs to the components. They are read-only and pure.

React components in website (click to unfold)

• 

• 

Default Props and Props Type Check

You can set default prop in React. React assigns default props if the props are undefined. When null passed, it will remain null. Note that propTypes and defaultProps is set through object.

function MyComponent() {
    return <p>Hello React</p>
}
MyComponent.defaultProps = { author: "Jake Sung" }

Also, prop type checking is supported with PropTypes.type.

function MyComponent() {
    return <p>Hello React</p>
}
MyComponent.propTypes = { myFunc : PropTypes.func.isRequired }
// As of React v15.5.0++, PropTypes is independently imported.
import PropTypes from 'prop-types'