React Components


In the previous lesson, we learned how to write pure React code in the web browser. In this lesson, we will move one step forward and create our first component. This has to be executed using Node.js. You can learn more about Node.js in lesson #3 React Installation & Configuration.

Creating your first component in React

React components are the core building blocks of the React application. React components are created when you extend from the React’s component class. To create a component in the React, you must be familiar with import/export, and classes in the JavaScript ES6.


React application folder Structure

Once you have installed the create-react-app, you will have a directory structure as follows:

React Components

You will see node_modules, public, src directory, along with the .gitinore, package.json, package-lock.json, and readme.md inside that folder.


The SRC folder

These are the files inside the SRC directory.

Delete all files in SRC folder. Don’t worry, we will create files from scratch.

Create react component step by step

The index file

Create the index file. It will be the same as the previous lesson:

<!doctype HTML>
<html lang="en">
   <head>
      <title>First program in React</title>
   </head>
   <body>
      <div id="root"> </div>
   </body>
</html>

The JS File

Now create index.js

In index.js you have to import React and ReactDOM,

import React, {
    Component
} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    render() {
        return (

            // JSX code here.
        )
    }
}

Inside the return, we put JSX code. We are not returning a string here, so no need of using single or double quotes around JSX code.

class App extends Component {
    render() {
        return (

            <h1> Hello World! </h1>

        )
    }
}

In the end, we are going to use the ReactDOM render() method.

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

To check if you have the Node.js installed on your PC, go to command prompt and enter node –v command. This should print the version of node.js. You need at least node version 5 or above to run React.

Now cd to your create-react-app location which is D:\reactcuorse from lesson #3.

On the command prompt, write

npm start and hit enter.

If everything goes okay, the development server will go live and you will see Hello World in the web browser.

Great!

You have just created the first component in React.

React Component

Now, if I want to display a paragraph with <h1> tag, React will generate an error.

class App extends Component {
    render() {
        return (

            <h1> Hello World! </h1><p> some text</p>

        )
    }
}
React Error

To correct this, you have to enclosed <h1> and <p> tag inside another <div> tag.

class App extends Component {
    render() {
        return ( <div>
            <
            h1 > Hello World! < /h1><p> some text</p>
            </div>
        )
    }
React ‘Hello World’

Properties in Component

A component can also receive props. The concept is similar to how functions can receive the parameters. A property can also contain a function.

The properties of a component can be accessed through the object ‘props’.
Let’s say you want to modify the above example to print Hello John instead of Hello world.

class App extends Component {
    render() {
        return ( <div>
            <h1> Hello {
                this.props.name
            }! </h1> </div>
        )
    }
}

ReactDOM.render(<App name="John"/>, document.getElementById('root'))

A component is a separate entity and can be rendered within DOM or any other component.

This concludes our lesson on a very basic component. If you have a question about how components are created or receive props, please feel free to ask it in the comments section below.

React First Program Tutorial Home React Functional Components

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply