当前位置:Gxlcms > JavaScript > React环境如何搭建?react环境搭建详情介绍(附实例)

React环境如何搭建?react环境搭建详情介绍(附实例)

时间:2021-07-01 10:21:17 帮助过:6人阅读

本篇文章主要讲述的是关于react环境搭建的一些解释,现在就让我们一起来看看这篇文章吧

React环境搭建

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

React介绍

React是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES,一个构建用户界面的JS库。

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>

<metacharset="UTF-8"/>

<title>Hello World</title>

<scriptsrc="https://unpkg.com/react@latest/dist/react.js"></script>

<scriptsrc="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>

<scriptsrc="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<pid="root"></p>

<scripttype="text/babel">

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('root')

);

</script>

</body>

</html>


可以看到,代码中引用了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

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

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

这个课程中还介绍了Browsersync,一个省时的浏览器同步测试工具(原谅我一直没接触过这类,看了下还不错哦),不用每次改了代码,还得F5了。(想看更多就到PHP中文网React参考手册栏目中学习)

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

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

左侧的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它的代码:

1

2

3

4


npm install-g create-react-app

create-react-app hello-world

cdhello-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世界,不信改两行代码试试?

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

本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。

以上就是React环境如何搭建?react环境搭建详情介绍(附实例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行