REACTJS PRACTICE BOOKLET
1) What is React?
a) Library b) Framework c) both a&b d) None
2) Why React
3) Who released React?
a) Facebook b) Google c) Microsoft d) None
4) What is current version of React
5) What is JSX?
6) npm stands for
7) npx stands for
8) how to download libraries?
a) npm b) yarn c) both a&b d) None
9) write the installation steps for React?
Step 1.
Step 2.
Step 3.
10) Write steps to create React Application?
Step 1.
Step 2.
Step 3.
11) What is Default Port Number of React?
a) 3000 b) 4200 c) 8080 d) 27017
12) Why node_modules in React Project?
13) Which component is Default Component in React?
14) Which template is main template in React?
15) Where to deploy components in React Applications?
16) Write the Execution flow of React Application
17) What is component? Write minimum 5 points?
1)
2)
3)
4)
5)
18) Draw sample diagram to represent components in React Application?
19) Types of components in React
1) 2)
20) How to enhance Functional Components
21) Hooks introduced in
Prepared by Samba
REACTJS PRACTICE BOOKLET
22) Write the code to create Following Component?
Prepared by Samba
REACTJS PRACTICE BOOKLET
23) Write the code for below diagram
Prepared by Samba
REACTJS PRACTICE BOOKLET
24) Write the code for below diagram?
Prepared by Samba
REACTJS PRACTICE BOOKLET
25) What is state in component?
26) Write the syntax for state in component?
27) How to iterate list in react application?
a) for loop b) while loop c) map function d) None of the Above
28) display the following list in react application?
[“Angular”,” React”,” Node”,” VueJS”,” MongoDB”,” Mern Stack”]
SNO Value
0 Angular
1 React
2 Node
3 VueJS
4 MongoDB
5 Mern Stack
Prepared by Samba
REACTJS PRACTICE BOOKLET
29) display the following Array in the form of a table?
[
{"p_id":111,"p_name":"p_one","p_cost":10000},
{"p_id":222,"p_name":"p_two","p_cost":20000},
{"p_id":333,"p_name":"p_three","p_cost":30000},
{"p_id":444,"p_name":"p_four","p_cost":40000},
{"p_id":555,"p_name":"p_five","p_cost":50000}
]
Result:
p_id p_name p_cost
111 p_one 10000
222 p_two 20000
333 p_three 30000
444 p_four 40000
555 P_five 50000
Prepared by Samba
REACTJS PRACTICE BOOKLET
30) how to do view encapsulation?
a) <></> b) <React.Fragment></React.Fragment> c) both a&b d) None
31) Write the snippet for download react-router-dom@6 package?
npm :
yarn :
32) Show or hide the following message in React Application with conditional Rendering?
Prepared by Samba
REACTJS PRACTICE BOOKLET
33) Implement below example with Conditional Rendering?
Components are: 1) Dashboard
2) Success
3) Failure
Write Conditional Rendering in Dashboard Component, display “Success Component”
based on true and “Failure Component” based on false
Prepared by Samba
REACTJS PRACTICE BOOKLET
34) How to provide communication between components?
a) props b) state c) both a&b d) None
35) implement the below application with props and props drilling
Prepared by Samba
REACTJS PRACTICE BOOKLET
36) implement basic application with props.children
pass “ReactJS” from Parent to Child through props.children
Prepared by Samba
REACTJS PRACTICE BOOKLET
37) implement above example with State
Note: keys data should read from state
Prepared by Samba
REACTJS PRACTICE BOOKLET
38) implement the example to share data from Child Component to Parent Component
Ex.
Share the following data
Key1: “Hello”
Key2: 100
Key3: true
Prepared by Samba
REACTJS PRACTICE BOOKLET
39) write the basic example for click event with 0 parameters
40) write the basic example for double click with 0 parameters
Prepared by Samba
REACTJS PRACTICE BOOKLET
41) write the basic example for click event with two parameters (i.e. ExcelR &
ExcelR@123)
42) write the basic example for double click event with two parameters (i.e. ExcelR &
ExcelR@123)
Prepared by Samba
REACTJS PRACTICE BOOKLET
43) implement the Registration Example
Prepared by Samba
REACTJS PRACTICE BOOKLET
44) implement the Login Example
Prepared by Samba
REACTJS PRACTICE BOOKLET
45) how add CSS to Components and write Examples also?
46) consume below GET Requests and apply Conditional Rendering with Font Awesome
(Spinner)
URL1:
https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&ou
tput=json&tzshift=0
URL2:
https://www.w3schools.com/angular/customers.php
URL3:
https://reqres.in/api/unknown
URL4:
https://restcountries.com/v3.1/all
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
47) implement below GET Requests by id
URL1:
https://reqres.in/api/users?page=2
URL2:
https://reqres.in/api/unknown/2
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
48) implement below POST Requests
URL1: https://reqres.in/api/register
Request data Response data
URL2: https://reqres.in/api/login
Request Data Response data
URL3: https://reqres.in/api/users
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
49) implement the below PUT Requests
URL1: https://reqres.in/api/users/2
Prepared by Samba
REACTJS PRACTICE BOOKLET
50) implement below DELETE Request
URL : https://reqres.in/api/users/2
Prepared by Samba
REACTJS PRACTICE BOOKLET
51) what are Single Page Applications? Write minimum 10 points and Draw the Diagram
1)
2)
3)
4)
5)
6)
7)
8)
9)
10)
Prepared by Samba
REACTJS PRACTICE BOOKLET
52) implement the below application with Single Page Applications
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
53) Implement the Below Application with Single Page Application
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
54) Implement the Below Application with Single Page Applications
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
55) Implement the below application with Single Page Applications
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
56) Implement the Below Application with Single Page Applications
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
57) What is useNavigate () hook in Single Page Applications?
58) What is useParams () hook in single page applications?
59) Pass Routing Parameters in Below Application?
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
60) Make Login Component as Default Component in Below Diagram
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
REACTJS PRACTICE BOOKLET
61) Implement the below project with single page applications?
62) What is <Outlet></Outlet> Component in ReactJS
63) why state management in React?
64) how to implement state management in react?
1) 2)
65) what is redux?
66) draw the architectural diagram for redux
Prepared by Samba
REACTJS PRACTICE BOOKLET
67) what is dispatch?
68) what is Action?
69) what is reducer?
70) can we create more than one reducer (yes/no)
71) what is store?
72) what is state in redux architecture?
73) what is subscribe in redux architecture?
74) what is thunk middleware and draw the architectural diagram
Prepared by Samba
REACTJS PRACTICE BOOKLET
75) what is saga middleware in redux?
76) write the hooks in state management?
1) 2)
77) how to subscribe in redux architecture
78) how to dispatch in redux architecture
79) how to combine reducers in redux architecture
80) consume the below rest api by using redux
https://www.w3schools.com/angular/customers.php (GET Request)
81)
82) consume the below rest api by using redux
http://benfranklinserver-env.eba-5adimdsp.us-west-2.elasticbeanstalk.com/login (post
request)
body --- {“uname”:” ExcelR”,” upwd”:” ExcelR @123”}
83) What is regular expression
84) Write the Syntax for Regular Expression
85) What is ^ operator in Regular Expression
86) What is $ operator in Regular Expression
87) What is \d operator in Regular Expression
88) What is \w operator in Regular Expression
89) What is {} operator in Regular Expression
90) Write the Regular Expression for empty string validation
91) Write the regular expression for
a) Should start with Capital Letter
b) Should contains alpha numeric vales
c) Minimum 6 Characters
d) Maximum 8 Characters
92) Write the Validations for Password
a) Should contain one digit
b) Should contain one capital letter
c) Should contain one lower case letter
Prepared by Samba
REACTJS PRACTICE BOOKLET
d) Should contain one special Character
e) Must contain minimum 8 characters
93) Write the Validation for email
94) Write the Validations for Mobile Number
95) What is lodash package?
96) How to download lodash package by using yarn tool
97) Write the validation for below application (text validation)
98) Write the validation for below application (password validation)
99) Write the validation for below application (email validation)
100) Write the validation for below application (mobile number validation)
101) Write the validations for Login Form
Prepared by Samba
REACTJS PRACTICE BOOKLET
102) Write the Validations for Registration Form
103) Write the life cycle stages of Class Level Components
a) b) c) d)
104) Write the snippet (code) for constructor with state in class level components
105) Write the few life cycle methods in class level components
106) Write the few points related to render () in class level components
a)
b)
c)
d)
e)
Prepared by Samba
REACTJS PRACTICE BOOKLET
107) Write the few points related to componentDidMount () in class level component
a)
b)
c)
d)
e)
108) What is componentWillReceiveProps () in class level components
109) Write the few points related to shouldComponentUpdate () in class level component
110) In initial stage which one will execute in class level components
a) Constructor b) state c) props d) All of the Above
111) In mounting Stage which hooks will execute in class level components?
112) In updation stage if props are changed which life cycle methods will execute?
113) In updation stage if state changed which life cycle methods will execute?
114) In unmounting stage which life cycle method will execute
115) Draw the Diagram for life cycle methods in Class Level Component
Prepared by Samba
REACTJS PRACTICE BOOKLET
Prepared by Samba
