Creating a REACT component

Every React app is built out of components

You may have one single component in a simple app or a number of components in something more complex.

Simple React components

• can just render a static (hardcoded) HTML markup
• can be dynamically rendered based on a locally saved JSON data
• can be nested into each other to create a more complex app layout
• can be rendered based on a data  provided by a parent component 

The simplest React component just renders a bit of HTML markup

Complex React components

A more complex React components might have more logic inside of them, but at the end of the day, they are also just rendering a bit of HTML markup on the page.

• can include advanced logic that defines what the returned HTML will look like
• can contain its own state 
• can contain lifecycle methods 
• can include custom methods that will be executed when a user clicks on a button for example

Stateless components vs Class components

Simple (stateless) React components

const Headline = () => {
    return <h1>React simple component</h1>

}

The simple React component is a function that returns HTML. In the above example, H1 will be rendered on a page


You can also return multiple lines of HTML like this

The component must only return ONE element (eg. DIV)

const Intro = () => {
    return <div>
        <Headline />
        <p>Welcome to the React world!</p>
    </div>
}

const Intro = () => {
    return (
        <div>
            <Headline />
            <p>Welcome to the React world!</p>
        </div>
    )
}

const Intro = () => (
    <div>
        <Headline />
        <p>Welcome to the React world!</p>
    </div>

)


All three of these components would do the same thing, but including the parenthesis might help with the readability of your components.

Why do we need the containing div around the HTML markup?

It is one of the requirements of JSX, each component can only return one element.

That is why you will need to wrap all your HTML markup into one containing HTML element eg. div or ul.


JSX makes writing your HTML inside of React components more elegant.

Advanced React components (ES6 classes)

Below is an example of React Class Component, sometimes referred to as a smart component.


class App extends React. Component {
    render() {
        return (
            <h1>React for Frontend Developers</h1>
        )
    }
}

It does not make sense to use class for a simple component like that, you should use the stateless component instead.

Let's add a constructor, set current date as the local state of this component and then render it out inside of the H1.

class App extends React. Component {

    // fires before component is mounted
    constructor(props) {

        // makes this refer to this component
        super(props);

        // set local state
        this.state = {
            date: new Date()
        };

    }

    render() {
        return (
            <h1>
                It is {this.state.date.toLocaleTimeString()}.
            </h1>
        )
    }
}


Here we are Adding Local State to a Class.

Firstly we include the constructor with super() and then set the initial state of the App inside of the this. state JavaScript object.


We can now access the date from the state inside of the render method like this: {this.state.date}.

 the Difference between state and props:

Props are read-only
Props cannot be modified

State changes can be asynchronous
The state can be modified using this.setStatus

You can pass some of your state values down to the child components as props

Here is an example of a component that receives props:

// Component that receives props:

const Greetings = (props) => {
    return <p>You have to accept it {props.name}.</p>

}

This component will render the prop name (Peter) if it was passed down from the parent component like this:


<Greetings name={Peter}>


We can then access this prop inside of the return statement as {props.name} 

The main difference between props and state in React is that props are read-only and can not be modified from inside of the component.

If we wanted to change the name rendered inside of Greetings component we would need to go the parent React component, modify the name and pass down the new value.

Destructuring

Instead of creating multiple variables (constants) like this:

const name = this.props.name;
const age = this.props.age;
const isLoggedIn = this.state.isLoggedIn;
const username = this.state.username;


Get used to destructuring like this:

const {name, age} = this.props;
const {isLoggedIn, username} = this.state;



It will save you some typing and make your code more compact.

 Render component into the DOM

To be able to see your React component on the page you will need to use ReactDOM.render() and pass it an HTML element where you want your app to be mounted to.

// your-project-folder/src/index.js

// Import React and ReactDOM

import React from 'react'
import ReactDOM from 'react-dom';
import App from './js/components/App';

// Render component into the DOM - only once per app

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

In the above example, we are firstly importing React and ReactDOM

<!DOCTYPE html>
<html>

      <head></head>
      <body>
              <div id="root"></div>

     </body>


</html>



Then we are importing the App component from another file and mounting it to the page into the div#root element.

You will find this ReactDOM.render() method inside of every React app.

This code is inside of a file called “entry point” and mostly called index.js or similar.