react + jquery

index.js

import React from 'react'

import './libs/jquery-ui-layout/jquery-ui-layout.css'
// import './css/style.css'
// import './css/style.css'
// import $ from './libs/jquery-v1.9.0.js'


class Chat extends React.Component {
  constructor(props) {
    super(props)

    // css
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'libs/jquery-ui-layout/jquery-ui-layout.css'

    const link1 = document.createElement('link')
    link1.rel = 'stylesheet'
    link1.href = 'css/style.css'


    // js
    const jquery = document.createElement('script')
    jquery.src = 'libs/jquery-v1.9.0.js'
    jquery.async = false
    jquery.defer = true

    const jqueryUi = document.createElement('script')
    jqueryUi.src = 'libs/jquery-ui/jquery-ui.min.js'
    jqueryUi.defer = true
    jqueryUi.async = false

    const touchPunch = document.createElement('script')
    touchPunch.src = 'libs/jquery-ui-touch-punch.js'
    touchPunch.defer = true
    touchPunch.async = false

    const layout = document.createElement('script')
    layout.src = 'libs/jquery-ui-layout/jquery-ui-layout.js'
    layout.defer = true
    layout.async = false

    const chatJs = document.createElement('script')
    chatJs.src = 'js/chat.js'
    chatJs.defer = true
    chatJs.async = false

    this.state = {
      link: link,
      link1: link1,
      jquery: jquery,
      jqueryUi: jqueryUi,
      touchPunch: touchPunch,
      layout: layout,
      chatJs: chatJs,
    }
  }

  componentDidMount() {
    // css <link>
    document.head.appendChild(this.state.link)
    document.head.appendChild(this.state.link1)

    // js <script>
    document.body.appendChild(this.state.jquery)
    document.body.appendChild(this.state.jqueryUi)
    document.body.appendChild(this.state.touchPunch)
    document.body.appendChild(this.state.layout)
    document.body.appendChild(this.state.chatJs)
  }

  componentWillUnmount() {
    // css <link>
    document.head.removeChild(this.state.link)
    document.head.removeChild(this.state.link1)

    // js <script>
    document.body.removeChild(this.state.jquery)
    document.body.removeChild(this.state.jqueryUi)
    document.body.removeChild(this.state.touchPunch)
    document.body.removeChild(this.state.layout)
    document.body.removeChild(this.state.chatJs)
  }

  render() {
    return (
      <div className="layout1">
  <div className="outer-center">

  <div className="inner1-north">an ad banner</div>

  <div className="inner1-center">
    <div className="public_message"></div>
  </div>

  <div className="inner1-south">
    <div className="private_message"></div>
  </div>

</div>


<div className="outer-east">
  user1<br />
  user2<br />
  user3<br />
  user4<br />
</div>


<div className="outer-south">

  <ul className="smiles">
    <li><img src="img/1.png" alt="" data-img="1" /></li>
    <li><img src="img/2.png" alt="" data-img="2" /></li>
    <li><img src="img/3.png" alt="" data-img="3" /></li>
    <li><img src="img/4.png" alt="" data-img="4" /></li>
    <li><img src="img/5.png" alt="" data-img="5" /></li>
    <li><img src="img/6.png" alt="" data-img="6" /></li>
    <li><img src="img/7.png" alt="" data-img="7" /></li>
    <li><img src="img/8.png" alt="" data-img="8" /></li>
    <li><img src="img/9.png" alt="" data-img="9" /></li>
    <li><img src="img/A.png" alt="" data-img="A" /></li>
    <li><img src="img/B.png" alt="" data-img="B" /></li>
    <li><img src="img/C.png" alt="" data-img="C" /></li>
    <li><img src="img/D.png" alt="" data-img="D" /></li>
    <li><img src="img/E.png" alt="" data-img="E" /></li>
    <li><img src="img/F.png" alt="" data-img="F" /></li>
    <li><img src="img/G.png" alt="" data-img="G" /></li>
    <li><img src="img/H.png" alt="" data-img="H" /></li>
    <li><img src="img/I.png" alt="" data-img="I" /></li>
    <li><img src="img/J.png" alt="" data-img="J" /></li>
    <li><img src="img/K.png" alt="" data-img="K" /></li>
    <li><img src="img/L.png" alt="" data-img="L" /></li>
    <li><img src="img/M.png" alt="" data-img="M" /></li>
    <li><img src="img/N.png" alt="" data-img="N" /></li>
    <li><img src="img/O.png" alt="" data-img="O" /></li>
    <li><img src="img/P.png" alt="" data-img="P" /></li>
    <li><img src="img/Q.png" alt="" data-img="Q" /></li>
    <li><img src="img/R.png" alt="" data-img="R" /></li>
    <li><img src="img/S.png" alt="" data-img="S" /></li>
    <li><img src="img/T.png" alt="" data-img="T" /></li>
    <li><img src="img/U.png" alt="" data-img="U" /></li>
  </ul>

  <div className="message">
    <button className="public">Всем</button>
    <textarea id="input_message" name=""  cols="30"></textarea>
    <button className="private">Приват</button>
  </div>

</div>

</div>
    )
  }
}

export default Chat