您的位置:澳门新葡8455最新网站 > Web前端 > 支出很疯狂,入门教程

支出很疯狂,入门教程

发布时间:2019-12-02 18:02编辑:Web前端浏览(141)

    为何做 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 应用程序,这些程序有 一九三九4 行代码。而你只要求设置 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

    打赏援助自身翻译越多好小说,谢谢!

    任选黄金年代种支付格局

    图片 3 图片 4

    3 赞 4 收藏 2 评论

    开头 Hack React 的最简便易行的措施是用上面 JSFiddle 的Hello Worlds:

    至于笔者:小谢

    图片 5

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

    图片 6

    React JSFiddle

    React JSFiddle without JSX

    通过 npm 使用 React

    大家提议在 React 中央银行使 CommonJS 模块系统,比方browserify或webpack。使用react和react-domnpm 包.

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

    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

    注意:

    意气风发经您正在利用 ES二零一四, 你将在利用babel-preset-es二零一四包.

    注意:暗中认可意况下,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(

    Hello,world!

    ,document.getElementById('example'));

    在 JavaScript 代码里写着 XML 格式的代码称为 JSX;能够去JSX 语法里学习越来越多JSX 相关的文化。为了把 JSX 转成规范的 JavaScript,我们用竹签,并引入贝布el 来成功在浏览器里的代码转变。在浏览器里展开那个html,你应该能够看出成功的新闻!

    分开文件

    你的 React JSX 代码文件能够写在别的的文书里。新建下边包车型地铁src/helloworld.js。

    ReactDOM.render(

    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

    注意:

    尽管你正在使用 ES二〇一五, 你将索要利用babel-preset-es二〇一五包.

    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 的社会风气。

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:支出很疯狂,入门教程

    关键词:

上一篇:教你用 HTML5 制作Flappy Bird(上)

下一篇:没有了