支出很疯狂,入门教程

何以做 JS 开发很疯狂???

2016/06/08 · JavaScript
· 2 评论 ·
开发

本文由 伯乐在线 –
小谢
翻译,cotton
校稿。未经许可,禁止转发!
英文出处:sfioritto。欢迎出席翻译组。

Web开发时很有意思的~可是Javascript确是……令人生畏的。

Web开发中任何任何对您而言都是很粗略的,可是当你长远切磋Javascript的时候,就会有一种“芸芸众生皆醒你独醉”的觉得,好像你不了然其余人都通晓的片段重点的基础知识内容,并且那几个情节可以扶持你了解有所知识。

真实情况是,的确如此,你遗漏了一部分化解问题的关键部分。

与此同时,前端开发确实已经进入了疯狂的情形了。

不仅是你。

拉过一把椅子,坐下来。是到起来写Javascript应用的光阴了。

首先步是搭建本地开发条件并跑通它。那么是利用 Gulp?依然Grunt?等等,好……好像还有 NPM script!

WebPACK?依旧 Browserify? (羞涩的)Require.js?升级到
ES6?或者为你的花色增加 Babel 匡助?

BDD
仍然健康的单元测试?应该运用什么断言框架?从命令行运行测试明显很棒,所以
PhantomJS 也是不利的抉择?

Angular 还是 React?还是 Ember?再或者 Backbone?

您看了一些 React 文档,“Redux 是一种为 Javascript
应用提供的可预测状态的器皿。”酷毙了!你肯定必要中间的一个。

为什么构建 Javascript
应用会如此疯狂?!?

让我来报告您干吗那整个是那样疯狂。让我们从一个事例先河,后边会有上佳的图样。

这是 React 的“Hello, world!”应用。

JavaScript

// main.js var React = require(‘react’); var ReactDOM =
require(‘react-dom’); ReactDOM.render( <h1>Hello,
world!</h1>, document.getElementById(‘example’) );

1
2
3
4
5
6
7
8
// main.js
var React = require(‘react’);
var ReactDOM = require(‘react-dom’);
 
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘example’)
  );

Not quite done. 不止那么些。

Shell

$ npm install –save react react-dom babelify babel-preset-react $
browserify -t [ babelify –presets [ react ]支出很疯狂,入门教程。 ] main.js -o bundle.js

1
2
$ npm install –save react react-dom babelify babel-preset-react
$ browserify -t [ babelify –presets [ react ] ] main.js -o bundle.js

实在那里还缺了多少个步骤,例如设置
browserify,以及在您搞好未来还要让它运行在网页上,因为那事实上不会平昔暴发一个能有哪些内容的网页。
¯ (ツ)

在成就这几个之后,你最终还必要一个名为 bundle.js 的文件,那一个文件包罗新的
React Hello World 应用程序,这些顺序有 19374 行代码。而你只要求安装
browserify、babelify 和 react-dom
即可,它们会帮你生成恒河沙数行的您不精晓的代码,想想呢。

为此基本上是像下边那样的:

JavaScript

Marc was almost ready to implement his “hello world” React app
pic.twitter.com/ptdg4yteF1 — Thomas Fuchs (@thomasfuchs) March 12, 2016

1
2
3
Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1
— Thomas Fuchs (@thomasfuchs) March 12, 2016
 

好,上面就让我们用简短的 Javascipt 代码写一个 Hello World 应用。

亚洲必赢官网 ,XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”utf-8″ /> <meta name=”viewport”
content=”width=device-width” /> <title>Hello
World</title> </head> <body> <div
id=”container”></div> <script> document.body.onload =
function(){ var container = document.getElementById(“container”);
container.innerHTML = ‘<h1>”Hello, world!”</h1>’; }
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>
 
  <body>
    <div id="container"></div>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = ‘<h1>"Hello, world!"</h1>’;
     }
    </script>
  </body>
  </html>

那就成了。一共 18 行代码。你可以复制/粘贴到 index.html
文件中,双击把它加载到你的浏览器中。搞定。

这儿你一定会说:“等等,React
能做的事情比你碰巧写的这几个小玩意儿越来越多,并且你无法用那种格局写一个
Javascript
应用!”(大部分景观下)你是对的,但您还须要走一小步才能精通为何一切都疯了。

上边是我承诺过的图纸。

亚洲必赢官网 1

大部你付出的Javascript
web应用程序,会落在钟形曲线中部的某部地点。一定会在中等部分,假诺你从一个总体的
React 堆栈开头,那么从一开头你就过度设计了你的应用程序。

那就是干吗一切都变得疯狂。其中的绝大部分工具你觉得是你解决问题所不可不持有的,不过你直接从未碰到那样的题目,而且其后您永恒也不会赶上

一致张图片:

亚洲必赢官网 2

因为在默许情形下,每个人都过度设计他们的行使,他们却发现不到那或多或少,使得
Javascript 的支出情状变得过于繁冗。

你应当怎么启动 Javascript 应用程序呢?是或不是合宜运用部分近乎 React 或
Angular
的工具?是还是不是相应选择软件包管理器?假若你不那样做,你应有做什么?测试有必不可少吗?是还是不是合宜用
Javascript
生成标志?所有这个都是您应当好好问问自己的问题,在启动默许的天翻地覆的技能堆栈此前。

当您启动一个 Javascript
应用程序时,关键是要在钟形曲线上挑一个点,这么些点恰恰位于你认为那个应用最后可能会到达的复杂程度的眼前。

本人不会撒谎,验证那所有须要阅历。可是此地有一个正确的点可以让你启动大部分的
Javascript 应用程序:jQuery
加上客户端模板,以及用于连接和收缩产品文件超级简单的构建工具(假诺你的后端架构还尚无如此做的话)。

一旦你知道什么科学地构建 Javascript
应用程序,那么您就会起来通晓什么、哪天以及为啥使用框架或
npm/requir/webPack 或
ES6,什么日期编写测试,几时应该费心让你的测试本地运行,什么时候运行在浏览器中,所有这个问题都会搞定。

有趣味用你的 Javascript
开发文化互补那个空白?想要幸免不堪重负的感觉到?想要幸免在那一个开发进程中过度设计你的
Javascript
应用程序?那是自个儿下个月就要专注研讨的始末,所以,敬请期待,在一两周后会有越来越多干货到来!

打赏扶助我翻译越多好小说,谢谢!

打赏译者

JSFiddle

【编者按】本文小编为 Sean Fioritto,主要演讲了
JavaScript
开发为什么令人有些不可以下手的根本原因。小说系国内
ITOM
管理平台
OneAPM
编译突显。

【编者按】本文小编为 Sean Fioritto,主要解说了
JavaScript
开发为啥让人有些无法出手的根本原因。作品系国内
ITOM 管理平台
OneAPM
编译显示。

打赏协助我翻译更加多好文章,谢谢!

任选一种支付办法

亚洲必赢官网 3
亚洲必赢官网 4

3 赞 4 收藏 2
评论

始发 Hack React 的最简便易行的法门是用上面 JSFiddle 的Hello Worlds:

网络支出乐趣多多!Javascript 却……让人望而却步。

网络开支乐趣多多!Javascript 却……令人心惊胆战。

至于作者:小谢

亚洲必赢官网 5

懒懒的程序员~
个人主页 ·
我的篇章 ·
24 ·
 

亚洲必赢官网 6

React
JSFiddle

网页开发的别样具有东西都很匹配,唯独到了
Javascript,你会倍感好像比人家少了一大块基础知识,完全搞不懂它。

网页开发的别样兼具东西都很般配,唯独到了
Javascript,你会感觉到好像比外人少了一大块基础知识,完全搞不懂它。

React JSFiddle without
JSX

实际情况就是,没错,你的确缺了几块拼图。

真相就是,没错,你的确缺了几块拼图。

通过 npm 使用 React

不过,前端开发的现状其实也很疯狂。

然则,前端开发的现状其实也很疯狂。

我们指出在 React 中行使 CommonJS
模块系统,比如browserify或webpack。使用react和react-domnpm
包.

并不是唯有你感到抓狂。

拉把交椅坐下来。该写个 Javascript 应用了。

首先要搭建和运转本地环境。是用 Gulp,仍旧 Grunt,都不佳……仍然用 NPM
脚本吧!

Webpack 依然 Browserify?(不佳意思地)依旧 Require.js?要升高到 ES6
吗?在预处理中进入 Babel 是否太过了?

作为使得开发依旧健康的单元测试?应该拔取哪个种类断言框架?如果能从命令行运行测试当然是好事,那何不尝试
PhantomJS?

Angular 还是 React?Ember 呢?Backbone 怎么样?

些微 React 文档写道:“Redux 是 JavaScript
应用可预感的意况容器。”太棒了!你肯定须要来一个。

并不是唯有你倍感抓狂。

拉把交椅坐下来。该写个 Javascript 应用了。

首先要搭建和运转本地环境。是用 Gulp,照旧 Grunt,都不佳……如故用 NPM
脚本吧!

Webpack 如故 Browserify?(不好意思地)依然 Require.js?要提高到 ES6
吗?在预处理中投入 Babel 是否太过了?

行事使得开发照旧健康的单元测试?应该接纳哪一类断言框架?若是能从命令行运行测试当然是好事,那何不尝试
PhantomJS?

Angular 还是 React?Ember 呢?Backbone 怎么样?

些微 React 文档写道:“Redux 是 JavaScript
应用可预知的景色容器。”太棒了!你肯定须求来一个。

//
main.jsvarReact=require(‘react’);varReactDOM=require(‘react-dom’);ReactDOM.render(

干什么搭建 Javascript 应用会这么疯狂?!

让作者来帮你弄明白为啥那么些看起来都如此疯狂。首先看个例证,然后再看出色的图形。

以下是 React 的“Hello, world!”应用。

// main.js
var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

  );

这还没完。

$ npm install --save react react-dom babelify babel-preset-react

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

其实当中缺了多少个步骤,比如说设置
browserify,还有落成那一个之后还要做哪些,才能让它在网页上运行,因为唯有那几个并不可以生成一个实惠的网页。

成就那么些之后,会取得一个名为 bundle.js 的文件,里面就是新的 React Hello
World 应用,包罗 19374 行代码。接下来,只必要安装 browserify、 babelify
和 react-dom,然后衡量未知的许多条代码。

大抵就是这么……

近年来用为重的 Javascript 来写一个 hello world 应用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>

  <body>
    <div id="container"></div>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = '<h1>"Hello, world!"</h1>';
     }
    </script>
  </body>
  </html>

那就是全体内容。18行代码。你可以把它们复制、粘贴到一个叫 index.html
的文件,双击加载到你的浏览器。好了。

假定这时您对友好说:“不过,等一下,React
能做的可不断你刚刚写的那一点儿小东西,你不可以那么写
Javascript!”那话(大部分)是没错的,你快捷就会发觉怎么所有东西都这么疯狂了。

干什么搭建 Javascript 应用会这么疯狂?!

让作者来帮你弄通晓为啥这个看起来都如此疯狂。首先看个例子,然后再看精粹的图片。

以下是 React 的“Hello, world!”应用。

// main.js
var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

  );

那还没完。

$ npm install --save react react-dom babelify babel-preset-react

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

实际当中缺了多少个步骤,比如说设置
browserify,还有完毕这一个之后还要做什么,才能让它在网页上运行,因为唯有这一个并无法生成一个实用的网页。

做到那些之后,会博得一个名为 bundle.js 的文件,里面就是新的 React Hello
World 应用,包蕴 19374 行代码。接下来,只需求安装 browserify、 babelify
和 react-dom,然后衡量未知的累累条代码。

大抵就是这么……

现今用基本的 Javascript 来写一个 hello world 应用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>

  <body>
    <div id="container"></div>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = '<h1>"Hello, world!"</h1>';
     }
    </script>
  </body>
  </html>

那就是全体内容。18行代码。你可以把它们复制、粘贴到一个叫 index.html
的文书,双击加载到您的浏览器。好了。

假若那时候你对团结说:“不过,等一下,React
能做的可不止你刚才写的那一点儿小东西,你不能那么写
Javascript!”那话(大多数)是没错的,你飞速就会发觉怎么所有东西都这么疯狂了。

Hello,world!

,document.getElementById(‘example’));

要用 browserify 安装 React DOM 和构建你的包。

$npm install –save react react-dom babelify
babel-preset-react$browserify -t[babelify –presets[react]]main.js
-o bundle.js

要用 webpack 安装 React DOM 和构建你的包:

$npm install –save react react-dom babel-preset-react$webpack

注意:

一经您正在使用 ES2015, 你将要利用babel-preset-es2015包.

注意:默许情形下,React
将会在付出格局,很缓慢,不提出用于生产。要在生养情势下利用
React,设置环境变量NODE_ENV为production(使用 envify 或者 webpack’s
DefinePlugin)。例如:

newwebpack.DefinePlugin({“process.env”:{NODE_ENV:JSON.stringify(“production”)}});

永不 npm 的全速开头

假诺您现在还没准备要拔取npm,你可以下载那几个已经包蕴了预构建的 React 和
React DOM 拷贝的入门套件.

下载入门套件
15.3.1

在入门教程包的根目录,创造一个涵盖如下代码的helloworld.html。

Hello React!ReactDOM.render(

近期可以观察小编提到的图纸了。

亚洲必赢官网 7

为何说 JavaScript 开发很疯狂

你要成立的 Javascript
网页应用基本上都会出现在钟形曲线中间的某部地点。在中间地方,即使一发轫你用了
React 全栈,那么您的选拔从一发轫就大幅度地违反了设计标准。

那就是干吗所有东西都很疯狂。你认为你不可以不选用的工具大多数都是为着缓解近期未出现,或者永远都不会见世的问题

现今得以寓目小编提到的图纸了。

亚洲必赢官网 8

你要创制的 Javascript
网页应用基本上都会产出在钟形曲线中间的某个地点。在中等地点,若是一起始你用了
React 全栈,那么你的利用从一初步就大幅度地反其道而行之了设计标准。

那就是干什么所有东西都很疯狂。你以为你不可能不拔取的工具半数以上都是为着缓解近期未出现,或者永远都不会冒出的问题

Hello,world!

,document.getElementById(‘example’));

在 JavaScript 代码里写着 XML 格式的代码称为 JSX;可以去JSX
语法里读书更多JSX 相关的学识。为了把 JSX 转成标准的 JavaScript,大家用竹签,并引入
Babel
来成功在浏览器里的代码转换。在浏览器里打开那一个html,你应该可以看看成功的音讯!

暌违文件

您的 React JSX
代码文件可以写在别的的文本里。新建上面的src/helloworld.js。

ReactDOM.render(

再看一下那张图:

亚洲必赢官网 9

为何说 JavaScript 开发很疯狂

Javascript
开发现状令人无措又迷惑,因为所有人并不曾发现到,在默许状态下,他们的接纳已经背离了设计标准。

你该怎么初步搭建 Javascript 应用?你应有用 React 或 Angular
那样的工具吗?假设不用该怎么做?测试到底有没有必不可少?还要用 Javascript
生成标志吗?在上马搭建默许的高大技术堆栈此前,那几个都是您应该应对的题材。早先支付
Javascript
应用时,关键在于在钟形曲线上选用一个点,作为你的选用最后复杂程度的上限。

坦白说,要落到实处那或多或少内需阅历。但是仍然有过多 Javascript
应用可以借鉴的观点的:Jquery
加上客户端模板,还有一个卓殊不难的结构工具,用来连接和削减生产文件(倘使你的后台框架还不曾那项功用)。

借使您打探了哪些正确构造 Javascript
应用,你就会逐步精晓怎样、几时以及为啥要使用框架、npm、require、webpack

es6,曾几何时要写测试,曾几何时应该在该地测试,曾几何时应该在浏览器测试,以及其余会产出的题材和忙碌。

本文系
OneAPM
工程师编译显示。OneAPM
Browser
Insight
是一个根据实际用户的 Web
前端性能监控平台,能够帮大家一定网站性能瓶颈,网站加快效果可视化;援救浏览器、微信、App
浏览 HTML 和 HTML5 页面。想阅读越来越多技术作品,请访问 OneAPM
官方技术博客。

正文转自 OneAPM
官方博客

原文地址:
http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/

再看一下那张图:

亚洲必赢官网 10

Javascript
开发现状令人无措又迷惑,因为所有人并从未察觉到,在默认状态下,他们的使用已经违反了设计标准。

你该怎么发轫搭建 Javascript 应用?你应当用 React 或 Angular
这样的工具吗?即使不用该咋做?测试到底有没有必不可少?还要用 Javascript
生成标志吗?在起来搭建默许的庞然大物技术堆栈以前,那几个都是您应有应对的题材。开头支付
Javascript
应用时,关键在于在钟形曲线上摘取一个点,作为你的行使最后复杂程度的上限。

坦白说,要达成那或多或少索要经验。然则仍旧有恒河沙数 Javascript
应用可以借鉴的视角的:Jquery
加上客户端模板,还有一个分外简单的社团工具,用来连接和削减生产文件(假诺你的后台框架还没有这项作用)。

若果您了然了怎样正确构造 Javascript
应用,你就会逐年知道什么、曾几何时以及为什么要利用框架、npm、require、webpack

es6,曾几何时要写测试,哪天应该在本土测试,几时应该在浏览器测试,以及别的会并发的问题和分神。

本文系
OneAPM
工程师编译显示。OneAPM Browser
Insight
是一个根据实际用户的 Web
前者性能监控阳台,可以帮大家一定网站性能瓶颈,网站加快效果可视化;接济浏览器、微信、App
浏览 HTML 和 HTML5 页面。想阅读更多技术文章,请访问 OneAPM
官方技术博客。

正文转自 OneAPM 官方博客

原文地址:

Hello,world!

,document.getElementById(‘example’));

下一场在helloworld.html引用该公文:

留意一些浏览器(比如 Chrome )会在利用 HTTP 以外的磋商加载文件时败北。

离线转换

先安装Babel命令行工具(须求npm):

npm install –global babel-cli

npm install babel-preset-react

下一场把您的src/helloworld.js文件转成标准的 JavaScript:

babel –presets react src –watch –out-dir build

注意:

尽管你正在使用 ES2015, 你将索要利用babel-preset-es2015包.

build/helloworld.js会在您对文本进行修改时自动生成。 阅读Babel CLI
文档打听高级用法。

ReactDOM.render(React.createElement(‘h1′,null,’Hello,
world!’),document.getElementById(‘example’));

对待上边更新您的 HTML 代码

Hello React!

下一步

去看看入门教程和入门教程包examples目录下的任何例子学习越来越多。

咱俩还有一个社区开发者共建的 Wiki:workflows, UI-components, routing,
data management
etc.

恭喜你,欢迎来到 React 的社会风气。

网站地图xml地图