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.
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.
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.
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.
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.
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.
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.
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 |
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.
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 |
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.
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'));
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
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()
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. |
17) What are the higher-order components?
- Custom components that wrap other components.
- They accept dynamically provided child components.
- Are pure functions.
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.
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'}/>
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. -
thiswill 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.
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. 🙂
Top comments (26)
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!
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. 💯🙌🏽
In case you wonder what are the arrow functions:
(x) => ({})is equivalent tofunction(x) { return {} }.bind(this)Yeah, I read about it in free code camp. But using arrow functions is easier.
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
Awesome continuation to the series 😆!! Bookmarked 👌.
Hahaha, the series will have more posts for sure.
🙌🏽🎉
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.
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 :)
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!
Thanks, I hope they help in any way. 💯🙌🏽🎉
Thank you so much jane
Anytime. 🙂💯🙌🏽
Great article. Thank you for this.
Thank you, Alex. Hope it was helpful in any way. 💯🙌🏽
Great questions! Well done 🙌
I think that those would be a great contributions to the quizapi.io/ project 🐱👤
Thank you, Bobby. 🙌🏽💯
Label, isn't it like this?
<label htmlFor = {'name'}> </label>Yes. The > was added in the wrong place as I made some changes.
Thank you. 💯🙌🏽