Skip to content

Commit 7216610

Browse files
committed
Add react without es6 and JSX interview questions
1 parent b785ee1 commit 7216610

File tree

1 file changed

+52
-1
lines changed

1 file changed

+52
-1
lines changed

README.md

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,8 @@
298298
|282| [What is the purpose of forward ref in HOCs?](#what-is-the-purpose-of-forward-ref-in-hocs)|
299299
|283| [Is it ref argument available for all functions or class components?](#is-it-ref-argument-available-for-all-functions-or-class-components)|
300300
|284| [Why do you need additional care for component libraries while using forward refs?](#why-do-you-need-additional-care-for-component-libraries-while-using-forward-refs)|
301+
|285| [How to create react class components without ES6?](#how-to-create-react-class-components-without-es6)|
302+
|286| [Is it possible to use react without JSX?](#is-it-possible-to-use-react-without-jsx)|
301303

302304
## Core React
303305

@@ -4767,4 +4769,53 @@
47674769
283. ### Is it ref argument available for all functions or class components?
47684770
Regular function or class components don’t receive the ref argument, and ref is not available in props either. The second ref argument only exists when you define a component with React.forwardRef call.
47694771
284. ### Why do you need additional care for component libraries while using forward refs?
4770-
When you start using forwardRef in a component library, you should treat it as a breaking change and release a new major version of your library. This is because your library likely has a different behavior such as what refs get assigned to, and what types are exported. These changes can break apps and other libraries that depend on the old behavior.
4772+
When you start using forwardRef in a component library, you should treat it as a breaking change and release a new major version of your library. This is because your library likely has a different behavior such as what refs get assigned to, and what types are exported. These changes can break apps and other libraries that depend on the old behavior.
4773+
285. ### How to create react class components without ES6?
4774+
If you don’t use ES6 then you may need to use the create-react-class module instead. For default props, you need to define getDefaultProps() as a function on the passed object. Whereas for initial state, you have to provide a separate getInitialState method that returns the initial state.
4775+
```javascript
4776+
var Greeting = createReactClass({
4777+
getDefaultProps: function() {
4778+
return {
4779+
name: 'Jhohn'
4780+
};
4781+
},
4782+
getInitialState: function() {
4783+
return {message: this.props.message};
4784+
},
4785+
handleClick: function() {
4786+
console.log(this.state.message);
4787+
},
4788+
render: function() {
4789+
return <h1>Hello, {this.props.name}</h1>;
4790+
}
4791+
});
4792+
```
4793+
**Note:** If you use createReactClass then autobinding is available for all methods. i.e, You don't need to use .bind(this) with in constructor for event handlers.
4794+
286. ### Is it possible to use react without JSX?
4795+
Yes, JSX is not mandatory for using React. Actually it is convenient when you don’t want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). For example, let us take a greeting example with JSX,
4796+
```javascript
4797+
class Greeting extends React.Component {
4798+
render() {
4799+
return <div>Hello {this.props.message}</div>;
4800+
}
4801+
}
4802+
4803+
ReactDOM.render(
4804+
<Greeting message="World" />,
4805+
document.getElementById('root')
4806+
);
4807+
```
4808+
You can write the same code without JSX as below,
4809+
```javascript
4810+
class Greeting extends React.Component {
4811+
render() {
4812+
return React.createElement('div', null, `Hello ${this.props.message}`);
4813+
}
4814+
}
4815+
4816+
ReactDOM.render(
4817+
React.createElement(Greeting, {message: 'World'}, null),
4818+
document.getElementById('root')
4819+
);
4820+
```
4821+

0 commit comments

Comments
 (0)