0

0

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

寻∝梦

寻∝梦

发布时间:2018-09-11 15:08:58

|

2302人浏览过

|

来源于php中文网

原创

PHP5 MySQL 编程入门
PHP5 MySQL 编程入门

既有较为详细的PHP与MySQL基础知识介绍,也有大量针对不同应用的技术说明,并伴随了大量小而精的示例来加深读者的理解,便于通过实验来掌握知识并学会应用。令书以PHP开发者为核心,从环境搭建到系统开发,从局部技术点到项目全程把握,立体式介绍了PHP5+MySQL的技术要点以及丰富的延伸知识,可以让读者享受到提升开发能力的极速体验。

下载

本篇文章主要讲述的是关于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


<code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">html>

  <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">head>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">metacharset="UTF-8"/>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">title>Hello Worldtitle>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">scriptsrc="https://unpkg.com/react@latest/dist/react.js">script>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">scriptsrc="https://unpkg.com/react-dom@latest/dist/react-dom.js">script>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">scriptsrc="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">script>

  head>

  <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">body>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">pid="root">p>

    <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">scripttype="text/babel">

      ReactDOM.render(

        <code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">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使用手册栏目中学习),有问题的可以在下方留言提问。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

362

2023.09.19

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

118

2025.11.26

Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

413

2026.02.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

1057

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

838

2023.11.06

eclipse教程
eclipse教程

php中文网为大家带来eclipse教程合集,eclipse是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。php中文网还为大家带来eclipse的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

194

2023.06.14

eclipse怎么设置中文
eclipse怎么设置中文

eclipse设置中文的方法:除了设置界面为中文外,你还可以为Eclipse添加中文插件,以便更好地支持中文编程。例如,你可以安装EBNF插件来支持中文变量名,或安装Chinese Helper来提供中文帮助文档。本专题为大家提供eclipse设置中文相关的各种文章、以及下载和课程。

807

2023.07.24

c语言编程软件有哪些
c语言编程软件有哪些

c语言编程软件有GCC、Clang、Microsoft Visual Studio、Eclipse、NetBeans、Dev-C++、Code::Blocks、KDevelop、Sublime Text和Atom。更多关于c语言编程软件的问题详情请看本专题的文章。php中文网欢迎大家前来学习。

623

2023.11.02

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号