React开始

枇杷弹琵琶

已于 2022-08-23 11:08:54 修改

阅读量173

点赞数

分类专栏： react学习文章标签： react.js javascript 前端

于 2022-08-23 11:00:54 首次发布

本文链接：https://blog.csdn.net/qq_43985785/article/details/126480034

版权

react学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始

React是一个用于构建用户界面的JavaScript库，从诞生之初就是可被逐步采用的，所以可以按需引入或多或少的React特性

在线体验

在线代码编辑器

在网站中添加React

具体步骤详见：https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

创建新的React应用

下载安装react：

npm install create-react-app -g

创建react项目：

npx create-react-app my-app
cd my-app
npm start

或者通过script引入react：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../build/react.development.js"></script> <!--react的核心库-->
    <script src="../build/react-dom.development.js"></script>  <!--提供与DOM相关的功能-->
    <script src="../build/babel.min.js"></script>  <!--将JSX转换为JavaScript代码-->
    <title>demo01 HTML模板</title>
</head>
<body>
<div id="example"></div>

<!--HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法-->
<script type="text/babel">  //react独有的jsx语法，凡是使用jsx的地方，都要加上 type="text/babel" (使用babel讲jsx解析成js语言)
    ReactDOM.render(  //用于将模板转为HTML语言，并插入指定的DOM节点
        <h1>Hello,world!</h1>,  //参一：将模板转为HTML语言
        document.getElementById('example')  //参二：插入指定的DOM节点
    );
</script>

</body>
</html>

若是通过CDN获得react和reactDOM：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>