React Components example

In this tutorial, we’re gonna look at how to create React Components (Nesting Components, too).

Related Posts:
React Hello World example
React Component Props example
React State example
React Note Application – React props and state example

I. Technologies

– React 16
– NodeJs 6.11.2
– NPM 3.10.10
– Yarn 1.5.1
– Babel 6.24.1

II. How to

1. Create a Component

To do this, we extend React.Component, then return template for component inside render() method

2. Create Nesting Component

Nesting Component contains one or many Components. We use tags specified for nested Components like this:

III. Practice

1. Overview


We have 5 Components: NoteApp, Header, Notes, Note, Action.
NoteApp and Notes are nesting Components that contain other Components:
Notes contains 3 Note
NoteApp contains Header, Notes and Action

2. Project Structure


3. Step by Step
3.0 Set up Environment

We need NodeJs, Yarn and Babel to compile and run this example.
Please visit Set up Environment for step by step.

3.1 Set up Project folder

Create folder for BindData project, then make subfolders and subfiles like this:

3.2 Dependency

Open package.json, write these lines for project information and dependency:

3.3 index.html

This is the default HTML file that appears in the browser when we invokes our application.
We also use this HTML file to embed React files and reference to our javascript app.js.

div tag with id="app" for rendering template in the next step.

3.4 app.js

3.5 Run & Check result

– Point cmd to project folder, then run cmd: yarn install.
node_modules folder and yarn.lock file now appear in our project folder:


– Run cmd: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
Now, a new app.js file appear in public/scripts folder, code insides this file was generated automatically (and also update automatically whenever we modify and save src/app.js).

– Open new cmd, point to Project folder, run cmd: live-server public.
Result in Browser:


III. Source code


By grokonez | March 27, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *