为啥做 JS 开发很疯狂???

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 1
图片 2

3 赞 4 收藏 2
评论

React
JSFiddle

关于作者:小谢

图片 3

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

图片 4

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(

为啥做 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
应用!”(大多数情况下)你是对的,但你还需要走一小步才能理解为什么一切都疯了。

下面是我承诺过的图片。

图片 5

绝大多数你开发的Javascript
web应用程序,会落在钟形曲线中部的某个位置。一定会在中间部分,如果你从一个完整的
React 堆栈开始,那么从一开始你就过度设计了你的应用程序。

这就是为什么一切都变得疯狂。其中的大多数工具你觉得是你解决问题所必须具备的,但是你一直没有碰到这样的问题,而且以后你永远也不会碰到

同一张图片:

图片 6

因为在默认情况下,每个人都过度设计他们的应用,他们却意识不到这一点,使得
Javascript 的开发状态变得过于繁冗。

你应该如何启动 Javascript 应用程序呢?是否应该使用一些类似 React 或
Angular
的工具?是否应该使用软件包管理器?如果你不这样做,你应该做什么?测试有必要吗?是否应该用
Javascript
生成标志?所有这些都是你应该好好问问自己的问题,在启动默认的庞大的技术堆栈之前。

当你启动一个 Javascript
应用程序时,关键是要在钟形曲线上挑一个点,这个点刚好位于你认为这个应用最终可能会到达的复杂程度的前面。

我不会撒谎,验证这一切需要经验。但是这里有一个不错的点可以让你启动大多数的
Javascript 应用程序:jQuery
加上客户端模板,以及用于连接和缩减产品文件超级简单的构建工具(假如你的后端架构还没有这样做的话)。

如果你知道如何正确地构建 Javascript
应用程序,那么你就会开始懂得怎样、何时以及为什么使用框架或
npm/requir/webPack 或
ES6,什么时候编写测试,什么时候应该费心让你的测试本地运行,什么时候运行在浏览器中,所有这些问题都会搞定。

有兴趣用你的 Javascript
开发知识填补那些空白?想要避免不堪重负的感觉?想要避免在这个开发过程中过度设计你的
Javascript
应用程序?那是我下个月将要专注讨论的内容,所以,敬请期待,在一两周后会有更多干货到来!

打赏支持我翻译更多好文章,谢谢!


打赏译者

React JSFiddle without
JSX

Hello,world!

,document.getElementById(‘example’));

在 JavaScript 代码里写着 XML 格式的代码称为 JSX;可以去JSX
语法
里学习更多
JSX 相关的知识。为了把 JSX 转成标准的 JavaScript,我们用标签,并引入
Babel
来完成在浏览器里的代码转换。在浏览器里打开这个html,你应该可以看到成功的消息!

分离文件

你的 React JSX
代码文件可以写在另外的文件里。新建下面的src/helloworld.js。

ReactDOM.render(

开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds:

相关文章