Self-evaluation checklist for React

By the end of the React module, you should be able to do all of the following tasks on your own,
without using the internet or referring to previous solutions or any other help.

In fact you should not wait until the end of the module. As and when the relevant lectures are
over, you should check which of these tasks you are able to do with that knowledge.

About the tasks

1. These are some of the most commonly asked questions in the interviews
2. Some of these are coding questions and some are theoretical questions

How to solve the tasks

1. Do not use internet
2. Do not use previous code written by you or anyone else
3. Do not take help of any other person
4. You should be able to do these on your own
5. If you are not able to solve a task, try to recall
a. Was it discussed in any lecture?
i. If yes, watch the recording.
ii. Watch the recording in one go. Close the video and then solve the task
without referring to the video.
iii. Do not copy it blindly
b. Was it similar to one of the assignments?
i. If yes, look at the solution
ii. Close the solution and then solve the task
iii. Do not copy it blindly

Task 1: create-react-app
1. Create a react app using npx
2. Run the server and render the default page in a browser
3. Modify the app to display “Yay! I can create a boilerplate react app on my own, without
using the internet or any other help.”

Task 2: Component
1. Create a react app using npx
2. Create a component
a. Name of the component is Greeting
 b. It should render a message “Hello <name>”
c. The name will be given by the caller of the component
3. Render the Greeting component in App.js
4. Open the React app in a browser. It should display “Hello <name>”

Task 3: Counter App

1. Create a react app using npx command
2. Make 3 buttons. Name it as increment, decrement and reset. There should be a
display box(which will show the counter value).
3. Add on click event to each button. The functionality of each button will be as
follows:
a. Increment will increase the counter value by 1
b. Decrement will decrease the counter value by 1
c. Reset will set counter value to 0

(Note: Don’t use DOM manipulation for making this application.)

Task 4: Form Validations

1. Create a signup form page using React.
2. Form page should contain 1 submit button and 4 input fields.
a. Name
b. Email
c. Password
d. Confirm Password
(Note: All the input fields are required)
3. Add validations to each field. It should show the validation error if any of the input field is
incorrect. Error message for respective fields are:
a. For name, it should only take small case and uppercase alphabets
b. For email id, there should be @
c. For Password, it should be have at least 8 characters. It should include at least 1
capital alphabet, 1 special character, 1 lowercase alphabet and 1 number.
d. For confirm Password, it should be same as password.
4. On clicking submit button it should show a message Hello <username> if all the fields
are correct.

Task 5: Conditional Rendering

1. This task is for practicing conditional rendering concept.
2. Create the app mentioned in the below link. Use conditional rendering for it.
 Reference video for task:
https://drive.google.com/file/d/1aDyOnXGIYCOBS15e2ceygXkYqD144Bbl/view

Task 6: Navigation
1. Create a react app using npx
2. Your project should have 3 routes
a. Default route i.e / , should display a button with image written on it.
b. After clicking on button, it should redirect to /image route and this page should
display the image.
c. After clicking on image it should redirect you to /description route and
description route should have description about the image and a button with
home written on it.
d. On clicking home button it should redirect you to default route.

Task 7 : Life Cycle Methods

1. Create a react app using npx
2. Create counter App as mentioned in Task 5
3. Print “rendered” in console everytime it re-renders the component.
4. Use console.log statement in write part of the class based component.

Commonly asked interview questions

a. What is React
b. What is Virtual DOM
c. What is JSX
d. What are Props
e. What are Hooks
f. What are components
g. What is useState and what is useEffect
h. What is the difference between Functional Component and Class
Component. Student should be able to create calculator application using
functional component as well as class component.
i. What is Library and Framework. And React is a Library or Framework?
j. React Lifecycle methods.