|
298 | 298 | |282| [What is the purpose of forward ref in HOCs?](#what-is-the-purpose-of-forward-ref-in-hocs)|
|
299 | 299 | |283| [Is it ref argument available for all functions or class components?](#is-it-ref-argument-available-for-all-functions-or-class-components)|
|
300 | 300 | |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)| |
301 | 303 |
|
302 | 304 | ## Core React
|
303 | 305 |
|
|
4767 | 4769 | 283. ### Is it ref argument available for all functions or class components?
|
4768 | 4770 | 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.
|
4769 | 4771 | 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