loading...
Cover image for 20 Basic React Questions to help you as you learn

20 Basic React Questions to help you as you learn

tracycss profile image Jane Tracy πŸ‘©πŸ½β€πŸ’» ・6 min read

Learning React can be challenging in the first few weeks. Getting to know how to use props when to use class or functional components. I am still on this journey of learning React and I found it helpful to use some basic beginner questions that I can be asking myself every week. This is a good way to help me understand the fundamentals plus repetition will make recall easier. I used some of my favorite resources I came across this week. I will post the question and answers plus the source link that I got them from. I will not be diving into redux or hooks, just basic common React questions for now. As I advance, I will definitely write a part two with more complex questions.
If you are learning React too, you can use these questions to ask yourself every Friday and with time it will be easier to recall the answers. Don't wait to rush through them when you are getting ready for the interview.

learning gif

React Questions

1) What is React

  • Front end Javascript library
  • Developed by Facebook in 2011
  • Follows component-based approach
  • It allows you to create reusable UI components
  • Used to develop complex, interactive web as well as mobile UI
  • Open-Sourced in 2015 and has a strong foundation and large community.

✨ Source link

2) Feature of React

  • Uses Virtual Dom
  • Does Server-side rendering
  • Follow Unidirectional data flow ie one-way data binding. React’s data flow between components is uni-directional (from parent to child only).
  • Uses reusable/composable UI components to develop the view.

✨ Source link - Edureka

3) Advantages and disadvantages of React

Advantages

  • Easy to know how a component is rendered, you just look at the render function.
  • JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
  • You can render React on the server-side.
  • It is easy to test, and you can also integrate some tools like jest.
  • It ensures readability and makes maintainability easier.
  • You can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.

Disadvantages

  • It is only a view layer, you have still to plug your code for Ajax requests, events, etc.
  • The library itself is pretty large.
  • The learning curve can be steep.

✨ Source link - Stackoverflow

4) What is JSX

  • JSX stands for Javascript XML- eXtensible Markup Language.
  • Utilizes the expressiveness of Javascript with an HTML - like templates syntax.
  • Makes HTML easy to understand.
  • It is Robust
  • Boosts up the JS performance.
  • JSX expression must have only the outermost element.

✨ Source link - Edureka

5) What is the Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or β€œvirtual”, representation of a UI is kept in memory and synced with the β€œreal” DOM by a library such as ReactDOM. This process is called reconciliation.

✨ Source - React Docs

6) How does virtual Dom work?

  • Whenever any underlying data changes, the entire UI is re-rendered in Virtual Dom representation.
  • Then the difference between the previous DOM representation and the new one is calculated.
  • Once the calculation is done, the real DOM will be updated with only the things that have actually changed.

✨ Source link - Edureka

7) Difference between the Virtual DOM and the Real DOM

Virtual DOM Real DOM
Updates faster Updates slower
Can't directly update HTML Can directly update HTML
Updates if JSX element renders If elements updates it creates a new a DOM
No DOM manipulation expense DOM manipulation is very expensive
No memory wastage Too much of memory wastage

✨ Source link - Edureka

8) Why can't the browser not read JSX

  • JSX is not a regular Javascript
  • Browsers can read Javascript objects only.
  • JSX file is converted to JS object by JSX Transformer link Babel that converts it before reaching the browser.

✨ Source link - Edureka

9) How React is different from Angular?

Topic React Angular
1) Architecture Only view MVC Complete MVC
2) Rendering Server-side rendering Client-side rendering
3) DOM Uses virtual DOM Uses real DOM
4) Data Binding One-way data binding Two-way data binding
5) Debbuging Compile time debugging Run time debugging
6) Author Facebook Google

✨ Source link - Edureka

10) 'In React everything is a component', Explain?

  • First, components are the building blocks of React User Interface.
  • Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
  • Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called β€œprops”) and return React elements describing what should appear on the screen.

✨ Source - React Docs

11) Explain the purpose of render function

  • The render function is used to update the user interface
  • It returns a single React element which is the representation of the native DOM component.
  • To render a React element into a root DOM node, pass both to ReactDOM.render()
const title = <h1>Hello, world</h1>;
ReactDOM.render(title, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

✨ Source link - React Docs

12) What are props in React
  • Props stand for properties of a component.
  • Are pure ie immutable.
  • Always passed down from parent to child component.
  • Used to render dynamic data

✨ Source link - Edureka

13) What is state in React

  • State is an in-built object in React that helps the components to create and manage their data.
  • Determines components rendering and behavior.
  • Creates dynamic and interactive components
  • It is accessed via this.state()
  • Can update the state using this.setState()

✨ Source link - Edureka

14) What is an event in React

  • An event is a result of a triggered reaction from specific action like a mouse click, mouse hover, keypress, etc.
  • Events in React are similar to vanilla Javascript events.

15) Modularize code in React

  • This simply means putting your code in independent modules or files.
  • You can use the import and export method and use components from different components.

16) Difference between controlled and uncontrolled components

Controlled Components Uncontrolled Components
Do not maintain their own state Maintain their own state.
{Data is controlled by the parent component Data is controlled by the DOM
Takes in current values through props and notifies changes via callbacks Refs get their current value.

✨ Source link - Edureka

17) What are the higher-order components?

  • Custom components that wrap other components.
  • They accept dynamically provided child components.
  • Are pure functions.

✨ Source link - Edureka

18) What is the significance of keys in React?

  • Used to identify unique virtual DOM Elements with their corresponding data driving the UI.
  • Helps React to optimize rendering by recycling existing DOM elements.
  • Keys must be a unique number or string.
  • Application's performance increases.

✨ Source link - Edureka

19) How to use React label element

Instead of using for="" like in HTML, you use htmlFor="" attribute.

<label htmlFor = {'name'}> </label>
<input type={'text} id={'name'}/> 
Enter fullscreen mode Exit fullscreen mode

20) Why are arrow function used in React

  • Arrow functions are useful when you want this to refer to the parent component.
  • Arrow function don't it's own this.
  • this will be inherited from its enclosing scope.

In conclusion

I have linked the resources where I got the questions and answers. You can use them to go them deeper into the question you didn't understand or couldn't answer on the first go. Keep asking yourself 3 questions a day and see how you are progressing in your journey. The more you can explain them in detail without googling the more you are getting better at it.

relaxing girl gif

If you find this post useful share it with your peers or beginners who learning React JS and might find these questions useful to their journey. You can also buy me coffee. πŸ™‚

Buy Me A Coffee

Discussion

pic
Editor guide
Collapse
mirokole profile image
MiroKoLe

When I'm at work I obviously can't code so I read documentation (pls don't tell my boss hehe). And this is by far my favorite read.

This explanations are very clear, interesting and understandable. I'm a beginner in JS and React world so this helps me a lot.

Thank you!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Haha, I won't tell your boss, I promise. πŸ™‚
Yeah, the links are where I got the question and answers from. I thought it would be useful if I shared them with my fellow beginners on the same journey as me.
Glad they helped in any way. πŸ’―πŸ™ŒπŸ½

Collapse
promikecoder2020 profile image
ProMikeCoder2020

Remember than when you use virtual Dom under the hood the framework uses real dom manipulation at some point. The myth that this was faster than connecting directly to the real DOM has been disproven many many times

Collapse
alexmelw profile image
Alex Melvin

In case you wonder what are the arrow functions:
(x) => ({}) is equivalent to function(x) { return {} }.bind(this)

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Yeah, I read about it in free code camp. But using arrow functions is easier.

Collapse
mshajid profile image
mshajid

Well, This is a very comprehensive guide for react newbies, but I'm not agreeing on what you'd stated on the last statement, "Don't Google", by Googling helped me to find this goldmine.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

I didn't say don't google. I said you can explain the basics without googling, that means you actually understand the concepts.
In most interviews, I am sure if they ask you to explain what arrow functions or advantages of react. They want to hear you explain it with your own words and how you understand it and not google it.
But hey, if they are okay with you googling the basic questions, it's still amazing. Do what works for you :)

Collapse
alexkimeu0 profile image
Alex Kimeu

Great article. Thank you for this.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thank you, Alex. Hope it was helpful in any way. πŸ’―πŸ™ŒπŸ½

Collapse
pony profile image
Pony

Hey, you are good at pointing the key features in React,
Thanks

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Glad it helped in any way. πŸ™ŒπŸ½πŸ™‚

Collapse
ljcdev profile image
ljc-dev

Awesome continuation to the series πŸ˜†!! Bookmarked πŸ‘Œ.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Hahaha, the series will have more posts for sure.
πŸ™ŒπŸ½πŸŽ‰

Collapse
ashiquens profile image
____ash__________

Thank you so much jane

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Anytime. πŸ™‚πŸ’―πŸ™ŒπŸ½

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thank you so much, Max. Glad you find them useful in any way. πŸŽ‰πŸ™ŒπŸ½

Collapse
bobbyiliev profile image
Bobby Iliev

Great questions! Well done πŸ™Œ

I think that those would be a great contributions to the quizapi.io/ project πŸ±β€πŸ‘€

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thank you, Bobby. πŸ™ŒπŸ½πŸ’―

Collapse
k8hansen profile image
Kate Hansen

I wish I would have had access to this awesome outline when I started learning! Awesome job with a clear summary on all major points. Thanks for this!

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Thanks, I hope they help in any way. πŸ’―πŸ™ŒπŸ½πŸŽ‰

Collapse
picwellwisher12pk profile image
Amir Hameed

Label, isn't it like this?

<label htmlFor = {'name'}> </label>

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Yes. The > was added in the wrong place as I made some changes.
Thank you. πŸ’―πŸ™ŒπŸ½

Collapse
quantumk9 profile image
QuantumK9

Very nice and helpful post!! Even if you know the concepts, this is a great way to reflect on what you know (or think you do )

Thank you! :)

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Yeah. When you repeat questions and answer then like you are explaining to a beginner, they will stick. This will be easier even during interviews :)

Collapse
abulfazlhaidary profile image
Abulfazl Haidary

Thank you very much for this great article.

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» Author

Glad it will help in any way :)