React 第二节安装和使用

React 的安装和使用

一、直接调用

一般不会使用直接调用，但简单介绍一下使用

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<-- 引入React -->
<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="app"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

代码分析：

引入React 要按照顺序引入，react.development.min.js 、react-dom.development.min.js 和 babel.min.js；

react.min.js 表示React核心，
react-dom.min.js 提供与DOM相关功能，
babel.min.js 将 ES6 代码转为 ES5 ，防止代码不兼容。
页面引入React以后，设置DOM的位置标签即ID值 id='app'；
设置JavaScript 语言格式为 text/babel ，这样才能解析JSX；
使用ReactDOM.render 渲染html，注意这里用小括号包起来；
最后写好html内容，然后设置要渲染的位置（即：id=‘app’）。

二、 npm 安装

安装命令及解释：

 1.npm install -g create-react-app   安装脚手架
2.create-react-app my-app           创建项目
3.cd my-app                         进入项目文件
4.npm start                         启动项目

在这里插入图片描述

上一篇博客美化办法

下一篇设置vim 显示行号

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961122.html

posted @ 2022-12-06 22:18 轻风细雨_林木木阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· React 第三节项目结构和运行原理

· React 第四节渲染元素

· react基础-从安装开始

· React 安装(NPM) 方法步骤详解

· 好客租房3-React的基本使用

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

轻风细雨_林木木

做最优秀的自己。

React 第二节安装和使用

React 的安装和使用

一、直接调用

二、 npm 安装

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React!</title>
	<-- 引入React -->
	<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="app"></div>
	<script type="text/babel">
	ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
	);
	</script>

	</body>
	</html>

	1.npm install -g create-react-app 安装脚手架
	2.create-react-app my-app 创建项目
	3.cd my-app 进入项目文件
	4.npm start 启动项目