React环境搭建

前端之家收集整理的这篇文章主要介绍了React环境搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React环境搭建

最近学习React,希望入个门,我的要求不高,能看得懂些简单的项目,装装逼就好。研究了两天,感觉技术更新太快,不保持对新技术的不断学习更新,真的跟不上的节奏。环境搭建都让我觉得有必要写篇文章记录下,算是备个份以后参考。初学者能力有限,理解也不一定对,免责下先。

React介绍

React是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES,一个构建用户界面的JS库。参考官网的介绍:

https://facebook.github.io/react/

当然,阮一峰的教程中的介绍也可以参考:

http://www.jb51.cc/article/p-rkowmlmt-bnx.html

Hello World示例

看了官网的安装介绍,点这里,简单的学学React其实依赖的环境并不复杂,可以使用官方推荐的在线环境CodePen,直接写代码看结果,不需要安装配置任何东西。不过,我还是想在本地搭建体验下,万一搞着搞着事情搞大了呢。

官网提供了一个Hello World的网页代码(html文件),直接打开浏览器就可以运行,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
< html >
head >
Meta charset = "UTF-8" />
title >Hello World</ >
</ >
body >
div id "root" div >
type "text/babel" >
ReactDOM.render(
h1 >Hello,world!</ >,
document.getElementById('root')
);
>
>
>

可以看到,代码中引用了CDN上现成的React相关库文件,所以React的代码可以直接写,其实这样就挺好了,本地随便找个编辑器(Sublime Text、Notepad++什么的),直接就可以开干,学React基础知识了吧。

一开始我也是这样的,用Sublime Text编辑代码,简单粗暴的开始了(我还找了Sublime Text上的React相关插件)。但是当我把React的script部分放到外部的js文件中引入时,例子就运行不了了(用的Chrome浏览器),然后大家告诉我需要服务器支持,赶紧找Gavin同学支援一把。

Node.js和WebStorm安装

Gavin同学的项目大致是React做前端,Java做后端,推荐给我的工具也是JetBrains家族的霸气IDE,WebStorm和Intellij IDEA,WebStorm里倒腾React应该是so easy的,于是我准备下载WebStorm和Node.js(好吧,都没用过,正好一波带走)。

npm是一个Node.js的包管理和分发工具,我们可以通过npm来引入React,搭建React的环境。新版的 Node.js 已经集成了npm ,所以我得先去Node.js官网下载安装:

https://nodejs.org/en/

我下载的是最新的v7.4.0 forWindows (x64)版本,安装就不多介绍了,网上很多。

其实装好了Node.js后,可以继续结合之前的Sublime Text开干,因为Node.js可以提供服务器支撑,这样之前的例子就没问题了,网易云课堂中这堂课程就是类似这样搭建环境的(只不过他用的github的Atom编辑器):

http://study.163.com/course/courseMain.htm?courseId=1565012

这个课程中还介绍了Browsersync,一个省时的浏览器同步测试工具(原谅我一直没接触过这类,看了下还不错哦),不用每次改了代码,还得F5了。

当然,个人还是比较喜欢用IDE一些,所以我需要去体验下WebStorm(作为一个Java Web开发人员,很遗憾我一直只用Eclipse JEE,忽略了其他的风景)。官方地址:

http://www.jetbrains.com/webstorm/

收费,但是功能强大,号称The smartest JavaScript IDE,Web前端开发神器,希望不会失望。下载、安装、License后,激动的打开开始体验,转为图文教程模式。

React项目建立

新建项目:

选择空项目,右边指定好项目保存的路径:

左侧的React Starter Kit是什么鬼,貌似是React入门包呢,感觉是为我量身定制的,好奇选了这个,并重新指定了项目名和路径。有兴趣的小伙伴可以试试,反正最终项目建好后可以用,只是里面的东西有点复杂,没太搞得懂,所以决定还是回到新建空项目一步步来。

空项目建好之后,是的,什么都没有,回到官网教程吧,上面有一个Creating a Single Page Application的内容

Create React App is the best way to starting building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features,provides a nice developer experience,and optimizes your app for production.

感觉有现成的方式可以用,于是follow它的代码

4
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

wait,上面的npm相关命令在哪儿输入是个问题?安装了Node.js后,如果设置ok,命令行是可以运行上面代码的。而在WebStorm中,貌似它已经识别到我的Node.js环境,所以在WebStorm左下角的Terminal窗口中已经可以直接使用npm,相当于命令行,就在这里面输吧,一条一条的来:

需要花几分钟时间执行前两条命令,尤其第二条,完成之后,我们的项目中应该创建好React相关的内容了:

看起来,它在我的hello-react目录中,新建了一个hello-world目录,并在里面安装好了React的内容,接下来参考它的建议,输入后两条命令,即进入该目录,启动,成功后自动打开浏览器访问了项目首页

一切似乎已经ok了,页面提示我编辑src下的App.js,即可进入React世界,不信改两行代码试试?

页面中的效果为:

环境是搭建完成了,然而并不了解个中情况,这个黑盒里有些什么东东,下来再慢慢研究吧,一切才刚刚开始呢。

原文链接:https://www.f2er.com/react/303637.html

猜你在找的React相关文章