react第一行代码

最新推荐文章于 2024-05-23 13:49:51 发布

我是大魔王2

最新推荐文章于 2024-05-23 13:49:51 发布

阅读量162

点赞数

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

本文链接：https://blog.csdn.net/mylovewanzi/article/details/90907767

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了React的基础知识，强调了它是一个用于构建用户界面的JavaScript库，起源于Facebook并广泛应用于Instagram等。接着，文章引导读者如何搭建第一个React项目，包括安装Node.js环境、安装Browsersync，以及如何开始编写React代码，提供了相关参考链接和配置步骤。

摘要由CSDN通过智能技术生成

react第一行代码

文章目录

react第一行代码
@[toc]
react简介
第一个react项目
1.安装nodejs环境
2.安装browsersync
3.开始编写

react简介

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

第一个react项目

1.安装nodejs环境

参考链接：https://www.runoob.com/nodejs/nodejs-install-setup.html

2.安装browsersync

参考链接：http://www.browsersync.cn/#install
安装：在nodejs环境下使用npm安装

npm install -g browser-sync

启动服务：

browser-sync start --server --files "*/*"

检测当前目录下的所有文件以及文件夹

3.开始编写

配置browsersync环境
简化启动命令：
在package.json文件夹中加入如下标注代码

之后启动服务就可以直接使用：

npm run dev

引入react
通过cdn引入

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

使用react
完整代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

-END-