2.

REACT FOR JEE FS LAB BOOK

React 2.0 For JEE

Lab Book

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 1 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Document Revision History

Date Revision No. Author Summary of Changes

March 2018 1 Rahul Vikash Created new lab book as per course contents

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 2 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 3 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Table of Contents

Getting Started..……..…………………………………………………………………………… 4

Overview............................................................................................................... 4

Setup Checklist for React......................................................................................4

Instructions............................................................................................................ 5

Learning More....................................................................................................... 5

Lab 1. ES6 React Components & Data Binding.............................................................6

1.2: Create a React Application & display the result shown below........................7

.............................................................................................................................. 7

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 4 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

When we put some data in ID, name, salary, department it will come
automatically come below the submit button shown below...................................7

.............................................................................................................................. 7

Lab 2. React................................................................................................................... 8

2.1. Creating a webpage to work with react..........................................................8

Create a web page in React & display the results shown below...........................8

2.2. Creating a webpage to work with react........................................................11

Click on any header --Id, name, salary, department it will display the list in sorted order
of that header ................................................................................................................. 11

Suppose Clicking on Name header so we will get desired output....................................11

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 5 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

.......................................................11

So by clicking any header data will come in sorted order................................................11

Lab 3: React with Form.................................................................................................. 13

Lab 4: React.................................................................................................................... 13

4.1 Read the booklist.json file with the help of react & display the images shown
below;.................................................................................................................. 14

Lab 5: React CRUD with Java middle ware application (Spring REST) with Router......15

Appendix A: Table of Figures..............................................................................19

Getting Started

Overview

This lab book is a guided tour for learning React For JEE version and above. It comprises ‘To
Do’ assignments. Follow the steps provided to work out the ‘To Do’ assignments given.

Setup Checklist for React

Here’s what is expected on your machine for the lab in order to work.

Minimum System Requirements

 Intel Pentium 90 or higher (P166 recommended)

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 6 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

 Microsoft Windows XP, Windows 7 or Windows 8

 Memory: 2GB of RAM (1GB or more recommended)

 Google Chrome 36.0 or Mozilla Firefox 31.0 or Internet Explorer 10 or above

Please ensure that the following is done:

 A text editor like Notepad or Notepad++ or Eclipse Luna is installed.

 Node.js install with node module

Instructions

 Create a directory by your name in drive <drive>. In this directory, create a

subdirectory react_assgn. For each lab exercise create a directory as lab <lab
number>.

 You may also look up the on-line help provided in react.js

Learning More

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 7 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Lab 1. ES6 React Components & Data Binding

 Understand the ES6 & React data binding components

Goals


Time 60 minutes

1.1 Create ES6 class ,as per below mentioned diagram

All 3 classes are in separate file. We have to add mobile details such as id, name, cost & type
from different typescript file & print data in console
a. Get Data from array

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 8 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

1.2: Create a React Application & display the result shown below

When we put some data in ID, name, salary, department it will come automatically come
below the submit button shown below

When we click on Add employee alert box will open & display all data inserted as shown in given
image

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 9 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Lab 2. React

Goals
 Understand the Directives & Data Binding

Time
180 minutes

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 10 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

2.1. Creating a webpage to work with react

Create a web page in React & display the results shown below.

Show all data comes from array as below :

{empId:1001,empName:"Rahul",empSal:9000,empDep:"Java"},

{empId:1002,empName:"Sachin",empSal:19000,empDep:"OraApps"},

{empId:1003,empName:"Vikash",empSal:29000,empDep:"BI"},

];

When the user enter Id, name, salary & department in Add Employee & click button Add
Employee data will come in Show All Employee & message will display as shown in figure below
–example inserted id 1004,name rashi,salary 87000,department BI

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 11 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

When we click button “Delete” that particular row will be deleted from Show All Employee &
message will come ”DATA Deleted” as shown in below figure –Example delete rows 1003 by
pressing delete button

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 12 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

When we click button “Update” that particular row will be come in Update employee from Show
All Employee & as shown in figure & when updated employee button click the data will update in
show All employee & message will display

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 13 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

After Update employee button clicked data updated in show all employee & message came

2.2. Creating a webpage to work with react

Create a web page and display the results shown below :

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 14 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Click on any header --Id, name, salary, department it will display the list in sorted order of that
header .

Suppose Clicking on Name header so we will get desired output

So by clicking any header data will come in sorted order.

Internal Array: [

{empId:1001,empName:'Rahul',empSal:9000,empDep:'JAVA',empjoiningdate:'6/12/2014'},

{empId:1002,empName:'Vikash',empSal:11000,empDep:'ORAAPS',empjoiningdate:'6/12/2017'},

{empId:1003,empName:'Uma',empSal:12000,empDep:'JAVA',empjoiningdate:'6/12/2010'},

{empId:1004,empName:'Sachin',empSal:11500,empDep:'ORAAPS',empjoiningdate:'11/12/2017'},
©2016 Capgemini. All rights reserved.
The information contained in this document is proprietary and confidential. For Capgemini only. | 15 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

{empId:1005,empName:'Amol',empSal:7000,empDep:'.NET',empjoiningdate:'1/1/2018'},

{empId:1006,empName:'Vishal',empSal:17000,empDep:'BI',empjoiningdate:'9/12/2012'},

{empId:1007,empName:'Rajita',empSal:21000,empDep:'BI',empjoiningdate:'6/7/2014'},

{empId:1008,empName:'Neelima',empSal:81000,empDep:'TESTING',empjoiningdate:'6/17/2015'},

{empId:1009,empName:'Daya',empSal:1000,empDep:'TESTING',empjoiningdate:'6/17/2016'} ];

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 16 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Lab 3: React with Form

Goals  Understand the React form

Time 40 minutes

3. Create a registration form and perform validations on the data entered in the
fields.

Note:
a. Make use of React form
b. All fields are mandatory
c. Product category will be –Grocery, Mobile, Electronics & Cloths
©2016 Capgemini. All rights reserved.
The information contained in this document is proprietary and confidential. For Capgemini only. | 17 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

d. When click on Add Product if all fields are validated the output will
come on console
e. We can select multiple store in Available list

Lab 4: React

Goals Working with react http services & axios redux and thunk

Time 120 minutes

4.1 Read the booklist.json file with the help of react & display the images shown below;

Use booklist.json

4.2: Extended assignment 4.1 read booklist.json & apply search filter on id, title, year &
author ,as shown in diagram

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 18 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

If we Search author, id, title, year only searched value will display in output …..searching K in
author

Searching Book Title …..A

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 19 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Lab 5: React CRUD with Java middle ware application (Spring REST) with
Router

Goals  React with Spring restful with JPA

Time 240 minutes

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 20 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

5. Createa “Movie App” wherein movies could be maintained

according to genres like Fiction, Drama and Satire. There is
also a search option allowing to search for movies.
Use Movies.java
Refer below screen shot:

a. When the user clicks on “Add Movies” -> Allows a User to

add a movie.
The user can add movie(s) depending on Genre (drop-down
list loaded with values [Drama, Fiction, Satire])
The user could add multiple movies. On Adding Movies will
be added in Database with the help of Spring Web services
(Restful). Use Spring restful with JPA concept Refer below
screen shot:

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 21 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Refer below screens for validations:

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 22 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

b. When the user clicks on “Search Movie By Category” -> Allows user to
search movie(s) by Category. [Depending on Genre
(Drama,Fiction,Satire)]

There could be more than one movies depending on same Genre.

Refer below screen shots:

Thus if Searching Movie on ‘Drama’ displays below Result:

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 23 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Thus if Searching Movie on ‘Fiction’ displays below Result:

Note:
f. In above assignment movies are added via “Add Movies” and
Searched via “Search Movie By Category”. These are different
components.
g. Make use of React Forms.
h. Make use of services.
i. Make use of Router Module. Which should be created as a
separate module and included in the main App Module.
j. Use Spring restful & JPA concept to add movies & search movies.
k. All adding & searching movies done through database

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 24 / 25

Capgemini Public
 2. REACT FOR JEE FS LAB BOOK

Appendix A: Table of Figures

Figure 1........................................................................................................................................... 5

Figure 2........................................................................................................................................... 5

Figure 3........................................................................................................................................... 6

Figure 4........................................................................................................................................... 6

Figure 5........................................................................................................................................... 7

Figure 6........................................................................................................................................... 8

Figure 7........................................................................................................................................... 8

Figure 8........................................................................................................................................... 8

Figure 9........................................................................................................................................... 9

Figure 10....................................................................................................................................... 10

Figure 11....................................................................................................................................... 10

©2016 Capgemini. All rights reserved.

The information contained in this document is proprietary and confidential. For Capgemini only. | 25 / 25

Capgemini Public