Isomorphic JavaScript Web Development: Universal JavaScript with React and Node by Konstantin Tarkus

Author:Konstantin Tarkus [Tarkus, Konstantin]
Language: eng
Format: azw3
Publisher: Packt Publishing
Published: 2017-10-11T04:00:00+00:00

Working with third-party libraries

When developing isomorphic apps you may bump into this issue when a third-party UI library that you need to include into your project does not support server-side rendering. If you try to include it in any of your React components, the ReacDOMServer.renderToString() will throw an exception when you try to render your app on the server. This often happens because a third-party library uses global variables such as window, document, and navigator, which is not available in the Node.js environment.

Often, rendering such components on the server doesn't give you much benefit. For example, it can be a WYSIWYG editor, an autocomplete box, and so on. Do you really need to pre-render that stuff on the server? If not, you just need to make sure that these components are referenced and initialized only on the client side.

The following is an example of a popular text editor codeMirrorintegrated into a React component:

classTextEditor extends Component { componentDidMount() { this.codeMirror = require('codemirror') .fromTextArea(this.refs.input); this.codeMirror.on('change', this.handleChange); } componentWillUnmount() { if (this.codeMirror) { this.codeMirror.toTextArea(); } } handleChange = (editor) => { if (this.props.onChange) { this.props.onChange(editor.getValue()); } }; render() { return<textarea ref="input">{this.props.children}</textarea>; } }

Notice that the codemirror module is loaded and initialized inside the componentDidMount() method (as opposed to referencing it at the top of the TextEditor.js file). This method is never called when you render a React app into the HTML string. Thus, the codeMirror text editor will be initialized only on the client (in a browser).

If you really need to render on the server a third-party library that is not natively isomorphic, for example, D3 charts, it is possible to do so with a jsdom library. However, this subject falls out of the scope of this book.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.