1.What is JSX?
JSX is nothing but power of react which give us the power to use html and JavaScript together .
Look at the variable declaration which is given bellow:
const element = <h1>Hello, world!</h1>;
This looks funny but this the power of JSX which allow us this syntax tax to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind us of a template language, but it comes with the full power of JavaScript. JSX produces React elements. We will explore rendering them to the DOM in the next section.
2.What are Pure Components?
React component is considered a Pure Component if it renders the same output for the same state and props value. React provides the PureComponent base class for these class components. Class components that extend the React.PureComponent class are treated as pure components.
It is the same as Component except that Pure Components take care of shouldComponentUpdate by itself, it does the shallow comparison on the state and props data. If the previous state and props data is the same as the next props or state, the component is not Re-rendered.
3.What are synthetic events in React?
Synthetic events is a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault() , except the events work identically across all browsers. It achieves high performance by automatically using event delegation.
4.What are stateless components?
Stateless components are simple functional component without having a local state but remember there is a hook in react to add state behavior in functional component as well.
We can use either a function or a class for creating stateless components. But unless we need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.
5.What are error boundaries in React v16?
React v16 has come up with some new features and Error Boundaries is one of them.In react, any runtime error during rendering puts React in a broken state and the whole component tree is unmounted from the root and needs a refresh to recover.
This can be prevented using a special React component called Error Boundaries which provides a fallback UI in case of a runtime error, like try-catch block.
These components are implemented using a special lifecycle method which catches any error in their child component tree. React v15 had this method with name unstable_handleError, but had very limited support for error boundaries. This unstable_handleError method no longer works as React v16 provided a new method called componentDidCatch.Error boundaries catch errors of child components only. Any error within itself will not be caught and the error will propagate the closet Error Boundary above it. And any error not caught by any Error Boundary will propagate to the root and crash/uproot the whole app.
6.What is ReactDOMServer?
The ReactDOMServer object enables you to render components to static markup (typically used on node server). This object is mainly used for server-side rendering (SSR).
The following methods can be used in both the server and browser environments:
renderToString()
renderToStaticMarkup()
Example:
import { renderToString } from ‘react-dom/server’
import MyPage from ‘./MyPage’
app.get(‘/’, (req, res) => {
res.write(‘<!DOCTYPE html><html><head><title>My Page</title></head><body>’)
res.write(‘<div id=”content”>’)
res.write(renderToString(<MyPage/>))
res.write(‘</div></body></html>’)
res.end()
})
7.What are the advantages of React?
The advantages of React are:
It facilitates the overall process of writing components
It boosts productivity and facilitates further maintenance
It ensures faster rendering
It guarantees stable code
It is SEO friendly
It comes with a helpful developer toolset
There is React Native for mobile app development
It is focused and easy-to-learn
It is backed by a strong community
It is used by both Fortune 500 companies and innovative startups.
8.How to focus an input element on page load?
By using ref for input element and using it in componentDidMount() we can focus an element on page load
Example:
class App extends React.Component{
componentDidMount() {
this.nameInput.focus()
}
render() {
return (
<div>
<input
defaultValue={‘Won\’t focus’}/>
<input
ref={(input) => this.nameInput = input}
defaultValue={‘Will focus’}/>
</div>)}
}
ReactDOM.render(<App />, document.getElementById(‘app’))
9.What are the popular React-specific linters?
ESLint is a popular JavaScript linter. There are plugins available that analyse specific code styles. One of the most common for React is an npm package called eslint-plugin-react. By default, it will check a number of best practices, with rules checking things from keys in iterators to a complete set of prop types. Another popular plugin is eslint-plugin-jsx-a11y, which will help fix common issues with accessibility. As JSX offers slightly different syntax to regular HTML, issues with alt text and tabindex, for example, will not be picked up by regular plugins.
10.What are the sources used for introducing hooks?
Hooks got the ideas from several different sources. Below are some of them,
· Previous experiments with functional APIs in the react-future repository
· Community experiments with render prop APIs such as Reactions Component
· State variables and state cells in DisplayScript.
· Subscriptions in Rx.
· Reducer components in ReasonReact.