React基本环境搭建（安装）

最新推荐文章于 2024-01-28 15:23:19 发布

MW0309

最新推荐文章于 2024-01-28 15:23:19 发布

阅读量182

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_42222342/article/details/104880633

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

React 开发环境的搭建

1、react.min.js - React 的核心库
2、react-dom.min.js - 提供与 DOM 相关的功能
3、babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

下载

react 核心包         npm i react --save
react-dom           npm i react-dom --save
babel               npm i babel-standalone --save

安装

第一步 进入到文件夹中 cmd 
  npm init -y
 第二步 
 cnpm install react --save
 第三步
 cnpm install --save react-dom
 第四步
 cnpm install babel-standalone --save
 第五步在项目中建一个index.html文件
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <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>
</head>
<body>
<!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
    <div id="demoReact">

    </div>
    <script type="text/babel">
        //jsx=javascript xml javascript的扩展语法
        //优点：
        //1.执行的效率更快
        //2.他是类型安装的，编译的过程中就能及时的发现错误
        //3.在使用jax的时候编写模板会更加简单和快速

        //注意 jsx中HTMl标签必须按照w3c的规范来写标签必须闭合
        let myDom=<h1>你好React</h1>;
        ReactDOM.render(myDom,document.getElementById("demoReact"));
    </script>
</body>
</html>

在这里插入图片描述

MW0309

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React基本环境搭建（安装）

React 开发环境的搭建1、react.min.js - React 的核心库2、react-dom.min.js - 提供与 DOM 相关的功能3、babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（...
复制链接

扫一扫