is it possible to mix react jsx with non jsx components?

Question

So the question I have right now is if I have a parent component that is JSX but I have the need to include an html tag such as <i class="fa fa-window-maximize" aria-hidden="true"></i> which I believe is not supported by react JSX(correct me if I am wrong) could I mix the jsx and non jsx components some how? I personally prefer JSX and haven't done any work without it really so I wouldn't want to stray away from this unless I have to.

<Parent>
   <Child>
      Mix non jsx code in here??
   </Child>
</Parent>

Answer 1

You can mix JSX and non-JSX (HTML!) how you want! For example:

<div>
    <MyComponent>
        <input type="button>
    </MyComponent>
</div>

If you want to style an element you must use className instead of class . So your i tag must look like this

<i className="fa fa-window-maximize" aria-hidden="true"></i>

Answer 2

Have in mind that these "non-JSX" HTML elements are actually JSX elements too, have a look at JSX In Depth

<div className="sidebar" />

Compiles to:

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

To include classes in these components you need to use className instead of class , like this:

<i className="fa fa-window-maximize" aria-hidden="true" />

And yes, you can also mix them with your custom React components:

<MyComponent>
  <i className="fa fa-window-maximize" aria-hidden="true" />
</MyComponent>