bower 的使用及react脚手架的搭建

安装 npm install bower -g
bower 的方法
info (信息) -->如 bower info react //用bower查react框架的信息可以看到版本的信息
install (下载)
bower install react -->默认下载最高版本
指定版本如: ---> #15.6.1
返回文件夹会看到生成的文件
bower 使用本地缓存
Bower支持从其本地缓存中安装软件包 - 如果之前已安装软件包，则无需连接互联网。
```
bower install <package> --offline
```

缓存的内容可以列出bower cache list：
```
bower cache list
```
可以使用以下方法清除缓存bower cache clean：
```
bower cache clean
```
下载babel 依赖用于书写jsx语法
bower install babel
如果你引用的是脚本一定不要引错序号,
第一个react.js相当于juery.js
第二个 react-dom.js 为虚拟DOM用于jsx中写标签的时候不需要用字符串 var a = <div>hello react</div>
第三个browser.js 只有引用了它才能有JSX语法.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./bower_components/react/react.js"></script>
    <script src="./bower_components/react/react-dom.js"></script>
    <script src="./bower_components/babel/browser.js"></script>
</body>
</html>

tip:也可以让react指定版本一起安装: bower install react #16.5.1 babel

正式渲染HTML
<script type="text/babel"> 里的type一定要是babel;不然不识别jsx语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./bower_components/react/react.js"></script>
    <script src="./bower_components/react/react-dom.js"></script>
    <script src="./bower_components/babel/browser.js"></script>
    <div id="app"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1> hellow react !</h1>,//写入内容元素
            document.getElementById('app')//放到哪个模块

        )
    </script>
</body>
</html>

多标签的定义方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./bower_components/react/react.js"></script>
    <script src="./bower_components/react/react-dom.js"></script>
    <script src="./bower_components/babel/browser.js"></script>
    <div id="app"></div>
    <script type="text/babel">
    //如果多标签可以在外面定义 
    var a = (<div><div> hellow react !</div><span>dsfsdf</span></div>)
        ReactDOM.render(
            a,//写入内容元素
            document.getElementById('app')//插入那个模块

        )
    </script>
</body>
</html>

bower 的使用及react脚手架的搭建

bower 使用本地缓存

下载babel 依赖用于书写jsx语法

tip:也可以让react指定版本一起安装: bower install react #16.5.1 babel

正式渲染HTML

猜你喜欢

bower 的使用及react脚手架的搭建

bower 使用本地缓存

下载babel 依赖 用于书写jsx语法

tip:也可以让react指定版本一起安装: bower install react #16.5.1 babel

正式渲染HTML

猜你喜欢

下载babel 依赖用于书写jsx语法