Как подключить хук useState не разворачивая приложение REACT?

Question

Нужна минималистичность приложения, нужно уместить код в одну страницу и дальше, запустив лайв-сервер, пользоваться в браузере этой страницей. Можно ли сделать так?

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REACT HELLO WORLD</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
   
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>


    <script type="text/babel">
        

        const [likes, setLikes]=useState(0);

        function increment(){
            setLikes(likes+1)
        }
        function decrement(){
            setLikes(likes-1)
        }

        ReactDOM.render(<div> 
                            <h1>{likes}</h1>
                            
                            <button onClick={increment}> Increment</button>
                            <button onClick={decrement}> Decrement</button>
                            
                        </div>, 
                            document.getElementById('app'))

    </script>    

</body>
</html>

Answer 1

Нужна минималистичность приложения, нужно уместить код в одну страницу и дальше, запустив лайв-сервер, пользоваться в браузере этой страницей. Можно ли сделать так?

Ну давай попробуем...

Будет все это выглядеть примерно вот так.

const e = React.createElement

const App = props => {
  const [likes, setLikes] = React.useState(0)
  function increment(){
    setLikes(v => v + 1)
  }
  function decrement(){
    setLikes(v => v - 1)
  }
  return e(
    'div',
    {},
    e('h1', {}, likes),
    e('button', {onClick: increment}, 'Increment'),
    e('button', {onClick: decrement}, 'Decrement'),
  )
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(App));

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Как подключить хук useState не разворачивая приложение REACT?

Ответы (1 шт):