React基础（一）- 环境搭建与第一个demo（hello world）

最新推荐文章于 2022-12-13 15:07:08 发布

Q_do_it

最新推荐文章于 2022-12-13 15:07:08 发布

阅读量277

点赞数

分类专栏： React基础

本文链接：https://blog.csdn.net/Q_do_it/article/details/107354236

版权

React基础专栏收录该内容

9 篇文章 1 订阅

订阅专栏

React环境搭建

麒麒（小姐姐哦）来啦！！！今天的内容是`React`环境搭建
代码是看不会的！！！~~~ 一定要动手呦！
如果对你有帮助 就支持下我呦！♥

环境搭建使用到（需要引用）的文件
1. React.js ：核心文件
2. React-dom.js：渲染页面中的DOM，当前文件依赖于react核心文件
3. Babel.js：将ES6转换为ES5、JSX语法转换为JavaScript，浏览器进行代码的兼容
创建项目（文件夹）
我使用的是VS Code，直接新建文件夹并命名（qiqi-react-demo）
在项目中配置环境（安装环境）
1. 选中文件夹，右键进入控制台（VS Code右键，点击open terminal），在控制台中进行环境安装
2. react.js 核心文件 ---- npm i react --save
3. react-dom.js 渲染页面中DOM，该文件依赖于react.js ---- npm i react-dom --save
4. babel ---- npm i babel-standalone --save
5. 环境安装后，会在项目下生成一个新的文件夹node_modules
在文件下新建index.html文件

引入react相关文件

<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>

第一个hello world演示

首先创建一个dom根节点（有且仅有一个），该节点下的内容会被react管理
创建script标签（type为text/babel）
该script标签将使用jsx语法：JavaScript xml （JavaScript的扩展语法）
该jsx语法优点：
- 执行效率更快
- 类型是安全的，编译过程中就能及时的发现错误
- 在使用jsx的时候，编写模板会更加简单与快速
  注：jsx中的HTML标签必须按照w3c规范来写（标签必须闭合）

demo如下：

<body>
    <!-- 创建一个dom根节点（有且仅有一个），该节点下的内容会被react管理 -->
    <div id="demoReact"></div>
    <script type="text/babel">
        // 这里的type一定要写为text/babel
        // 这里使用jsx：JavaScript xml （JavaScript的扩展语法）
        // 优点：
        // 1.执行效率更快
        // 2.类型是安全的，编译过程中就能及时的发现错误
        // 3.在使用jsx的时候，编写模板会更加简单与快速
        // *注：jsx中的HTML标签必须按照w3c规范来写（标签必须闭合）*
        let myDemo = <h1>你好世界</h1>;
        ReactDOM.render(myDemo,document.getElementById("demoReact"))
    </script>
</body>

Q_do_it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础（一）- 环境搭建与第一个demo（hello world）

React环境搭建环境搭建使用到（需要引用）的文件React.js ：核心文件React-dom.js：渲染页面中的DOM，当前文件依赖于react核心文件Babel.js：将ES6转换为ES5、JSX语法转换为JavaScript，浏览器进行代码的兼容创建项目（文件夹）我使用的是VS Code，直接新建文件夹并命名（qiqi-react-demo）在项目中配置环境（安装环境）选中文件夹，右键进入控制台（VS Code右键，点击open terminal），在控制台中进行环
复制链接

扫一扫

专栏目录