React之简单页面搭建

最新推荐文章于 2024-09-02 11:16:03 发布

微微笑再加油

最新推荐文章于 2024-09-02 11:16:03 发布

阅读量1.2k

点赞数 2

分类专栏： React

本文链接：https://blog.csdn.net/chd_sun/article/details/105031155

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.本地创建文件夹，保存所创建的项目
注意：文件夹名一定是英文名,不要有汉字
在这里插入图片描述
2.用vs code 打开本地所创建得空文件夹

3.使用cmd命令切换到当前目录

4.开始创建react项目
4.0先创建一个package.json
作用：一般记录了项目的配置信息，包括名称、版本、许可证等元数据，
也会记录所需的各种模块，包括执行依赖，和开发依赖，
在这里插入图片描述
4.1下载react 核心包

4.2下载react-dom包

4.3下载babel包

5.新建一个html文件

6.引入react文件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<body>
    <!--创建根节点 一个页面中需要有一个根节点  -->
    <div id="reactId">

    </div>

    <!-- type类型必须是text/babel -->
    <script type="text/babel">
        // 下面得语法是jax语法  相当于javascript和 xml得结合语法
        //执行的效率更快 类型更安全
        let myDom=<h1>你好react</h1>;
        //使用rander进行渲染
        ReactDOM.render(myDom,document.getElementById("reactId"));
    </script>
</body>
</html>