ReactJS
i
, ReactJS
About the Tutorial
React is an open source, JavaScript library for developing user interface (UI) in web
application. React is developed and released by Facebook. Facebook is continuously
working on the React library and enhancing it by fixing bugs and introducing new features.
This tutorial starts with the architecture of React, how-to guide to setup projects, creating
components, JSX and then walks through advanced concepts like state management, form
programming, routing and finally conclude with step by step working example.
Audience
This tutorial is prepared for professionals who are aspiring to make a career in the field of
developing front-end web application. This tutorial is intended to make you comfortable in
getting started with the React concepts with examples.
Prerequisites
Before proceeding with the various types of concepts given in this tutorial, we assume that
the readers have the basic knowledge in HTML, CSS and OOPS concepts. In addition to
this, it will be very helpful, if the readers have a sound knowledge in JavaScript.
Copyright & Disclaimer
Copyright 2021 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at
ii
, ReactJS
Table of Contents
About the Tutorial ........................................................................................................................................... ii
Audience .......................................................................................................................................................... ii
Prerequisites .................................................................................................................................................... ii
Copyright & Disclaimer .................................................................................................................................... ii
Table of Contents ........................................................................................................................................... iii
1. ReactJS — Introduction ............................................................................................................................. 1
React versions.................................................................................................................................................. 1
Features ........................................................................................................................................................... 1
Benefits ............................................................................................................................................................ 1
Applications ..................................................................................................................................................... 1
2. ReactJS — Installation ............................................................................................................................... 3
Toolchain ......................................................................................................................................................... 3
The serve static server ..................................................................................................................................... 4
Babel compiler ................................................................................................................................................. 5
Create React App toolchain ............................................................................................................................. 5
3. ReactJS — Architecture ............................................................................................................................. 7
Workflow of a React application ..................................................................................................................... 7
Architecture of the React Application ........................................................................................................... 11
4. React — Creating a React Application ..................................................................................................... 13
Using CDN ...................................................................................................................................................... 13
Using Create React App tool .......................................................................................................................... 15
Files and folders............................................................................................................................................. 16
Source code of the application ...................................................................................................................... 18
Customize the code ....................................................................................................................................... 19
Run the application ....................................................................................................................................... 20
Using custom solution ................................................................................................................................... 21
iii
, ReactJS
Using Rollup bundler ..................................................................................................................................... 21
Using Parcel bundler...................................................................................................................................... 26
5. React — JSX ............................................................................................................................................ 30
Expressions .................................................................................................................................................... 30
Functions ....................................................................................................................................................... 31
Attributes....................................................................................................................................................... 31
Expression in attributes ................................................................................................................................. 32
6. ReactJS — Component ............................................................................................................................ 33
Creating a React component ......................................................................................................................... 33
Creating a class component .......................................................................................................................... 34
Creating a function component ..................................................................................................................... 36
7. React — Styling ....................................................................................................................................... 38
CSS stylesheet ................................................................................................................................................ 38
Inline Styling .................................................................................................................................................. 39
CSS Modules .................................................................................................................................................. 40
8. React — Properties (props) ..................................................................................................................... 43
Create a component using properties ........................................................................................................... 43
Nested components ...................................................................................................................................... 48
Use components ............................................................................................................................................ 51
Component collection ................................................................................................................................... 53
9. React — Event management ................................................................................................................... 59
Introduce events in Expense manager app ................................................................................................... 64
10. React — State Management ................................................................................................................... 69
What is state? ................................................................................................................................................ 69
State management API .................................................................................................................................. 69
Stateless component ..................................................................................................................................... 70
Create a stateful component ......................................................................................................................... 71
Introduce state in expense manager app ...................................................................................................... 74
iv
i
, ReactJS
About the Tutorial
React is an open source, JavaScript library for developing user interface (UI) in web
application. React is developed and released by Facebook. Facebook is continuously
working on the React library and enhancing it by fixing bugs and introducing new features.
This tutorial starts with the architecture of React, how-to guide to setup projects, creating
components, JSX and then walks through advanced concepts like state management, form
programming, routing and finally conclude with step by step working example.
Audience
This tutorial is prepared for professionals who are aspiring to make a career in the field of
developing front-end web application. This tutorial is intended to make you comfortable in
getting started with the React concepts with examples.
Prerequisites
Before proceeding with the various types of concepts given in this tutorial, we assume that
the readers have the basic knowledge in HTML, CSS and OOPS concepts. In addition to
this, it will be very helpful, if the readers have a sound knowledge in JavaScript.
Copyright & Disclaimer
Copyright 2021 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at
ii
, ReactJS
Table of Contents
About the Tutorial ........................................................................................................................................... ii
Audience .......................................................................................................................................................... ii
Prerequisites .................................................................................................................................................... ii
Copyright & Disclaimer .................................................................................................................................... ii
Table of Contents ........................................................................................................................................... iii
1. ReactJS — Introduction ............................................................................................................................. 1
React versions.................................................................................................................................................. 1
Features ........................................................................................................................................................... 1
Benefits ............................................................................................................................................................ 1
Applications ..................................................................................................................................................... 1
2. ReactJS — Installation ............................................................................................................................... 3
Toolchain ......................................................................................................................................................... 3
The serve static server ..................................................................................................................................... 4
Babel compiler ................................................................................................................................................. 5
Create React App toolchain ............................................................................................................................. 5
3. ReactJS — Architecture ............................................................................................................................. 7
Workflow of a React application ..................................................................................................................... 7
Architecture of the React Application ........................................................................................................... 11
4. React — Creating a React Application ..................................................................................................... 13
Using CDN ...................................................................................................................................................... 13
Using Create React App tool .......................................................................................................................... 15
Files and folders............................................................................................................................................. 16
Source code of the application ...................................................................................................................... 18
Customize the code ....................................................................................................................................... 19
Run the application ....................................................................................................................................... 20
Using custom solution ................................................................................................................................... 21
iii
, ReactJS
Using Rollup bundler ..................................................................................................................................... 21
Using Parcel bundler...................................................................................................................................... 26
5. React — JSX ............................................................................................................................................ 30
Expressions .................................................................................................................................................... 30
Functions ....................................................................................................................................................... 31
Attributes....................................................................................................................................................... 31
Expression in attributes ................................................................................................................................. 32
6. ReactJS — Component ............................................................................................................................ 33
Creating a React component ......................................................................................................................... 33
Creating a class component .......................................................................................................................... 34
Creating a function component ..................................................................................................................... 36
7. React — Styling ....................................................................................................................................... 38
CSS stylesheet ................................................................................................................................................ 38
Inline Styling .................................................................................................................................................. 39
CSS Modules .................................................................................................................................................. 40
8. React — Properties (props) ..................................................................................................................... 43
Create a component using properties ........................................................................................................... 43
Nested components ...................................................................................................................................... 48
Use components ............................................................................................................................................ 51
Component collection ................................................................................................................................... 53
9. React — Event management ................................................................................................................... 59
Introduce events in Expense manager app ................................................................................................... 64
10. React — State Management ................................................................................................................... 69
What is state? ................................................................................................................................................ 69
State management API .................................................................................................................................. 69
Stateless component ..................................................................................................................................... 70
Create a stateful component ......................................................................................................................... 71
Introduce state in expense manager app ...................................................................................................... 74
iv
