ReactJS Booklet

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
22) Write the code to create Following Component?
Prepared by Samba
23) Write the code for below diagram
Prepared by Samba
24) Write the code for below diagram?
Prepared by Samba
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
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
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
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
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
36) implement basic application with props.children

pass “ReactJS” from Parent to Child through props.children
Prepared by Samba
37) implement above example with State

Note: keys data should read from state
Prepared by Samba
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
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
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
43) implement the Registration Example
Prepared by Samba
44) implement the Login Example
Prepared by Samba
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
Prepared by Samba
Prepared by Samba
Prepared by Samba
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
Prepared by Samba
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
Prepared by Samba
Prepared by Samba
49) implement the below PUT Requests

URL1: https://reqres.in/api/users/2
Prepared by Samba
50) implement below DELETE Request

URL : https://reqres.in/api/users/2
Prepared by Samba
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
52) implement the below application with Single Page Applications
Prepared by Samba
Prepared by Samba
53) Implement the Below Application with Single Page Application
Prepared by Samba
Prepared by Samba
Prepared by Samba
Prepared by Samba
54) Implement the Below Application with Single Page Applications
Prepared by Samba
Prepared by Samba
Prepared by Samba
Prepared by Samba
55) Implement the below application with Single Page Applications
Prepared by Samba
Prepared by Samba
56) Implement the Below Application with Single Page Applications
Prepared by Samba
Prepared by Samba
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
Prepared by Samba
60) Make Login Component as Default Component in Below Diagram
Prepared by Samba
Prepared by Samba
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
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
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
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
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
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
Prepared by Samba

ReactJS Booklet

Uploaded by

Copyright:

Available Formats

ReactJS Booklet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ReactJS Booklet

Uploaded by

Copyright:

Available Formats

REACTJS PRACTICE BOOKLET

6) npm stands for

13) Which component is Default Component in React?

17) What is component? Write minimum 5 points?

22) Write the code to create Following Component?

23) Write the code for below diagram

24) Write the code for below diagram?

25) What is state in component?

26) Write the syntax for state in component?

27) How to iterate list in react application?

29) display the following Array in the form of a table?

30) how to do view encapsulation?

33) Implement below example with Conditional Rendering?

34) How to provide communication between components?

36) implement basic application with props.children

37) implement above example with State

43) implement the Registration Example

44) implement the Login Example

45) how add CSS to Components and write Examples also?

47) implement below GET Requests by id

48) implement below POST Requests

Request data Response data

49) implement the below PUT Requests

50) implement below DELETE Request

52) implement the below application with Single Page Applications

53) Implement the Below Application with Single Page Application

54) Implement the Below Application with Single Page Applications

55) Implement the below application with Single Page Applications

56) Implement the Below Application with Single Page Applications

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?

60) Make Login Component as Default Component in Below Diagram

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?

66) draw the architectural diagram for redux

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

75) what is saga middleware in redux?

76) write the hooks in state management?

84) Write the Syntax for Regular Expression

92) Write the Validations for Password

d) Should contain one special Character

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)

101) Write the validations for Login Form