react学习 · 2021年7月12日

react初尝试——创建并渲染

使用npm包管理,我安装了node即可使用。

创建项目文件夹,react1,安装react 和 react-dom(用来渲染)

npm install react react-dom

结果不太行,该文件夹下并没有安装的nodemodules,哈呵。

问题在这里:估计是使用了默认的目录

在这个文件夹里新建了一个package.json,里面初始化写一个空的大括号{},好了。

然后开始了:

<!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使用</title>
</head>
<body>
    <div id='root'></div>
    <script src="./node_modules/react/umd/react.development.js" ></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <script>
        //创建eract
        const title =React.createElement('h1',null,'我的第一个react页面')

        //渲染
        ReactDOM.render(title,document.getElementById('root'))
        
    </script>

    
</body>
</html>

React.createElement用来创建元素,通过ReactDOM渲染上去。ok~

其实,这里还有点问题,本来这个<div id=’root’></div>放到了渲染后面,结果他说啥都没渲染出来,

调整顺序后,

好了。