React is a JavaScript library used for building user interfaces. ReactJs is used as a base of a single webpage or mobile applications. It deals in the view layer of an application.
It is maintained by Facebook along with the developer community. It is great especially if you are working on single page application and wish to make it fast, responsive and user-friendly.
Advantages of using React:
- It facilitates the overall process of writing components as it uses JSX for templating. JSX is simple JavaScript which allows HTML syntax and other HTML tags in the code.
- ReactJs is very comfortable with SEO. You can easily run your ReactJs with the servers.
- It ensures faster rendering.
- Its component-based approach and well-defined life-cycle are very simple to use.
- It comes with a developer toolset. React Developer Tools is a browser extension available for both Chrome and Firefox.
- It is also used in Mobile app development. Using plain JavaScript and React we can build rich user interfaces for native apps, supported by both iOS and Android platforms.
Interview Questions
1.What is React?
Answer:
It is a Frontend JavaScript Library, developed by Facebook in 2011. It follows component based approach and allows us to create reusable UI components. It is used to develop complex, interactive web as well as mobile UI.
2.What do you understand by Props and State in React?
Answer:
In a React component, props are variables passed to it by its parent component. It is how Components get their properties. They are pure i.e immutable. They are always passed down from parent to child component and they are also used to render dynamic data.
State is also variables, but directly initialized and managed by the component. They determine components rendering and behavior. They are immutable and create dynamic and interactive components. State is accessed using this.state(). We can update the state using this.setState().
3.What are the features of React?
Answer:
->It uses a Virtual DOM (Lightweight JavaScript Object which is the copy of the real DOM).
->It does server-side rendering(the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser).
->It follows Uni-directional data flow.
4.List few advantages of using React over other front-end libraries and frameworks
Answer:
->React comes with a good supply of documentation,tutorials and training resources, hence easy to learn and use.
->React is based on components which have a large advantage as each component has its own logic and controls its own rendering,and can be reused whenever we need them.
->React has great Developer tools. React Developer Tools,available for Chrome and Firefox, is a browser extension for React.It allows us to inspect the React component hierarchies in the Virtual DOM.
->React can be used on client as well as server side.
5.What is JSX?
Answer:
JSX stands for JavaScript XML. It is a syntax extension to JavaScript.In most cases, it looks like a regular HTML but it is neither HTML nor JavaScript. It is used to create React elements which are then rendered to the React DOM. It boosts up the JS performance.
6.Why do we need to transpile JSX before our file gets to the web browser?
Answer:
JSX is not valid JavaScript.Therefore web-browsers cannot directly read it. So any JavaScript file containing JSX will have to be transpiled by JSX Transformers such as BABEL. Hence, before the file gets to the web browser, a JSX compiler will translate any JSX into regular JavaScript.
7.How can you differentiate React from Angular?
Answer:
->React is a library, whereas Angular is an entire framework.
->React uses the Virtual DOM, whereas Angular still uses the Real DOM.
->React uses one-way data binding whereas Angular uses two way data binding.
8.Name the Lifecycle Methods of React components and explain them:
Answer:
-> componentWillMount(): executed just before renderingboth on client and server-side.
-> componentDidMount(): executed after first render only on the client side.
-> componentWillRecieveProps(): invoked as soon as the props are received from parent class before another render is called.
-> shouldComponentUpdate(): Returns true or false based on certain conditions.
-> componentWillUpdate(): called just before rendering takes place.
-> componentDidUpdate(): called just after rendering takes place.
-> componentWillUnmount(): called after the component is unmounted from the DOM.
9.What are components in React?
Answer:
Components are the building blocks of React application's UI. It splits the UI into reusable components and renders each piece independently. Every component has a render() function, which returns a single React element which is the representation of the native DOM component.
10.What is the difference between Stateful and Stateless Components?
Answer:
-> Stateful Components keep track of the changing data. They store information about components state change in memory.
-> Stateless Components calculate the internal state of the components. They contain no information about the changes in state.
11.What are Event handlers in React?
Answer:
Event Handlers help us to create responsive web applications that respond to the user. This way React keeps track of every action that is performed by the user.
Eg:- Resizing a window,clicking a link,scrolling through a page etc.
12.Explain refs in React?
Answer:
refs stands for References. It is used to return references to a particular element or component returned by render(). For focus management,text selection,media playback and trigger animation we use refs in React.
13.What are pure components?
Answer:
They are the simplest and the fastest components. They render the same output for the same state and props.
14.Explain the significance of keys in React
Answer:
In React, Keys are unique identifiers. They are used to identify which items have changed, updated and deleted from the Lists. They are used to identify unique Virtual DOM Elements with their corresponding data driving the UI.
15.How is data shared between components in React?
Answer:
In React, data is shared between components using state and props. This can also be achieved by employing callbacks, using Redux or even by utilizing the React Context API.
Thank You!
Top comments (9)
React itself does NOT have good support for SEO since it is CSR. When your browser load a ReactJS web application, it basically just return a div tag with the id "#root". The whole rendering process is depended on the js file which has been bundled earlier.
React is not Server-side Rendering unless you are using Next.js. Normally your React application will be bundled into js file, which renders the web contents. That's Client-side Rendering.
Awesome!
I also wrote about React interview questions and answers recently, in case anyone wants to check it out after reading your post.
Thank you so much!
This should prove to be a great resource.
I appreciate it.
Can we say "Data can be shared between components by Context API" for 15th question?
Yes sure
Thanks!
The different between React and Angular is React is a library, whlist Angular is a framework contains routing, testing e2e, etc. Angular does not use the real DOM, they use a technique called Incremental DOM which also requires to have a virtual DOM.
I like your article but this statement is highly incorrect pls change because it will give the wrong impression to someone who is unaware
->React uses Server-side Rendering, whereas Angular uses Client-Side Rendering.
Both can be SSRendered and both can be client side rendered
Sure I'll change it.
Thank you so much.