本篇文章主要讲述的是关于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了。（想看更多就到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世界，不信改两行代码试试？
环境是搭建完成了，然而并不了解个中情况，这个黑盒里有些什么东东，下来再慢慢研究吧，一切才刚刚开始呢。
本篇文章到这就结束了（想看更多就到react使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react环境如何搭建？react环境搭建详情介绍（附实例）的详细内容。