react

前言 首先这篇文章是写给Vue新手的，老司机基本不用看了。 当我们刚接触vue的时候，特别是对于第一次用前端框架的同学来说，心情可以说是比较激动的，框架带来的种种新体验，是以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后，我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了。 下面我主要总结三个和生产发布相关的问题：资源文件发布文件夹配置，图片文件的引用，以及后台接口调试方法。 一，资源文件发布配置 一般项目都是用vue-cli脚手架搭建项目，然后编写自己的代码。vue-cli脚手架生成的配置，默认资源文件都在static文件夹下面，build发布的js和css文件也是在static文件夹下面，index.html文件则是和static形成相对路径关系。 而实际我们的生产发布环境中，页面文件和资源文件不一定在同一目录下，页面文件和js,css文件也不在同一目录下。 以php的Yii2环境为例，页面文件一般都放在views文件夹，页面访问路径可能是 “http://xxxx.com/index.php/sales-task/create ” 这样的url形式。而js,css,image等资源文件则需要放在web文件夹下，访问路径则是从根目录开始访问的。如果在web目录下新建static文件夹，访问路径是 “http://freelancer

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。 先来看两个组件: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props) { return <h1>请先注册。</h1>; } 我们将创建一个 Greeting 组件，它会根据用户是否登录来显示其中之一： React 实例 function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />;

一、先说结论 我们可以把学习路线比作游戏中的段位上分，在不同的分段都有自己的定位和要锻炼的事情： 青铜 - 从零开始小学生：怀着满腔的热血，看到了这一个行业的希望和未来，准备开始学习 Web 开发知识。 先通过 w3cschool 等免费学习资源把 HTML、CSS 和 JavaScript 的基本操作学会了 写一个简单的表白页面送给你的女/男朋友，展示一下自己努力的成果，如果没有就当我没说 2.白银 - 懵懵懂懂初学者：懂得如何使用 HTML、CSS 和 JavaScript 三大件来实现基本页面开发功能 选择一个可以覆盖多种场景、可以随自己意愿调整难度的项目尝试实现，如博客系统、记账本、Markdown 编辑器等 从 React 和 Vue 这两个框架中选择一个进行学习 3.黄金 - 轻车熟路新玩家：懂得使用框架来实现上面所举例项目 学习 Redux、Vuex 或者 MobX 等状态管理工具，并将他们使用到前面的项目中 思考状态管理工具为你的项目带来了什么好处 4.铂金 V - 初出茅庐新司机： 懂得如何使用脚手架创建项目，并且能将代码结构根据模块化的思想进行安排 学习 TypeScript，对前面的项目进行重写，注重对数据结构和类型的控制 学习 Node.js，试着配合数据库实现一个比博客系统更为复杂的 CMS（内容管理系统），如 图书馆管理系统、仓库管理系统 5.铂金 I

往期精选文章 ES6中一些超级好用的内置方法 浅谈web自适应 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全 WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架 干货：CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 小手一抖，资料全有。长按二维码关注 京程一灯 ，阅读更多技术文章和业界动态。 本文分享自微信公众号 - 前端先锋（jingchengyideng）。 如有侵权，请联系 support@oschina.cn 删除。 本文参与“ OSC源创计划 ”，欢迎正在阅读的你也加入，一起分享。 来源： oschina 链接： https://my.oschina.net/u/4581713/blog/4594725

前言 本文来自@晓风东东的投稿，相信webpack大家应该很熟悉了～～ 正文从这开始～ 记得我第一次上 webpack 官网的时候看了半天，最后总结是：这是个什么东西？！接下来的第二次第三次依然会有这种感觉，webpack 令人懵逼的文档对新手来说简直是噩梦。这篇文章针对 webpack 中令人疑惑的部分进行全面讲解，让你不再懵逼。 Webpack 是目前最火 React 和 Redux 打包工具，使用 Angular2 或者其他框架的人们可能也用了 Webpack 一段时间了。 当我第一次见到 Webpack 配置文件的时候，它看起来像火星文 来源： oschina 链接： https://my.oschina.net/u/4274700/blog/4840186

面试过不少前端从业者，简历写的平平淡淡，别人会的技能他也都会，看起来什么都掌握一些；有些会请过来当面聊一下，有些就直接拒绝了（如果是公司内要求独立完成项目的岗位，简历里放很多学习时候的DEMO项目，没有真实上线的项目，这种简历一般都会拒绝掉）。 当我们去一家公司面试，面试官有很大的主动权，面试官属于攻击方，求职者属于防守方，我们不可能什么方向都研究的非常深，所以扬长避短是最好的方式，推荐大家要做帐篷型的人，而不是水桶型的人；市场上岗位非常多，我们需要做的就是找到适合自己长处发展的那个职业！ 面试的时候一定不要和面试官硬刚，可以适度的夸大自己，但是一定不要以为自己技术牛，就疯狂装B；面试官非常希望找到和自己脾气相投的人一起共事，哪怕你真的是万里挑一的大牛，面试官感觉和你一起共事非常不舒服，那么拒绝你也不是什么太难的决定。 如果遇到自己期望薪资内的offer，一定不要犹豫，直接答应下来，但是入职的时间，可以稍微向后推一下，可以一个礼拜后，十天后等，这段时间再继续面试，这时候薪资就一定要找高于自己答应offer的薪资，如果期间遇到自己更加满意的offer，就在自己答应的offer里找一家自己最感兴趣的入职。 目录 HTML 面试题 CSS 面试题 JavaScript 面试题 网络通信面试题 jQuery 面试题 Vue.js 面试题 React.js 面试题 工具面试题 算法面试题

最近两年，在 互联网行业各大技术峰会 上，都能看到关于 工程效能 这个概念，从侧面也反映出了 研发效能 已经逐渐被各企业所重视！ 在以前，软件行业还处于野蛮发展时期时，互联网企业比拼的是家底，谁的家底雄厚，谁肯愿意烧钱，谁就能存活下来。而现在比拼的是什么？是研发能力，具体来讲就是从需求转化成软件或者服务的能力，这其中 研发效能的高低对于需求转化速率 起到了至关重要的作用。 在研发工作实践过程中，围绕提升研发效能，能尝试做的事，有很多很多。当然，我们今天分享的重点，并不是讨论关于什么是研发效能，而是，针对在实际实践如何提升研发效能过程中，分享两个非常有意思的工具。 1. 自动生成前端原型：Sketch2Code 我们知道，在做前端开发时，是先由产品人员确定好需求，再借助产品原型工具来实现产品GUI界面的设计，前端拿到原型再去开展具体的前端编码工作。 但是会发现即便市面上，已经有了类似 Axure 和 Modao 等原型工具，但是 画界面 的成本依然很高。这里介绍一种可以将图片GUI设计稿，甚至是 手画GUI设计稿转化成目标平台代码的一键自动化生成方案 。 直接上图： 在上面的例子中，先手绘GUI界面设计，然后通过 Sketch2Code 可以直接转换成目标平台的代码，如果你指定的目标平台是 Web ，那就直接生成 html ，如果你指定的目标平台是 iOS ，那就会生成 XCode

来源： Lara https://www.zcfy.cc/article/publishing-a-beta-or-alpha-version-to-npm 大多数软件在发布之前都有beta版 — 该版本包含某些还处于试验阶段的功能，尚未达到生产就绪状态。 常常会有一些beta测试用户群体，他们使用该版本，对其进行测试，提交bug和其他发现的问题。 开发NPM module也有相同的过程。那么我们如何通过NPM部署beta版本呢？ 如何部署 beta 版 实现新功能之后，我们首先要做的就是像常规发行版本那样，对版本进行修改。 在你的版本末尾添加 beta.0 非常重要。 .0 表示它是哪个版本。当我们对 beta 版进行修补发布新的 beta 版本时，我们会将 .0 递增到 .1 ，以此类推。 因此，我们的版本格式应如下所示：3.1.0-beta.0. 接下来，我们将继续提交所有的更改。 除提交以外，给beta版本添加git标签也是一个好习惯。可以通过命令 git tag 3.1.0-beta.0 添加一条标签。 你可以运行 npm version 3.1.0-beta.0来更新package.json，同时创建一个git标签 (请参考 https://docs.npmjs.com/cli/version). 现在可以发布 beta 版本了。 发布 beta 版或 alpha

最近重刷了一下React官方文档 关于表单的内容 ，在结尾处，官方讨论成熟的react社区表单库时 钦点 了Formik，引起了我的注意。 If you’re looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, Formik is one of the popular choices React官方钦点库，不学留着当寒假作业吗？ 通读了一遍 Formik 的官方文档 ，上手在项目中试用了一下，大喜！ —— ”这个表单库也太优秀了吧！“ 我个人认为优秀的第三方库需要符合四个标准，Formik都完美地满足了。 一，友好的文档 Formik 的官方文档 的友好程度简直让人惊喜。 首先是 overview 简要阐述了Formik作者的创作动机，基本的安装流程，还有 hello world的试玩环境（playground），以及几段基础的示例代码 但是更令我惊喜的是第二章 tutorial 。这一章，以创建一个完整且复杂的 新闻订阅注册表单 为例，一步步地“手把手”地教读者使用 Formik。由最基础的表单功能，到验证功能，到只追踪 修改过的项；接着，又以优化代码（减少样板代码）为由进一步介绍了

作者： lizheming 编辑：魔卡 原文地址： http://www.zcfy.cc/@lizheming ━━━━━ 令人欣慰，React 16 首个 beta 版已经发布，可以公开测试了！🎉 下面我来告诉大家如何使用以及新版的一些值得注意的地方。 如何使用 安装 由于还是 beta 版，常规的 NPM 安装命令仍然会使用 15.6 正式版。beta 版我们使用 next 标签发布在 NPM 上，你需要使用如下命令安装使用 beta 版： # Yarn yarn add react@next react-dom@next # NPM npm install --save react@next react-dom@next Javascript 环境要求 由于 React 16 依赖 新的数据集合类型 Map 和 Set ，所以我们不支持一些老浏览器和设备（例如 <IE11）。如果你要支持它们的话，最好为项目引入一个全局的 Polyfill，core-js 和 babel-polyfill 都是不错的选择。 下面是在 React 16 中使用 core-js 来支持老浏览器的示例： import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from