初认React --You are using the in-browser Babel transformer. Be sure to precompile your scripts for

React官网:https://reactjs.org/

React的初使用

一、Reac的学习需要引入的依赖文件

官网:react的依赖位置

https://react.docschina.org/docs/add-react-to-a-website.html
在这里插入图片描述
在这里插入图片描述

二、使用

1.初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react</title>
</head>

<body>
<div id="test"></div>
<!--react的核心库必须在依赖库前面引入-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<!--这里要把类型设置为babel(解析jsx),不然默认是js-->
//  jsx是js的语法糖:我们写的jsx最后会通过babel翻译为js的形式
<script type="text/babel">

    const VDOM=<h1>hello react</h1>;//注意这里不要加引号,因为是jsx,不是js
//    引入了React核心库和依赖库,所以全局多了React,和ReactDOM
//    该react-dom包提供了特定于 DOM 的方法,这些方法可以在您的应用程序的顶层使用
//    虚拟DOM对象最终会被React转为真实的DOM,呈现在页面上
    ReactDOM.render(VDOM,document.getElementById("test"));
    
</script>
</body>
</html>

在这里插入图片描述

页面显示异常及其解释说明:

1.Download the React DevTools for a better development experience: https://fb.me/react-devtools
:react有配用的开发者工具,可以帮助更好的进行调试和开发(这里提示我们可以下载)
2.babel.min.js:24 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
:在发布的时候不能用bable方式,后面会进行改正,此处仅做学习
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值