React Hello world 程序以及bower的简单介绍

本文介绍了React作为Facebook推出的JS框架,强调其在MVC中的视图层角色。同时,文章引导读者了解前端包管理工具Bower,如何安装及使用Bower来获取React和Babel。通过在页面引入下载的包,读者可以开始基本的React学习,为后续进阶奠定基础。如有问题,作者鼓励留言讨论。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React是由FaceBook推出的js框架,在这里,你要明确地记住,react是传统的mvc框架中的 V 层框架,记住这点有益于你去理解很多React 与MVC 框架的不同之处,好了,下面我们开始我们今天的学习。

在讲解之前,我需要介绍一个前端的包管理工具,这有助于我们前期的学习。

Bower 类似于 npm ,但是是属于前端的包管理工具,因为使用它安装的包不需要使用 require 去引入,而是根据你的一般习惯直接通过script 标签去引入,就像下面这样子:

   

<script src = "bower_components/react.min.js"></script>

Bower的使用规则与npm一致,但是在使用之前你需要安装(npm是nodejs默认就会去安装的,所以我们不用再单独安装): npm install  bower -g  

安装完成以后就可以通过 

                                 bower -v (验证bower是否安装完毕)

                                 bower install  包名 (安装包)

  这里我们需要两个包  react  和  ES6的编译工具babel, 所以执行  bower  install  react  babel(要一次安装多个包就有空格把包名隔开)。可能对react有所了解的同学会问,不需要安装 react-dom (react用来渲染dom元素的脚本)? 这里不需要,在你安装react时,bower会将react 和react-dom一起装下来。

关于Bower的内容有很多,这里只是最简单的使用介绍,在我的博客的工具篇会分享关于他的更加详细的介绍,有兴趣的同学可以去看一下,不足之处望指出。

然后就是在页面引入我们下载完成的包,他们的路径一般都是一下引入脚本的路径:

    <script src ='bower_components/babel/browser.js'></script>
    <script src='bower_components/react/react.min.js'></script>
    <script src='bower_components/react/react-dom.min.js'></script>
这三个脚本没有次序之分,建议在头部引用(也可以在别的位置引入,只要在你的react 代码前面引入即可),接下来就按照我们程序界的光荣传统 --- 》 书写 Hello World!

    <script type='text/babel'>
        ReactDOM.render(
                <h1>Hello, world!</h1>,
                document.getElementById('app')
            );
    </script>


这里记清楚,script的type要设置为 ‘text/babel’,因为react是js本身的扩展(或者叫语法糖),写出来的代码需要经过react去编译以后js的解析器才能正常的去执行。

到这里,我们学会了怎么使用bower去安装包,以及包的使用,有兴趣的同学可以跟着教程走一遍,这样可以加深映像,为后面的学习打下基础。

如在学习本节中遇到问题,请留言,看到后会给与回复和讲解


 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值