React JS Tutorial - Components

In this video we are going to learn about components.
Components are the building blocks of any React app and a typical React app will have many of these.
Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.
Now lets create a component inside the react project.
So go to the project and create a folder inside the src directory.
Lets say folder name is components.
Inside the components folder lets create a component.
Lets say component name is Post.js.
Now open this post component and create class component.
So first of import React and component and then create a class as following.


import React, { Component } from 'react'

class Post extends Component {
    render() {
        return (
            <div>
                <h1>This is Post Component.</h1>
            </div>
        )
    }
}

export default Post;

Now import this component into the app.js as following.


import Post from './components/Post';

Now from here just remove <header/>
and her just add here <Post />
Now save the file and lets check.
So go to browser and here you can see here the post Component.
You can reder javascript inside the component.
For that just write javascript code inside the the curly bracket.
So go the post component and here.
Lets print current date time, so just type.