React私房菜01：环境配置
2019-11-26 本文已影响0人
赛博剑仙_李玄器
入门
一、环境配置
1、装node、装bower（js所有框架库包管理器，依赖于node.js）
PS：说两个常用命令：info和install
bower info <要查的框架> //返回该框架的信息,<>不用打出来。
npm info <要查的框架> //同理npm也能查询到bower install <要下载的框架> //下载，但这种情况默认下载最新版本
bower install react#15.6.1 指定下载某个版本
2、下载react、babel
- 定位要下载的文件夹地址，打开终端，ls：查看当前路径文件，cd：进入文件夹
- bower install react#15.6.1
- bower install babel
3、开始写文件,新建HTML文件。
script标签中引入需要的文件，先引主要的，再引次要的
<script type="text/javascript" src="bower_components/react/react.js"></script>
<script type="text/javascript" src="bower_components/react/react-dom.js"></script>
<script type="text/javascript" src="bower_components/babel/browser.js"></script>
虽然看起来很恶心，但是都是必须引的，第一个是react主框架，第二个是虚拟DOM，第三个只有引入babel才能使用JSX语法。
4、渲染点东西出来看看
既然都配置完了，那怎么也得显示些东西出来看看吧。利用react-dom提供的渲染函数ReactDOM.render(element, container[, callback])整点东西出来
其中参数分别为：组件（元素、内容），容器（把组件放哪去），回调函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bower_components/react/react.js"></script>
<script type="text/javascript" src="bower_components/react/react-dom.js"></script>
<script type="text/javascript" src="bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var a = 'hello react!' //JSX中，想在标签中使用js语法，要用{ }括起。
let b = (<div>
<h1>{a}</h1>
<span>I'm the bad guy</span>
</div>) //小括号表示将这些标签划分成一个整体.
ReactDOM.render(
b,
document.getElementById('app')
)
</script>
</body>
</html>
简单不，给个赞呗
——至此，环境配置完毕——有没明白的地方，欢迎评论区交流——我尽量及时回复——
