React学习记录（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_78627664/article/details/144951143

1、创建代码

1.1 CDN方式引入

<!DOCTYPE html>
	<!-->index.html<-->
	<html lang="en">
	<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="App"></div>
    <script type="text/babel" src="./main.js"></script>
    <!-->在main.js+书写jsx语法，script的type需要设置为text/babel类型<-->
</body>
</html>

// main.js
const container = document.getElementById('App')  //获取dom
const root = ReactDOM.createRoot(container)  //创建root节点
root.render(<App />)
// 渲染组件

function App(){
    const [text, setText] = React.useState('')  
    
    // 这里的useState是React的hooks里面非常基础基础且重要的一个hook；需专门总结一下用法；
    //在这面的作用就是定义一个text为空，setText为修改text的一个函数

    return (
        <main>
            <input onChange={(e) => setText(e.target.value)} />
            <p>{text}</p>
        </main>
    )
}