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 [Link] 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.
[Link] 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 [Link]
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 [Link] file with the help of react & display the images shown below;
Use [Link]
4.2: Extended assignment 4.1 read [Link] & 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 [Link]
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
