React 教程安装—JSX—组件=集成所有教程—f

React 教程安装—JSX—组件=集成所有教程—facebook跨平台框架

eact 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React 特点

1.声明式设计 ?React采用声明范式，可以轻松描述应用。
2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 ?React可以与已知的库或框架很好地配合。
4.JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

阅读本教程前，您需要了解的知识：

在开始学习 React 之前，您需要具备以下基础知识：

HTML5
CSS
JavaScript

React 第一个实例

在每个章节中，您可以在线编辑实例，然后点击按钮查看结果。

本教程使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/react/ 下载最新版。

React 实例

<divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );</script>

React 安装

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/react/ 下载最新版。

你也可以直接使用 BootCDN 的 React CDN 库，地址如下：

<scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

使用实例

以下实例输出了 Hello, world!

React 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Hello React!</title><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script></body></html>

实例解析：

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

以上代码将一个 h1 标题，插入 id="example" 节点中。

注意：
如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

通过 npm 使用 React

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。

我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

更多信息可以查阅：http://npm.taobao.org/。

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/$ npm start

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下：

my-app/

 README.md
 node_modules/
 package.json .gitignore public/
 favicon.ico
 index.html
 src/
 App.css App.js App.test.js
 index.css
 index.js
 logo.svg

尝试修改 src/App.js 文件代码：

src/App.js

importReact, {Component}from'react';importlogofrom'./logo.svg';import'./App.css'; classAppextendsComponent{render(){return( <divclassName="App"> <divclassName="App-header"> <imgsrc={logo}className="App-logo"alt="logo" /> <h2>欢迎来到菜鸟教程</h2> </div> <pclassName="App-intro"> 你可以在 <code>src/App.js</code> 文件中修改。 </p> </div> ); }}exportdefaultApp;

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：

React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

使用 JSX

JSX 看起来类似 HTML ，我们可以看下实例:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

React 实例

ReactDOM.render( <div> <h1>菜鸟教程</h1> <h2>欢迎学习 React</h2> <pdata-myattribute="somevalue">这是一个很不错的 JavaScript 库!</p> </div> , document.getElementById('example'));

独立文件

你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

然后在 HTML 文件中引入该 JS 文件：

React 实例

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

React 实例

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

React 实例

ReactDOM.render( <div> <h1>{i==1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

React 实例

varmyStyle={fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1style={myStyle}>H5混合开发</h1>, document.getElementById('example'));

注释

注释需要写在花括号中，实例如下：

React 实例

ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById('example'));

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

React 实例

vararr=[ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));

HTML 标签 vs. React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

varmyDivElement=<divclassName="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

varMyComponent=React.createClass({/*...*/});varmyElement=<MyComponentsomeProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

注意:由于 JSX 就是 JavaScript，一些标识符像 class和 for不建议作为 XML 属性名。作为替代，React DOM 使用 className和 htmlFor 来做对应的属性。

React 组件

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。

接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：

React 实例

varHelloMessage=React.createClass({render: function(){return <h1>HelloWorld！</h1>; }}); ReactDOM.render( <HelloMessage />, document.getElementById('example'));

实例解析：

React.createClass 方法用于生成一个组件类 HelloMessage。

<HelloMessage /> 实例组件类并输出信息。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

React 实例

varHelloMessage=React.createClass({render: function(){return <h1>Hello{this.props.name}</h1>; }}); ReactDOM.render( <HelloMessagename="Runoob" />, document.getElementById('example'));

以上实例中 name 属性通过 this.props.name 来获取。

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

React 实例

varWebSite=React.createClass({render: function(){return( <div> <Namename={this.props.name} /> <Linksite={this.props.site} /> </div> ); }}); varName=React.createClass({render: function(){return( <h1>{this.props.name}</h1> ); }}); varLink=React.createClass({render: function(){return( <ahref={this.props.site}> {this.props.site} </a> ); }}); ReactDOM.render( <WebSitename="菜鸟教程"site=" http://www.runoob.com" />, document.getElementById('example'));

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，也就是说 WebSite 拥有 Name 和 Link 的实例。

于任何开发人员来说，在其工具箱中使用Sublime都是一个不错的选择。作为一个跨平台、高度可定制的高级文本编辑器，虽然近年来，受到了一些其他的文本编辑器，比如Visual Studio Code和Atom的强烈冲击，但仍然拥有粉丝无数。

让Sublime如此受到热捧的核心，当然是其可扩展的插件架构，这使的开发人员可以轻松的在Sublime的核心功能基础上，根据其需要，安装各类第三方插件。在本文中，我将给所有JavaScript开发人员，推荐10款可以极大改进您工作流程，并提高您工作效率的Sublime插件，每个插件都可以通过Sublime的Package Control进行安装。

让我们开始吧！

1. Babel

名单上的第一个插件是Babel，这个插件为您的ES6/2015和React JSX代码添加了正确的语法高亮显示。

插件安装后，别忘记，您首先应该将Babel设置为所有JavaScript/TypeScript文件的默认语法处理器。

如果你觉得，语法高亮并不是一个特别强大的功能，Babel的另一项功能，一定会让你喜欢上它。

Babel可以与所有流行的构建工具和CLI很好地集成在一起，将ES6/ES7/ESNext，JSX和TypeScript代码，编译到ES5，以获得完整的浏览器支持！当然，如果您需要支持IE10及更低版本，可以按照其警告页面上的提示进行的修改。

2. SublimeLinter

接下来是SublimeLinter，它将两款JavaScript代码检查工具ESLint和JSHint都集成到了一个插件下，实际上，它仅仅是一款Lint工具框架，根据您为项目选择的具体验证工具，您还需要安装想要的SublimeLinter-eslint或SublimeLInter-jshint扩展包。

SublimeLinter会根据你在源代码中的相关语法配置文件，查看你的代码，并验证它是否有适当的样式和正确的语法。无论你是初学者，还是已经是业界大牛，我都推荐在您的JavaScript代码开发使用这一插件。而为了使其中任何一个开始工作，您首先需要通过npm工具，将linter包含到您的项目依赖项中，或者在全局中进行安装，比如：

npm install --save-dev eslint

如果您已正确的安装并配置好了SublimeLinter，则当您打开或保存JavaScript文件时，就可以看到它令人惊讶的效果，错误本身可以通过多种方式进行报告，默认情况下，则显示在编辑器底部的状态栏中。

3. Vue Syntax Highlight

Vue已经变得越来越流行了，但令大部分开发人员感到挠头的，则是在使用*.vue模板时，我们可能需要一些额外的帮助，来让代码变得更为可读。Vue Syntax Highlight就可以帮助你实现这一点。

4. SideBar Enhancements

SideBar Enhancements是一款Sublime的侧栏文件与文件夹增强工具，稍有遗憾的是，它只能使用Sumlime3中，而不能安装在Sublime2中，但现在这貌似应该不应该成为一个问题了。

插件安装后，则在Sublime的侧栏中，使用鼠标右键，单击任何的侧栏文件与文件夹，你都可以看到远比以前更为丰富的针对文件和文件夹的操作。

特别的，这个插件提供了一个非常别致的内容，即它可以通过Copy as Text -- Content as Data URI菜单，将一个文件的内容复制为data:uri base64表达形式，这对于在CSS中，直接嵌入Base64形式表达的图像特别方便。

同时，插件还提供了大量的各种姿态的搜索操作。同时，作为一个额外的好处，插件可以与另一款插件：SideBarGit，很好地集成在一起，从而在侧边栏中，直接提供各种Git操作。

随着JavaScript代码库规模的不断增加，选择一种浏览项目和操作项目文件的明智方式当然至关重要的。因此，至少我觉得，这个插件应该成为所有Sublime开发者的必须。

5. JsPrettier

SublimeLinter（其实就是ESLint或者JSHint），可以帮助我们解决代码格式检查的问题，那整个团队种，所有代码格式化的问题怎么解决呢？一个良好的方案，就是使用Prettier ，通过配置，我们可以制定整个团队所想要的代码风格，然后通过这里所介绍的编辑器插件JsPrettier来一键格式化/美化代码。

关于Prettier的安装，也是一件非常简单的事情，通过npm工具即可完成

npm install --save-dev prettier

更多的关于pettier的使用，则不是我想在本文中所将的内容。但如果您和您的团队，不喜欢在很多方面都有点自以为是的Prettier，那么，在这里，还可以介绍两个其他的Sublime插件推荐给您，一个JsFormat，另一个是配合ESLint一起使用的ESLint-Formatter。

6. TrailingSpaces

这是一款向代码洁癖癌患者推荐的利器，因为它就一个功能，即：可以清除代码结尾打多了几个空格或Tab！对于他们来说，这一插件绝对是他们的好基友。

但是，如果你是那种试图让自己的Sublime更轻的人，那么，在用户首选项中添加配置：

"trailing_spaces_trim_on_save" : true

就绝对是一个好主意，因为这个配置项能让Sublime在保存时，自动为你删除这些插件。

突出显示尾部空格

7. GitGutter

如果你是少数几个不使用Git的人，那么你可以跳过这一插件。但对于我们大多数人来说，Git已经成为了代码版本管理的必须，而GitGutter，虽然不会对您的工作流程，有什么大规模的改进，但确实是一个非常好的补充，特别是直接在代码中对各种插入，修改或删除的状态的提示，以及对于所修改内容的说明，对于开发者而言，是非常有帮助的。

8. BracketHighlighter

虽然这个插件出现在整个列表的后面，但并不表示它不重要，甚至可以说，它可能是整个列表中最重要的一款Sublime插件。

当然，这样说，并不是在说，BrackHighlighter的功能繁复，恰恰相反，其实际上，就非常专业的做好了一件事，即：用最直观的方式，匹配了代码中的各种块标记，比如一对大括号，一对圆括号等等所包含的代码。

随着代码规模的变大，我们实在是太想知道某个{，是在哪里开始，哪里结束的了，来一张图，感受下它的应用：

9. Markdown Preview

Sublime默认包含一些非常好的Markdown语法突出显示，但它缺少查看Markdown实际呈现效果的方式......如果你希望在.md文件提交前，就看到它的实际效果，那么，这个插件一定可以帮助到你。当然，可能这是您最不希望出现在这个列表中的插件，我还是少说几句为上。

10. Boxy Theme

通常情况下，我并不会考虑在插件推荐列表中，加入对主题插件的推荐。但我还是实在忍不住向大家推荐这个插件，哪怕只为了一点，就是：现在我们可以在侧边栏中，为每一种不同类型的文件，指定不同的图标。

这非常棒！当然Boxy不是唯一可以做到这一点的主题，但真的是其中非常不错的一个，这算是一点私货？

佳 React 开发IDE：

互联网上还有很多的IDE和编辑器。我们为您收集了2022年React.JS开发的最佳IDE。在此集合中，您将找到可帮助您简化工作流程的 IDE。

Visual Studio

URL： https://visualstudio.microsoft.com/
Github： https://github.com/microsoft/vscode
Documentation： https://docs.microsoft.com/en-us/visualstudio
Price： FreeLanguages
： C， Python， .NET， Javascript， React through extensionsPlatform
： Windows， Mac， LinuxExtension
or Plugins：https://marketplace.visualstudio.com/

VS Code由Microsoft发布：该工具在开源MIT许可证下可用。由于其功能和自由度，VScode经常赢得最受欢迎的IDE的投票。Visual Studio Code IDE 可用于 Windows、Linux 和 Mac 操作系统。它不仅支持JavaScript和React，而且还支持Node.js，TypeScript，并附带了其他语言的整个扩展生态系统，包括C++，C #，Python，PHP和（当然）.NET。

VS Code是一个很好的IDE，可以启动您的工作，因为它支持许多编程语言，并且具有许多功能，可以帮助您完成整个过程。

主要特点：

它具有对智能感知代码完成的内置支持，并且对语义代码有很好的理解。
导入模块;
与GitHub集成;
广泛的主题选择;
用于测试代码的集成工具;
通过扩展进行版本控制;
内置调试器;
支持语法高亮显示;
集成终端;
Go to定义;
Peek定义;
您也可以跳转到任何类定义;
用于JSX/React、Html和JSON的工具。

当然，您可能不需要VS Code的所有功能（如果您喜欢任何严肃的东西，这不太可能），因此可能想要选择其他东西，但是这个东西在所有情况下都适合我。

当然，我们还没有列出所有的功能，很可能你不会全部使用它们，但是这些东西在 React 开发方面效果很好。

如果我们看看VS Code和React这样的东西，那么VS Code可以配置为一个非常高效和高效的机器，以加速开发，这要归功于它的插件。其中一些插件增强了javascript编程;其中许多专门增强了 react、redux、react native 等的开发体验。

请注意，通过使用无数的插件，您可以更改整个编码过程并大大加快开发过程。

优点

它是免费的;
可在不同平台上使用;
市场上有超过20000个插件;
支持 React.js智能感知;
内存使用率低;
多语言;
强大的定制;
这是一个开源项目，因此您也可以为GitHub上不断发展的社区做出贡献。

缺点

有时滞后;
代码检查功能不是那么好;
调试功能可能更有帮助;
包括用于包管理的内置屏幕;
有时支持不是很好。

值得注意的扩展

React.js Starter Kit 是在 Bootstrap 的帮助下构建的 react 应用程序前端初学者工具包。它是一个跨平台的项目模板，由 Node.js 提供支持 - 基于 Gulp、Webpack、BrowserSync、Karma、Protractor 等开发工具，可加快 React 项目初始化速度。

显然，React Snippet Pack 是一个用于 React JavaScript 框架的代码段包。

WebStorm

URL： https://www.jetbrains.com/webstorm/
Github： –
Documentation： https://www.jetbrains.com/help/webstorm/meet-webstorm.html
价格： 9/year
语言： Angular， React， Vue， Node.js， Ionic， React NativePlatform
： Windows， Mac， LinuxExtension
or Plugins：https://plugins.jetbrains.com/webstorm

当然，我们不能不提到WebStorm——可能是最先进、最受欢迎的Web开发工具。这个强大的 JavaScript 开发 IDE 具有许多有用的功能，如智能编码辅助、代码完成、错误检测以及针对多种语言（如 JavaScript、Node.js、HTML 和 CSS）的重构。创建此IDE的公司称为JetBrains。

Webstorm IDE 的质量体现在它被绝大多数大型组织使用的事实中。

特征

内置调试器支持;
内置测试能力;
语法错误检测;
与 Git 集成;
与Mercurial集成;
内置的Web服务器有助于在线运行项目;
React 和 JSX 的代码完成;
它具有实时编辑功能，可让您在更改代码后立即在浏览器中查看更改;
版本控制系统;
内置终端。

最好的功能之一是，默认情况下，WebStorm配置为在您处理文件时自动保存文件，当您切换到其他IDE时，您会感受到WebStorm的美丽。另一件好事是，WebStorm有一个内置的版本控制系统，每次保存文件时都会提交。它与 Git 提交是分开的。

优点

与源代码控制系统（如GitHub，Git）以及Subversion，Perforce和Mercurial的原生集成;
设置的灵活性;
默认情况下与Angular，TypeScript，Vue，React的良好集成;
大量插件;
出色的缩进，有关如何简化代码的提示以及针对错误的基本代码验证;
非常有用的合并工具。

缺点

在性能方面不是很好;
处理大量项目的速度很慢;
相对复杂的设置;
它不是开源的。

如果您正在寻找一个成熟的平台，这可能是正确的选择，因为它以其过去15年的出色开发功能而闻名。

在 React 开发方面，有以下特性：

WebStorm 附带了 50 多个插件，使 React 开发更容易。
使用痕迹导航和标记树的彩色突出显示在 JSX 标记之间导航
与 Linters（如 ESLint）集成，用于 JSX 代码

我们认为 WebStorm 是市场上 React 开发中收入最高的 IDE，这要归功于它的许多功能、插件和良好的文档。

Reactide

URL： https://reactide.io/
Github： https://github.com/reactide/reactide
Documentation： –
Price： Free， open-sourceLanguages
： ReactPlatform
： macOS， Windows， UbuntuExtension
or Plugins： none

Reactide 是为数不多的、也是第一个专门用于 React 开发的 IDE 之一。它是一个跨平台的桌面应用程序，提供了一个自定义模拟器，使得构建工具和服务器配置变得不必要。

特征

无缝浏览器集成;
实时可视化;
在里面构建工具;
集成节点服务器;
集成终端。

优点

IDE内部组件的实时视图;
由于在开发环境中实时重新加载，您不需要在代码文件和浏览器之间翻转来检查所做的更改;
跨平台工具。

缺点

没有插件;
与其他工具相比，没有社区。

如果你想快速开发一个 React 项目或更改它，那么没有比 ReactIDE 更好的工具了。该工具运行迅速，并具有许多专门用于 React 开发的功能。

Vim Editor

URL： https://www.vim.org/
Github： https://github.com/vim/vim
Documentation： https://www.vim.org/docs.php
价格： FreeLanguages
：几乎所有
平台： Linux， macOSExtension
or Plugins： https://vimawesome.com/

Vim 是一个非常古老的 IDE。好吧，至少作为一个IDE。这是一个非常高级的文本编辑器，你永远不会让喜欢它的开发人员离开它，强迫他们切换到VScode或WebStorm。Vim因其配置属性而在开发人员中非常知名。它是免费的，高度可定制的。

Vim具有搜索和语法突出显示功能，并且超级轻量级。因此，它可以处理非常非常大的文件。但是，设置Vim需要很长时间。该工具具有图形界面，但是 - 您可能已经猜到了 - 它需要自定义。即使鼠标要工作，您也需要出汗。默认情况下，Vim 由键盘和键盘快捷键控制。Vim可以是一个伟大的IDE，如果你自定义它，并熟悉它内外。但如果时间紧迫，这可能不是最佳选择。

特征

它需要RAM上的很少空间来有效地运行;
不同的选项卡和窗口可以帮助同时处理不同的项目;
广泛的插件系统;
支持数百种编程语言和文件格式;
强大的搜索和替换功能。

优点

可以安装在非常多的操作系统上;
深度编辑器设置，您可以根据需要自定义所有内容;
代码编辑过程很快。

缺点

由于它是终端，它非常快，但很难学习;
习惯用户界面需要很长时间;

支持Vim的一个重要细节是，顶级公司的大量工程师使用VIM，例如Facebook。

用于 React 开发的著名插件

vim-jsx — JSX 的语法突出显示和缩进。

vim-react-snippets — Vim 与 Facebook 的 React 库配合使用的一组片段。

vim-babel — Vim 与 Facebook 的 React 库配合使用的另一组片段。

GNU Emacs Editor

URL： https://www.gnu.org/software/emacs/
Github： https://github.com/emacs-mirror/emacs
Documentation： https://www.gnu.org/software/emacs/documentation.html
价格： FreeLanguages
： Language agnosticPlatform
： GNU， GNU/Linux， FreeBSD， NetBSD， OpenBSD， MacOS， MS Windows and SolarisExtension
or插件： https://github.com/emacs-tw/awesome-emacs

GNU Emacs是一个文本编辑器，带有基本的用户界面，但功能非常有用。该工具属于以其可扩展性而闻名的文本编辑器系列。GNU Emacs对于那些知道如何使用Vim编辑器的人来说将非常熟悉。这个编辑器可以被称为最简单的编辑器，但是，它没有错过任何重要功能。

特征

提供有据可查的参考资料;
支持统一码文件;
安装和下载扩展的功能;
它可以做的不仅仅是React Native应用程序开发。
完全支持统一码;

优点

高速编码环境;
语法突出显示;
很多有用的教程;
主题定制;

缺点

很难习惯;
初始设置时间很长;
许多功能：发现它们可能需要很长时间。

至于 React，Emacs 确实需要一些工作和插件才能真正让它高效地工作。

扩展

web-mode.el — 它是一种自治的 emacs 主要模式，用于编辑 Web 模板。它与包括JSX（React）在内的许多语言兼容。

Spacemacs Editor

URL： https://www.spacemacs.org/
Github： https://github.com/syl20bnr/spacemacs
Documentation： https://www.spacemacs.org/doc/DOCUMENTATION.html
价格： FreeLanguages
：几乎与语言无知
的平台： Windows， Mac， LinuxExtension
or Plugins： –

寻找Emacs和Vim的最佳组合，这是将为您提供最佳服务的编辑器。Spacemacs是一个社区驱动的Emacs发行版，因此是最好的编辑器，从Emacs和Vim中获取了最好的。

特征

一个伟大的用户界面，与Vim相比，这里最好的功能之一;
组织良好的密钥绑定;
Git 集成;
简单的查询系统，可快速查找可用的图层、包等。

优点

可在多个平台上使用;
这里提供的文档绰绰有余;
Spacemacs有一个伟大的社区，这意味着你永远不会长时间被困在一个问题上;
如果您已经是Emacs或Vim的粉丝，那就太好了;
可以配置 eslint 支持;
可以使用更漂亮的.js来格式化保存的文件。

缺点

CPU使用率不是很优化;
该工具有时会卡住。

Emacs依赖于社区编写的开源软件包，基本上每种语言的每个IDE功能。我们认为这很棒：您可以自己开发软件包。肯定有一个学习曲线，但也有一些非常好的工具可以帮助自己在emacs中定位自己。

扩展

React layer — React 的 ES6 和 JSX ready configuration layer。它将自动识别 .jsx 和 .react.js 文件。一个用于 React 集成的包层。

Sublime Text

URL： https://www.sublimetext.com/
Github： https://github.com/SublimeText
Documentation： https://www.sublimetext.com/docs/
价格： > $0 — $99< —
语言： 几乎与语言无关
平台： Windows， Linux， macOSExtension
or Plugins： 没有一个目录，但有很多插件

Sublime Text是几乎每种语言的强大文本编辑器。它轻量级，功能丰富，并在流行的平台上受支持。用户只需要一个许可证即可在任何计算机上使用崇高文本。该工具速度很快，与多个工具集成，并支持React和React Native以及所有Web编程语言。崇高文本提供了强大的插件支持，以增强编辑器的功能。它目前在Windows，Mac和Linux上可用。

Sublime文本编辑器的功能可以使用插件进行扩展和调整。在实践中，许多JS插件有助于将Sublime Text变成一个优雅的Javascript IDE。

Sublime Text使用针对速度和美观性进行了优化的自定义UI工具包，并利用了每个平台上的本机功能。

特征

崇高文本支持代码的自动完成以及用户创建的变量;
命令面板有助于设置代码的语法。
一个伟大的API和包库对开发人员是有益的;
支持设置键绑定和宏，便于编码;
编辑器的一个令人敬畏的功能是显示长代码的压缩预览，这有助于您更快地浏览代码。

优点

易于导航;
可以扩展功能;
多行编辑可能;
初学者友好;
伟大的键盘快捷键和多选选项;
您可以快速转到类或方法的定义。

缺点

不是开源的;
大文件加载缓慢;
不是一个完整的IDE;
不是免费的 - 对许多开发人员来说是一个大问题;
免费模式有很多烦人的通知。

我们并不是使用Sublime进行REACT开发的忠实粉丝，因为还有其他更好和免费的选项可用。如果你已经在组织中使用Sublime，并且想要在你的项目中包含React，这绝对是一个不错的选择，不需要挠挠头去寻找其他任何东西。

包

react-native-snippets — 它是 React-native 的 Sublime Text Snippets 的集合

babel-sublime — 带有 React JSX 扩展的 ES6 JavaScript 的语法定义。

Rekit Studio

URL： https://rekit.js.org/
Github： https://github.com/rekit/rekit
Documentation： https://rekit.js.org/
价格： FreeLanguages
： ReactPlatform
： WebExtension
or Plugins： https://rekit.js.org/docs/plugin.html

Rekit 是一个专门用于使用 React 开发应用程序的 IDE。它既可以用作IDE，也可以用作工具包，可用于使用React，React路由器和Redux开发Web应用程序。Rekit studio在节点服务器上运行，是一个npm包，因此，它在浏览器中运行。开发人员可以利用 Rekit Studio 的许多功能，包括代码编辑、代码生成、依赖关系图、重构、生成、单元测试以及更简单的代码导航方法。我们喜欢Rekit的主要功能是每个React应用程序都有自己的Rekit工作室，因此事情仍然简单可控。但是，我们不建议将 Rekit 用于企业级 React js 开发。

特征

重构;
单元测试;
代码生成;
支持Less和Sass;
React 路由器;
命令行工具;
您还可以通过开发自己的插件来扩展Rekit功能。

Brackets

URL： http://brackets.io/
Github： https://github.com/adobe/brackets
Documentation： http://brackets.io/docs/current/modules/brackets.html
价格： FreeLanguages
： JS， Ruby， Python， Perl， etc.
平台： Windows， Linux， macOSExtension
or Plugins： https://registry.brackets.io/

Brackets是一个非常轻量级和闪电般的Web开发IDE，但看起来更像是一个源代码编辑器。它是主要为Web开发人员构建的IDE之一。支架具有巨大的插件支持，并且完全免费使用。由Adobe Systems创建，这个开源软件可以帮助您使用所有Web编程语言构建代码。Brackets 适用于 Mac、Windows 和 Linux。功能查找和快速项目切换是它提供的一些显着功能。

特征

实时预览，允许您实时连接到浏览器;每当您进行更改时，您都会立即在屏幕上看到更改;
支持预处理器;
内置的JavaScript调试器;
大量的插件支持;
启用快速编辑功能;
适用于Windows，Linux和Mac OS;
允许多个开发人员协作处理代码;
包括代码折叠和语法突出显示;
内联编辑器。

优点

谷歌浏览器中的扩展程序。许多开发人员强调的Brackets编辑器的主要功能是与Google Chrome进行实时通信。在此机制的帮助下，开发人员可以立即观察进行更改后所有这些更改将如何在浏览器中显示;
广泛开发的热键系统;
将 Brackets 与其他 JS 编辑器区分开来的主要功能是 Extract 函数。提取功能允许您直接从PSD中提取信息 - 例如字体，颜色和尺寸，具有纯CSS，没有上下文代码引用;
代码缩小。

缺点

与市场上的其他编辑器相比，扩展很少;
缺乏对服务器端语言的支持;
困难的项目管理;
处理大文件时性能低下。

在 react 方面，有一些插件可用于增强 Brackets 功能，以便使用 React 组件进行快速开发。

括号是最好的Web IDE，如果你正在寻找一个理解网页设计的编辑器。它附带了一套很好的可视化工具，例如网站表单创建者或其他预处理器支持。它是由网页设计师为网页设计师创建的。

注意：Adobe 将于 2021 年 9 月 1 日结束对 Brackets 的支持。如果您想继续使用、维护和改进 Brackets，可以在 GitHub 上分叉该项目。

Atom

URL： https://atom.io/
Github： https://github.com/atom
Documentation： https://atom.io/docs
价格： Free， open-sourceLanguages
： most JavascriptPlatforms
： Windows， Linux， macOSExtension
or Plugins： https://atom.io/packages

如果你在Github上开发一个Web应用程序，那么没有比Atom更好的IDE了。这个开源编辑器是由GitHub开发的，因此与该平台密切相关。Atom也是一个完全正常的Javascript编辑器，借助于可以实现的Web项目。Atom拥有广泛的社区支持，可以倾听并处理反馈。它可以在Windows，Linux和macOS上使用，并具有庞大的软件包存储库，以满足开发人员的需求。

特征

易于使用，具有出色的导航UI;
为多个开发人员提供协作支持;
内置自动完成和建议功能;
语法突出显示;
Atom有一个内置的包管理器，可以不断更新包;您也可以搜索软件包或开始创建自己的软件包;
它还具有一项功能，您可以在其中将文件的模块或整个文件拖放到其他文件中;
跨平台编辑;
在文件中键入内容时或在所有项目中查找、预览和替换文本。

优点

完全免费使用;
大量套餐可满足各种需求;
跨平台;
即时文件切换;
包。Atom有一个内置的CoffeeScript包管理器;
内置的包管理器很棒;
简单的界面学习和使用;
Git 集成。

缺点

Atom启动缓慢;
超过 10–15 MB 的文件可能会导致崩溃。
文档不是很好;
缺乏代码执行;
比其他顶级编辑慢;
基于电子 - 因此速度问题。

Atom是真正可破解的，可以使用大量基于Node.js的插件进行定制，以扩展atom功能以满足您的需求。由于来自不同社区的大力支持以及令人敬畏的UI界面和功能，它吸引了很多开发人员。

包

zenchat-snippets — 它是 react-native、redux 和 ES6 的片段集合。
language-babel — 这个软件包包括所有JavaScript版本的语言语法，包括ES2016和ESNext，Facebook React使用的JSX语法，Atom的蚀刻等。

选择正确的 IDE 将对您作为开发人员的性能产生非常大的影响。每个 IDE 都有自己的一组功能、优缺点，这些特性和优缺点是它们之间的区别。我们还讨论了用于开发 React 应用程序的所有最佳 IDE。如果你迁移到 IDE 来帮助你进行 React 开发，我们保证你不会回到普通的编辑器。

希望您能为下一个Web开发项目找到合适的一个。毕竟，编写代码的是开发人员，而不是IDE。

在线咨询

上一篇：使用简单的HTML和CSS构建漂亮的Electron
下一篇：vue中的prop

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

React 教程安装—JSX—组件=集成所有教程—f

React 特点

React 第一个实例

React 实例

React 安装

React 实例

项目的目录结构如下：

src/App.js

React JSX

使用 JSX

React 实例

React 实例

React 实例

样式

注释

数组

React 实例

React 组件

React 实例

实例解析：

React 实例

复合组件

React 实例

1. Babel

2. SublimeLinter

3. Vue Syntax Highlight

4. SideBar Enhancements

5. JsPrettier

7. GitGutter

8. BracketHighlighter

9. Markdown Preview

10. Boxy Theme

Sublime Text

Rekit Studio

Brackets

Atom

您的项目需求