Use <code> or similar tags in ReactJS using JSX

Question

I am trying to use ReactJS with JSX to create a proof of concept for styleguide.

I wanted to be able to display raw html, how to access components that do this. JSX ignores tags <code>and renders component

This is what I have tried so far. Show HTML in HTML

<blockquote>
  <pre>
    <code>
      <VideoPlayer 
        ref="videoplayer" 
        preload={this.props.preload} 
        classes={this.props.classes} 
        videoID={this.props.videoID}
        controls="controls" 
      />     
    </code>
  </pre>
</blockquote>

I was surprised to see how he looked.

Answer 1

, , JSX- , JSX- , HTML, , JSX- ( JSX) (, JSX). JSX).

, , <pre>, , <code>, inline:

<pre>
  &lt;VideoPlayer{'\n'}
    ref="videoplayer"{'\n'}
    preload={'{'}this.props.preload{'}\n'}
    classes={'{'}this.props.classes{'}\n'}
    videoID={'{'}this.props.videoID{'}\n'}
    controls="controls"{'\n'}
  /&gt;</pre>

" O_o", . ; , (, block-loader, webpack), , .

Answer 2

JSX. JSX-save. - :

<pre>{`
  <VideoPlayer 
    ref="videoplayer" 
    preload={this.props.preload} 
    classes={this.props.classes} 
    videoID={this.props.videoID}
    controls="controls" 
  />
`}</pre>

: <pre> JSX. { JavaScript, . switches the parser into string-parsing mode. This can span multiple lines. Inside string parsing mode, JSX-special characters <>{} are not special anymore. But you must escape the two characters that are special inside multi-line strings: The back quote $.

JavaScript, } JSX, </pre> .

React HTML.