【react基础】1、简介和起步

最新推荐文章于 2024-02-23 09:57:05 发布

白柴-

最新推荐文章于 2024-02-23 09:57:05 发布

阅读量173

点赞数

分类专栏： react基础笔记文章标签： react简介和起步

本文链接：https://blog.csdn.net/qq_35443997/article/details/99469994

版权

react基础笔记专栏收录该内容

12 篇文章 2 订阅

订阅专栏

一、简述

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 是一个用于构建用户界面的 JAVASCRIPT 库（它主要负责用户界面，可以简写等式UI=render(data),说白了就是数据驱动的意思）,值得注意的是注意官网上说的是一个库，单独的react严格来说不能算是一个框架。但我们可以说与redux结合的等等技术栈是一个框架。

要学习react则要了解它的三个构建环境。我们一般用到的它的构建环境分为三个：
1、react（可以有react.min.js 压缩版、react.development.js)
2、react-dom（可以有react-dom.min.js 压缩版、react-dom.development.js）
3、bable
babel最早用作将es6转为es5,后来facebook收购以后扩展了解析jsx的功能

二、最简单起步（无脚手架版）

1、下载上面的三个环境,需要下载react.js、react-dom.js、bable.js
（1）随手新建一个文件夹（不能为中文名），打开命令行cd到文件夹里，输入命令npm init -y来初始化一个packjson文件。
在这里插入图片描述
（2）在命令窗口依次输入以下安装命令cnpm i react --save、cnpm i react-dom --save、cnpm i babel-standalone --save。安装成功后文件夹将会出现以下文件。

在node_modules里面分别找到
react.development.js
位置：node_modules\react\umd\react.development.js
react-dom.development.js
位置：node_modules\react-dom\umd\react-dom.development.js
bable.js
位置：node_modules\babel-standalone\bable.js

（3）写hello word小例子
创建一个新的html文件，引入上面三个js环境就可以写reacthello word小例子啦。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/react.development.js"></script>
	<script src="js/react-dom.development.js"></script>
	<script src="js/babel.js"></script>
</head>
<body>
	<div id="box">
		
	</div>	
	<script type="text/babel">
	  //jsx 语法糖  javascript扩展  js+xml
		ReactDOM.render(<h2>hhello world</h2>,
			document.getElementById("box"));
	</script>
	
</body>
</html>