反应.js

雇用 Top 3%Freelance 反应.js开发人员

托塔尔是专用React.js开发人员,工程师,程序员,编码人员,架构师和顾问的市场。顶尖公司和初创企业选择Toptal 反应.js自由职业者来执行其关键任务React.js开发项目。

无风险试用,仅在满意时付款。

客户评价 托塔尔 反应.js 开发者4.4 / 5.0截至2021年1月30日,平均共有1,164条评论

受到领先品牌和初创企业的信任

雇用Freelance 反应.js开发人员和工程师

菲尔·格林伯格

Freelance 反应.js开发人员

美国托塔尔 Member Since March 29, 2017

Phil的职业生涯始于软件工程师,但很快发现他的真正热情集中在产品管理上。在他的职业生涯中,他'在产品和工程领域成功地扮演了各种角色-从构思到发布,管理着多达12人的团队和三种不同的SaaS产品。

展示更多

尤拉·胡萨尔(JurajHusár)

Freelance 反应.js开发人员

斯洛伐克托塔尔 Member Since May 10, 2017

Juraj是位思想开放的Web开发人员'准备迎接新挑战。他的职业生涯大部分时间都花在了Web开发上–从PHP开始,后来在Java和Spring工作,现在'掌握前端领域。他喜欢与伟大的人们一起工作,启发他人并受到启发。

展示更多

加布里埃尔·考特曼奇

Freelance 反应.js开发人员

加拿大托塔尔 Member Since June 7, 2018

Gabriel是一位高效且可靠的专业人员,在Web应用程序开发方面拥有广泛的技能。他'从Shopify和Autodesk的生产工程团队中的可伸缩性问题到为初创公司启动新应用程序,我们一直在致力于各种产品和客户。他的大部分工作由领先的技术团队组成,包括创建一个轻松的开发环境,解决技术问题,提供最佳实践代码示例以及指导开发人员。

展示更多

马从文

Freelance 反应.js开发人员

美国托塔尔 Member Since November 4, 2017

Congwen是一位专门的Web开发人员,专门研究使用实际框架开发全栈Web应用程序。他'他热衷于为他人解决问题,对他而言,一个好的解决方案通常需要一定的创造力,然后需要更多的精力去适应和完善。

展示更多

梁大卫

Freelance 反应.js开发人员

美国托塔尔 Member Since October 23, 2017

David是一位全职工程师,拥有超过12年的Web开发经验,负责管理开发过程的各个方面。他'从事了50多个项目,解决了行销,医疗保健,电子商务,房地产和汽车保险等各个行业的复杂业务问题。大卫一直在节省成本的同时增加利润。他'准备有机会利用他的技能成倍增长您的收入。

展示更多

本杰明·库克(Benjamin Kuker)

Freelance 反应.js开发人员

加拿大托塔尔 Member Since October 15, 2019

Benjamin是一位扎实的开发人员,其职业生涯亮点是担任大数据分析初创公司,支付处理器和用户测试服务的高级全栈开发人员。他'负责整个开发生命周期,并专注于前端。本杰明在执行细节上一丝不苟,同时始终考虑和平衡更广泛的利益相关者的关注。在沟通方面,他是及时,相关和专业的。

展示更多

达沃·巴德罗夫(Davor Badrov)

Freelance 反应.js开发人员

克罗地亚托塔尔 Member Since December 12, 2017

Davor是一名全职工程师,在企业和启动项目方面拥有六年的专业经验。他'他热衷于学习,扩展知识,构建高质量软件和自动化。

展示更多

阿卜杜勒哈米德·阿塔比

Freelance 反应.js开发人员

埃及托塔尔 Member Since November 8, 2019

Abdelhamid是一位具有10多年经验的专业软件工程师。 Coligo Technologies的前团队负责人兼首席技术官。他拥有理学硕士学位和博士学位。计算机科学与工程专业。他的专长包括JavaScript,Node.js,Python,REST API,Express,Redis,MongoDB,PostgreSQL,React,Redux,CI / CD和云服务。

展示更多

塞巴斯蒂安·卡里诺夫斯基(Sebastian Kalinowski)

Freelance 反应.js开发人员

波兰托塔尔 Member Since May 10, 2019

Sebastian是.NET开发人员,专门从事后端层开发。他在银行,金融和招聘行业拥有十多年的专业经验。他还对前端开发(React),系统设计和体系结构感到满意。 Sebastian已与众多客户成功合作,以定义需求,设计新的系统元素,实现新的功能以及优化现有系统。

展示更多

塞尔吉·佩特里克(Sergii Petryk)

Freelance 反应.js开发人员

加拿大托塔尔 Member Since February 27, 2018

Sergii拥有十多年的经验,为数百万的用户提供服务,对任何项目都具有对软件开发原理和最佳实践的深刻理解。他的专长包括JavaScript / TypeScript,Node.js,React,Vue.js,D3.js等。

展示更多

立即注册以查看更多个人资料。

开始招聘

招聘指南

雇用优秀React.js开发人员的指南

反应是Facebook开发的JavaScript库,彻底改变了我们对应用程序的思考方式。它从声明式,响应式和函数式编程中汲取了创意,使开发高度交互的用户界面变得轻而易举。因此,每个前端开发人员都应该在工具带中放一些东西。 找到满足您所有React需求的合适的工程师可能是一项挑战。本招聘指南为招聘过程提供了一系列有见地的问题,以帮助您确定各自领域的专家,这些出色的全职和兼职React开发人员。

阅读招聘指南

反应.js招聘资源

更多资源来雇用React.js开发人员

职位描述模板

面试问题

提示与实践

工作

信任飞行员
托塔尔 in the press

...使公司能够快速组建对特定项目具有适当技能的团队。

Despite accelerating demand for coders, 托塔尔 prides itself on almost Ivy League-level vetting.

我们的客户
构建一个跨平台的应用程序以供全球使用
蒂埃里·雅基切维奇(Thierry Jakicevic)
构建一个跨平台的应用程序以供全球使用
1
2
3
为游戏创建一个应用
科纳·肯尼
为游戏创建一个应用
1
2
3
引领数字化转型
埃尔玛·普拉泽(Elmar Platzer)
引领数字化转型
1
2
3
感言

Tripcents会'没有Toptal就存在。 托塔尔 Projects使我们能够与产品经理,首席开发人员和高级设计师一起快速发展我们的基础。在短短60天内,我们从概念发展到了Alpha。速度,知识,专业知识和灵活性是首屈一指的。 托塔尔团队是Tripcents的任何内部团队成员,也是Tripcents的一部分。他们像其他所有人一样做出了贡献并获得了开发的所有权。我们将继续使用Toptal。首先,它们是我们的秘密武器。

布兰特利·佩斯(Brantley Pace),首席执行官& Co-Founder

Tripcents

我们对Toptal的经验感到非常满意。与我一起工作的专业人员在几个小时内就与我通了电话。与他讨论我的项目后,我知道他是我想要的候选人。我立即雇用了他,他不花时间去参加我的项目,甚至通过添加一些很棒的设计元素来增强我们的整体外观而付出了更多努力。

董事Paul Fenley

邓恩& Associates

与我配对的开发人员令人难以置信-聪明,有驱动力和反应灵敏。过去很难找到质量工程师和顾问。现在不是't.

瑞安·洛克菲勒(Ryan Rockefeller),首席执行官

拉迪厄斯

托塔尔立即了解我们的项目需求。从第一天起,我们就与一位来自阿根廷的杰出自由职业者相匹配,这位自由职业者专注于我们的行业,与我们的团队无缝融合,了解我们的愿景,并取得了一流的成绩。 托塔尔使与高级开发人员和程序员的联系变得非常容易。

联合创始人Jason Kulik

ProHatch

作为一家资源有限的小公司,我们可以'不能承担昂贵的错误。 托塔尔为我们提供了一个经验丰富的程序员,他能够扎实地工作并立即开始做出贡献。这是一次很棒的经历,我们'd再次心跳重复。

校长Stuart Pocknee

特定于站点的软件解决方案

我们使用Toptal聘请了具有丰富Amazon Web Services经验的开发人员。我们采访了四名候选人,其中一位最适合我们的要求。该过程快速有效。

AbnerGuzmánRivera,首席技术官兼首席科学家

照片Kharma

Sergio是一位很棒的开发人员。一流,响应迅速,高效地完成了工作。

丹尼斯·鲍德温(Dennis Baldwin),首席技术专家兼联合创始人

PriceBlink

与Marcin合作是一件乐事。他胜任,专业,灵活并且非常快速地了解需要什么以及如何实施。

首席技术官AndréFischer

开机自检

我们需要一个可以立即开始我们项目的专家工程师。 Simanas的工作超出了我们的期望。无需采访和追逐专家开发人员,这可以节省大量时间,并且使每个人都对我们选择平台以使用更强大的语言感到满意。 托塔尔使该过程变得轻松便捷。现在,Toptal是我们寻求专家级帮助的第一位。

Web开发高级副总裁Derek Minor

网络世界媒体集团

托塔尔's developers 和 architects have been both very professional 和 easy to work with. The solution they produced was fairly priced 和 top quality, reducing our time to launch. Thanks again, 托塔尔.

杰里米·韦塞尔斯(Jeremy Wessels),首席执行官

科尼西

我们在Toptal方面拥有丰富的经验。他们将我们与适合我们应用程序的完美开发人员配对,使过程非常容易。超出初始时间范围也很容易,而且我们能够在整个项目中保留相同的承包商。我们绝对推荐Toptal来快速,无缝地找到高质量的人才。

首席技术官Ryan Morrissey

应用商业技术有限公司

I'm incredibly impressed with 托塔尔. Our developer communicates with me every day, 和 is a very powerful coder. He's a true professional 和 his work is just excellent. 5 stars for 托塔尔.

Pietro Casoar,首席执行官

罗宁游乐有限公司

与Toptal的合作经验非常丰富。在使用它们之前,我花了很多时间采访其他自由职业者,'找不到我需要的东西。与Toptal接触后,他们在短短几天内就将我与完美的开发人员配对。开发者我'与他合作不仅提供了高质量的代码,而且还就我以前没有的东西提出了建议't thought 的. It'对我来说很清楚,阿毛里知道他在做什么。强烈推荐!

首席执行官郑

Bulavard,Inc.

作为Toptal合格的前端开发人员,我还经营自己的咨询业务。当客户来找我帮助填补他们团队中的关键角色时,Toptal是我唯一推荐的地方。托塔尔'整个候选人池就是最好的。最高是我最物有所值'我们发现了将近五年的专业在线工作。

首席技术官Ethan Brooks

朗格茨专利&商标工程有限公司

在Higgle中's early days, we needed the best-in-class developers, at affordable rates, in a timely fashion. 托塔尔 delivered!

首席执行官Lara Aldag

闲聊

托塔尔使寻找候选人变得异常容易,使您放心,他们具备应聘技巧。我绝对会向任何寻求高技能开发人员的人推荐他们的服务。

数据经理Michael Gluckman

退出

托塔尔能够迅速将我们的项目与最优秀的开发人员进行匹配的能力真是太棒了。开发人员已成为我们团队的一员,他们每个人所表现出的专业承诺水平令我感到惊讶。对于那些希望与最好的工程师进行远程合作的人,Toptal就是您的最佳选择。

创始人Laurent Alis

Livepress

托塔尔使寻找合格的工程师变得轻而易举。我们需要一个经验丰富的ASP.NET MVC架构师来指导我们的启动应用程序的开发,Toptal在不到一周的时间内为我们提供了三个不错的候选人。做出选择后,工程师立即上线并开始运作。这比必须自己发现和审查候选人要容易得多。

联合创始人Jeff Kelly

协调解决方案

We needed some short-term work in Scala, 和 托塔尔 found us a great developer within 24 hours. This simply would not have been possible via any other platform.

弗兰科·阿尔达(Franco Arda),联合创始人

WhatAdsWork.com

托普塔尔(Toptal)为正在快速发展和规模化的企业提供不妥协的解决方案。我们每个工程师 '通过Toptal签约的ve已迅速融入我们的团队,并以最高的质量标准保持他们的工作,同时保持了飞速的发展速度。

格雷格·金博尔(Greg Kimball),联合创始人

nifti.com

如何通过Toptal雇用React.js开发人员

1

与我们的一位行业专家交谈

A 托塔尔 director 的 engineering will work with you to understand your goals, technical needs, 和 team dynamics.
2

与手工挑选的人才一起工作

在几天之内,我们'将向您介绍适合您的项目的React.js开发人员。平均比赛时间不超过24小时。
3

合适的,有保证的

与您的新React.js开发人员一起试用(仅在满意时付款),以确保他们'在开始参与之前重新选择合适的衣服。

常见问题

  • How are 托塔尔 反应.js developers different?

    在Toptal,我们彻底筛选了React.js开发人员,以确保我们只与具有最高才能的人才相匹配。每年申请加入Toptal网络的100,000多人中,晋级的比例不到3%。您将与工程专家(从不聘请一般招聘人员或人力资源代表)合作,以了解您的目标,技术需求和团队动力。最终结果:专家审核了我们网络中的人才,并根据您的业务需求进行了定制匹配。 现在开始。

  • Can I hire 反应.js developers in less than 48 hours through 托塔尔?

    根据可用性和进度的快慢,您可以在注册后48小时内开始与React.js开发人员合作。 现在开始。

  • What is the no-risk trial period for 托塔尔 反应.js developers?

    我们确保您与React.js开发人员之间的每次互动都以长达两周的试用期开始。这意味着您有时间确认参与将成功。如果您对结果完全满意,我们将为您收取时间费用,并继续为您服务。如果您不完全满意,则无需付费。从那里,我们可以分开,也可以为您提供另一位更合适的专家,我们将与他一起开始第二次无风险的试验。 现在开始。

分享
反应.js

如何聘请伟大的React.js开发人员

介绍

客户端应用程序开发的另一波发展趋势正在逼近。它涉及ES6,JavaScript的新版本,通用应用程序,功能编程,服务器端渲染和Webpack,就像带有jetpack的任务运行器一样。

而且,React现在非常热门。这是构建高性能组件的简洁而出色的框架。既然我们已经拥有了所有的一切,那么您如何找到缺失的部分-工程师将拥抱它并为您构建最新的软件?

反应彻底改变了我们对应用程序的思考方式

反应彻底改变了我们对应用程序的思考方式

坦然反应

首先是第一件事。在React仅作为视图库进行销售的情况下,由于客户端应用程序不仅仅包含视图,因此React不会是候选人唯一使用的工具。尽管如此,它仍然是至关重要的。以下是一些筛选问题。

问:React中的高阶组件是什么?

广义上讲,高阶组件是包装器。它是一个以组件为参数并返回新参数的函数。它可用于扩展或修改所包含组件的行为(包括渲染的输出)。装饰器模式很好地说明了这种在不修改React中基础类的情况下更改行为的组件的使用。

高阶组件是使用合成来构建组件的一种方法。一个示例用例是抽象出多个组件共有的代码段:

Player.js

import 反应, {Component, PropTypes} from 'react';

export default class Player extends Component {
  static propTypes = {
    black: PropTypes.bool,
    data: PropTypes.object,
    styles: PropTypes.object
  };

  static defaultProps = {
    black: false,
    data: {
      src: null,
      caption: ''
    },
    styles: {}
  };

  render() {
    const { black, data, styles } = this.props.data;
    return (
      <div className={
        'module-wrapper' +
        (styles ? ' ' + styles : '') +
        (black ? ' module-black' : '')}>
        <section className="player-wrapper video-player-wrapper">
          <video className="player" src={data.src} />
          <p className="player-caption">{data.caption}</p>
        </section>
      </div>
    );
  }
}

Consider this component, which holds a Player but also contains module markup. That markup could be reused for other components. Let’s abstract it, 和 also allow for passthrough 的 properties:

Player.js

import 反应, {Component, PropTypes} from 'react';
import ModuleContainer from './ModuleContainer';

export class PlayerInline extends Component {
  static propTypes = {
    data: PropTypes.object
  };

  static defaultProps = {
    data: {
      src: null,
      caption: ''
    }
  };

  render() {
    const { src, caption } = this.props.data;
    return (
      <section className="player-wrapper video-player-wrapper">
        <video className="player" src={src} />
        <p className="player-caption">{caption}</p>
      </section>
    );
  }
}

const Player = new ModuleContainer(Player);
export default Player;

ModuleContainer.js

import 反应, {Component, PropTypes} from 'react';

export default function ModuleContainer(Module) {
  return class extends Component {
    static propTypes = {
      black: PropTypes.bool,
      styles: PropTypes.object
    };

    render() {
      const { black, styles } = this.props // 埃斯林特-disable-lint
      return (
        <div className={
          'module-wrapper' +
          (styles ? ' ' + styles : '') +
          (black ? ' module-black' : '')
        }>
          <Module {...this.props} />
        </div>
      );
    }
  };
}

Now we can still use the previous way 的 instantiating Player, no changes here. We can also use the inline player if we prefer. Then the module wrapper markup 和 props can be used with other modules:

<Player data={playerData} styles={moduleStyles} />

<PlayerInline data={playerData} />

高阶组件是2015年初在React for ES6中摆脱混合功能的设计决策的直接答案。实际上,高阶组件使结构更清晰,并且易于维护,因为它们是分层的,而混入由于平面结构而发生冲突的可能性更大。

要了解更多信息,请查看 高阶组件的另一个用例示例,重点放在消息传递道具上。同时检查 Redux的作者Dan Abramov概述了高阶组件优先于mixins, 和 Ben Nadel使用裁判进行高级合成的有趣示例.

Q: Which components should rely on state, 和 why?

考虑到关注点的分离,将表示与逻辑脱钩似乎是明智的。在React世界中,一切都是组件。但是用于呈现数据的组件不必从API获取该数据。惯例是 呈现的 (哑)组件无状态,并且 容器 依赖状态的组件。

也就是说,公约并不严格。 反应中也有不止一种状态。尽管意见不一,但在表达方式(尤其是交互方式)中使用本地状态似乎并不是一个坏习惯。

组件类和无状态函数组件之间的另一个区别是。显然,后者没有状态。说到无状态功能组件,官方建议尽可能使用它们。

问:什么是JSX?它是如何工作的,为什么要使用它?

JSX是React 的JavaScript的语法糖,由于它具有类似XML的语法,因此使编写组件变得容易。但是,JSX是JavaScript而不是HTML,并且React将JSX语法转换为纯JavaScript。

乍一看,它看起来很尴尬,尽管目前已经有很多熟练的开发人员习惯了。使用它的主要原因是简单性。定义甚至最终将呈现为HTML的轻微复杂的结构也可能是艰巨且重复的:

反应.createElement('ul', { className: 'my-list' }, 
  反应.createElement('li', { className: 'list-element' }, 
    反应.createElement('a', { className: 'list-anchor', href: 'http://google.com' }, 'Toptal.com'),
    反应.createElement('span', { className: 'list-text' }, ' Welcome to the network')
  ),
  反应.createElement('li', { className: 'list-element' }, 
    反应.createElement('div', { className: 'list-item-content' }, 
      反应.createElement(SomeCustomElement, {data: elementData})
    )
  )
);

与:

<ul className="my-list">
  <li className="list-element">
    <a className="list-anchor" href="http://wybyqm.icu">Toptal.com</a>
    <span className="link-text"> Welcome to the network</span>
  </li>
  <li className="list-element">
    <div className="list-item-content">
      <SomeCustomElement data={elementData} />
    </div>
  </li>
</ul>

考虑具有多个嵌套的更复杂的元素导航组件。简洁是大多数框架具有某些模板引擎的原因之一,而React具有JSX。

要了解更多信息,请查看 容器组件上下文中对JSX的影响性讨论.

前端开发的新方法

ES6(ECMA Script 2015)是JavaScript的新版本,它是在不久前发布的。开源社区中的大多数React材料都使用ES6,有时甚至使用ES7。新版本增加了JavaScript的表达能力,还解决了该语言的一些问题。当前的标准程序是使用 巴别塔,将ES6编译为ES5。它允许我们在ES6中编写代码,并使其在大多数当前浏览器(如ES5)中正确执行。因此,至关重要的是,您要雇用的开发人员必须精通ES6。

问:ES6中的功能有哪些新功能?

实际上有一些。最突出的是箭头函数表达式,这是一种编写匿名函数表达式的简洁方法:

var counterArrow = counter => counter++;
// equivalent to function (counter) { return counter++; }

There is a significant difference. With arrow functions, the this object captures the value 的 the enclosing scope. So there is no more need to write var that = this.

另一个区别是参数的定义或传递方式。ES6带有默认参数和rest参数。当调用中未提供参数默认值时,默认参数是一种非常有用的方法。其余参数的语法与spread运算符相似,允许以优雅的方式处理传递给函数的不确定数量的参数。

var businessLogic = (product, price = 1, ...rest) => {
  product.price = price;
  product.details = rest.map(detail => detail);
};

问:ES6和React中的类是什么?

ES6类提供了创建对象的方法,并且实际上仍然依赖于原型继承。它们主要是语法糖,但非常方便。但是,React类不需要它们。

反应 classes are components. They can be defined in one 的 three ways: using the 反应.createClass() method, using an ES6 class, or using a function to create stateless function components:

const Counter1 = 反应.createClass({
  propTypes: {
    count: PropTypes.number
  }

  defaultProps: {
    count: 0
  }

  render: function() {
    return <span>Count: {this.props.count}</span>;
  }
});
class Counter2 extends Component {
  static propTypes = {
    count: PropTypes.number
  }

  static defaultProps = {
    count: 0
  }

  render() {
    return <span>Count: {this.props.count}</span>;
  }
}
function Counter3(props) {
  return <span>Count: {props.count}</span>;
}

Counter3.propTypes = {
  count: PropTypes.number
};

Counter3.defaultProps = {
  count: 0
};

如前所述,建议尽可能使用无状态功能组件。但是,这些组件尚未针对性能进行优化。考虑在Redux和 反应 了解更多。

问:本地或内联样式是Web开发中样式的新趋势吗?

This one is pretty rad. Until now, the declarative 的CSS always shared a global scope. To add styles to a reusable component, the developer had to choose a namespace carefully. Another thing, sometimes it is hard to work with 的CSS, because some style had to be computed, 和 so that single style became an exception. Of course, there is calc(), but it is not always sufficient.

本地风格,有时也称为 内联样式,解决这两个问题。现在可以将样式表绑定到组件,知道它们相对于它们的作用域仍然是本地的。样式不会影响超出其范围的元素。如果这还不够的话,这些样式就可以在JavaScript中轻松获得。

AlertWidget.scss

.alertWidget {
  font-variant: italics;
  border: 1px solid red;
  padding: 13px;
}

.alert {
  font-weight: 700;
  color: red;
}

AlertWidget.js

import 反应, {PropTypes} from 'react';

function AlertWidget(props) {
  const styles = require('./AlertWidget.scss');
  return (
    <div className={styles.alertWidget + ' well'} >
      <div className="wrapper">
        <p className={styles.alert}>{props.alert}</p>
        <p>{props.text}</p>
      </div>
    </div>
  );
}

AlertWidget.propTypes = {
  alert: PropTypes.text,
  text: PropTypes.text
};

export default AlertWidget;

并非总是所有样式都必须是本地的,但这当然是一个非常强大的工具。要了解更多信息,请查看 有影响力的媒体介绍当地风格讨论CSS技巧中的内联样式的优缺点

反应彻底改变了我们对应用程序的思考方式

你如何陈述

仅包含本地组件状态就很难维护包含多个组件的应用程序,尤其是大型应用程序。除了控制器风格的逻辑之外,在React中添加其他任何东西也感觉很糟糕。但是不用担心,已经有解决方案。

问:React中的应用程序状态是什么,什么控制状态?

答案很简单–它是代表当前数据集和应用程序其他属性的对象。应用程序状态与组件本地状态的不同之处在于可以被多个组件引用。

另一个区别是应用程序状态不应直接更改。唯一可以更新的地方是商店。商店控制着应用程序的状态,还定义了可以分派的动作,例如用户交互的结果。

大多数React组件都不应依赖于应用范围。表示组件很可能有权访问数据,但随后应通过属性将数据提供给它们。在React中,约定是只让容器元素调度动作并引用应用程序范围。

问:那么,有哪些用于控制React状态的工具?

在使用React构建的应用程序中处理应用程序状态通常是在React之外完成的。带给我们React的Facebook也介绍了Flux架构及其实现。客户端应用程序的Flux部分是发生前端业务逻辑的地方。

反应与Flux没有紧密结合。还有一个以上的Flux实现。实际上,有很多,也有其他受Flux启发的非常受欢迎的产品。最受欢迎的Flux实现是Facebook Flux,Reflux和Alt.js。还有Redux,它基于Flux原理,许多人认为Flux有所改进。

这些库都将完成工作。但是,需要做出选择,这对于开发人员有意识地进行选择至关重要。做出选择的一些合理标准:

  • 存储库有多流行?查找GitHub星号和fork数量。
  • 框架得到维护吗?检查在过去两周中完成了多少次提交。另外,请阅读作者的注释以及未解决和未解决的问题计数。
  • 文档的状态如何?这一点特别重要,可以添加或更改团队成员,但是您的软件代码库需要清楚。
  • 开发人员对特定框架的了解程度如何?

在撰写本文时,Redux是迄今为止最受欢迎的。 Flux的作者也对此进行了评论,他们同意这是出色的工作。该文档非常出色,作者提供了30个免费的简短视频教程课程。框架本身非常简单,并且大多数与函数式编程范例保持一致。

Alt.js社区也很活跃,在许多文章中都得到了高度评​​价,并拥有出色的文档。 Alt.js也是纯Flux实现。放弃了其他几种实现,以支持上述两个实现。

这是Redux的作者Dan Abramov撰写的有关不同Flux实现的文章

问:什么是单向数据流?它带来什么好处?

单向数据流构成了对应用程序状态的所有更改都以相同的通用方式完成。在Flux实现以及Redux中,该流程遵循类似的模式。该模式从一个动作开始,该动作由商店调度和处理,并具有更新状态的作用,而更新状态又导致视图的更新。

通过遵循这种模式,使用Flux或Redux来控制其状态的应用程序是可以预测和规范化的。每个状态版本都是调用一组操作的结果。这意味着现在可以通过监视调度了哪些操作来更轻松地重现每个用户的体验。一个有用的例子是 有关在Auth0上使用Flux记录和重播用户操作的文章.

调试时也非常有帮助。实际上,受Flux启发的最流行的框架之一Redux是作为创建一组依赖于Flux概念的新开发人员工具的副作用而创建的。有一个演讲,叫做 Dan Abramov撰写的“随时间旅行进行热装”.

一般而言,有许多编程方法以及软件工程方法。编程范例的差异远远超出样式。最近,有很多提到JavaScript中的函数式编程。有许多优势正在等待寻求拥抱它的开发人员。

问:解释功能编程范例。

函数式编程是一个范式,它强调:

  • 编写纯函数。
  • 没有全局状态。
  • 不变异数据。
  • 具有高阶函数的合成。

纯函数不会产生副作用,并且是幂等的,这意味着当给定相同的参数时,它们总是返回相同的值。

依赖函数式编程的程序有两个主要优点。它们易于理解,也易于测试。相比之下,将变量分配给全局范围,依赖事件和变异数据使应用程序很容易变得混乱。从JavaScript开发人员的角度来看,我什至会说,以难以理解且容易出错的代码结尾非常容易。

的JavaScript不是严格的功能语言。但是,由于函数是一等公民,这意味着它们可以像其他类型一样被分配和传递,并且是可组合的,因此肯定有可能接受JavaScript开发人员的函数式编程。

最近有很多文章赞美这种风格。尽管如此,似乎最重要的还是新工具,它们很快变得非常流行。这些工具在不同程度上融合了关键的功能编程思想,包括Redux,React的最新更新以及Bacon.js等其他工具。

问:如何倾向于React中的函数式编程?

首先,编写React代码主要集中在编写好的JavaScript代码上。用JavaScript编写函数式编程的一般方法是保持一致的编程风格,重点是:

  • 编写纯函数。
  • 保持功能较小。
  • 始终返回值。
  • 组成函数(利用高阶函数)。
  • 永不变异数据。
  • 不产生副作用。

There are many tools in 的JavaScript which are suited for functional programming, among others: .map(), .reduce(), .filter(), .concat. There are also new ES6 features available, like native promises or the …spread operator.

此外,还有可用的短毛绒,例如 埃斯林特 特别是结合基于 爱彼迎 的JavaScript反应样式指南. There are also other tools, like immutable.js 和 code patterns like deepFreeze功能,这有助于防止数据变异,这在测试中特别有价值。

反应版本0.14引入了无状态功能组件,这是从面向对象编程向功能编程迈出的一步。这些组件最少,应尽可能使用。通常,React应用程序中的绝大多数组件都应该是呈现性的。

使用Redux是功能编程方向上的又一步。 Redux使用函数调用,这与依赖事件的Flux不同。所有Redux减速器也是纯函数。 Redux从不改变应用程序状态。相反,减速器始终返回新状态。

问:如何测试React应用程序?

最后但并非最不重要的一点是开发人员的测试方法。回归问题是沮丧的最终根源。除了使开发人员和客户确信应用程序能够按预期运行之外,这些测试还可以解决回归问题。

建立一个持续集成或部署环境已成为当今的标准,在该环境中,每个推送的提交都将自动进行测试,如果部署成功,则已成为标准。通过许多SaaS上的免费计划,设置起来非常容易。 代号 例如,具有良好的集成性和免费计划。另一个很好的例子是 特拉维斯CI 它提供了更加稳定和成熟的感觉,并且对开源项目是免费的。

还必须进行实际测试。测试通常是使用某些框架编写的。 脸书为React提供了一个测试框架,称为Jest,并基于流行的Jasmine。另一种行业标准和更灵活的标准是Mocha,通常与测试运行程序Karma结合使用。

反应提供了另一个超级功能,TestUtils。这些工具提供了完整的工具,专门用于测试组件。他们创建了一个抽象,而不是将组件插入到实际的页面中,从而允许使用单元测试来编译和测试组件。

要了解测试React应用程序的更多信息,请阅读我们的 博客。我也建议您观看以下资料 egghead.io,其中有一些针对React的系列,还有Flux和Redux,甚至是针对 测试React应用.

结论

反应为客户端应用程序带来了高性能,并使使用它的项目处于有利位置。该图书馆被广泛使用,并拥有一个充满活力的社区。通常,转向React,还需要包括其他工具来交付完整的应用程序。有时,它可能需要更一般的技术升级。

Web开发和移动应用程序开发(Android和iOS)的发展速度非常快。新工具越来越受欢迎,变得有价值,可以在几个月内使用。这些创新不仅包括工具,而且还涉及代码风格,应用程序结构以及系统体系结构。前端开发人员应构建可靠的软件并优化流程。最好的是胸襟开阔,并自信地说出合理的论点。 托塔尔 engineers 还能够领导敏捷开发团队,项目,开发过程,并引入新技术以使产品受益。

Featured 托塔尔 反应.js Publications

顶级React.js开发人员需求很高。

开始招聘