• 学习完React Native抽时间来看看它的基础React,利用ATom来搭建Reactjs开发环境 atomgithub官方推出的编辑器atom-beautify插件atom-beautify用来格式化代码用的,在atom编辑器中打开’Settings’面板,可以通过...

    学习完React Native抽时间来看看它的基础React,利用ATom来搭建Reactjs开发环境

    atom

    github官方推出的编辑器

    atom-beautify插件

    atom-beautify用来格式化代码用的,在atom编辑器中打开’Settings’面板,可以通过快捷键Command+,来打开,打开后进入Install,在搜索框中输入atom-beautify,然后点击安装就行:

    atom-html-preview插件

    atom-html-preview用来实时展现html页面效果的,安装方式和上面一样。

    这里写图片描述

    配置快捷键

    在设置页面点击KeyBindings菜单,然后点击your keymap file进入设置快捷键界面:

    这里写图片描述
    这里写图片描述

    输入以下内容:

    'atom-text-editor':
      'ctrl-F12':'atom-html-preview:toggle'
    '.editor':
      'ctrl-alt-b': 'atom-beautify:beautify-editor'
    • atom-html-preview的快捷键是Ctrl+F12
    • atom-beautify的快捷键为ctrl-alt-b

    下载ReactJS

    ReactJS下载后解压,然后导入到项目中即可,重要的是以下几个文件:

    这里写图片描述

    Helloworld React

    这里写图片描述

    展开全文
  • ReactNative的Atom编辑器

    2015-11-30 08:15:28
    工欲善其事, 必先利其器. ReactNative作为Facebook贡献的库, 里面有些定制的东西. 官方推荐Atom+Nuclide, 那么就尝试一下Atom. 在测试过程中, 发现安装Nuclide之后, Atom编辑器特别卡顿, ... Atom-React插件Atom-Re

    工欲善其事, 必先利其器.
    ReactNative作为Facebook贡献的库, 里面有些定制的东西. 官方推荐Atom+Nuclide, 那么就尝试一下Atom. 在测试过程中, 发现安装Nuclide之后, Atom编辑器特别卡顿, 原因不明, 所以又测试了一些其他插件. 我来罗列几个必须的.

    1. Atom

    下载Atom编辑器, 安装, 介绍参考文档.

    2. Atom-React

    插件Atom-React, 这个插件非常好!
    点击Atom->Install Shell Commands, 安装Shell命令, 再输入

    apm install react

    即可安装, 也可以直接搜索安装, Command+,, 选择Install搜索.


    1. 语法高亮(Syntax Highlighting);
    2. 缩进(Indentation), 搜索插件 -> Auto Indent;

    搜索插件Command+Shift+P, 直接输入Intent, 参考视频.
  • 代码折叠(Code Folding);
  • 片段提示(Snippets);
    片段提示的缩写需要符合文件后缀名jsx, js等.
  • JSX格式化(JSX Reformatting), 插件搜索Reformat, 选择Reformat JSX.
  • HTML到JSX转换(HTML to JSX conversion), 转换代码样式;
  • 自动补全(Autocomplete);
  • 自动闭合标签(Automatic Closing Tag);
  • 3. 跳转

    跳转对于调试代码和阅读代码非常重要, 当然使用插件, 需要下载hyperclickjs-hyperclick, 就可以通过引用跳转到需要类和方法.

    跳转插件

    4. 注释插件

    注释对于写和读代码都非常重要, 推荐插件docblockr, 搜索即可.

    /**
     * 滚动条, fractionalPosition滚动条长度, progressBarSize当前大小
     * @param  {size:滚动条大小} {progress:过程}
     * @return {View}   [里外两层视图, 背景白框黑底, 显示白框]
     */

    5. 类型显示

    atom-typescript类型显示和其他强大的功能, 参考文档.

    6. 管理配置

    安装了很多包之后, 可以通过编辑器管理; 如果要恢复初始, 删除.atom即可.

    OK, 现在可以编写ReactNative程序了, 如果发现其他插件, 我会继续更新.
    Enjoy it.

    展开全文
  • atom-react-autocomplete–项目内,组件名及状态的自动补全 autocomplete-js-import–模块导入智能提示 emmet-jsx-css-modules– React内的Emmet补全,非单纯的expand【class => className 】!! language-...
    1. atom-react-autocomplete–项目内,组件名及状态的自动补全
    2. autocomplete-js-import–模块导入智能提示
    3. emmet-jsx-css-modules– React内的Emmet补全,非单纯的expand【class => className 】!!
    4. language-javascript-jsx – JavaScript, ES6, ES7, React JSX, Flow支持
    5. language-babel – 写React必不可少【atom内开发react的核心插件!】
    6. react-es6-snippets – es6写法的react snippet,挺实用
    7. react-snippets – 和上面的搭配“口味更加”哦!
    8. js-func-viewer– 新插件,但是很实用,可以查看函数的结构~~~~
    9. atom-react-native-autocomplete – RN的智能补全,react开发也能受用一部分,相当实用!智能提示非 autocomplete那种【类似静态语法分析器】
    10. autocomplete-modules – 模块智能提示【node_modules】

    转载于:https://www.cnblogs.com/shengulong/p/8425221.html

    展开全文
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处 ...开发工具Atom配置 首先必须说一点不是主atomReact的必选的开发工具,你可以使用 webstrom, sublime 等各种开发工具,由...

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    PS:转载请注明出处 作者:TigerChain 地址:http://www.jianshu.com/p/d5ddbb9f613a 本文出自TigerChain简书

    React系列教程

    正文

    开发工具Atom配置

    首先必须说一点不是主atom是React的必选的开发工具,你可以使用 webstrom, sublime 等各种开发工具,由于本人喜欢使用Atom所以使用Atom比较多。

    1、开发 React 的配置

    1、emmet

    使得输入html飞速提升

    2、file-icon

    让你的侧边栏显示对应后缀名的文件图片很漂亮

    3、language-babel

    babel 插件,让你的 react 显示指定颜色并且检证功能

    4、react-es6-snippets

    react 开发必选的插件,快捷键很牛b

    5、docblockr

    注释插件,自行体会

    6、autoclose-html

    闭合html标签

    2、其它插件

    1、pigments

    这款插件可以把 css 中的颜色以自身颜色高亮显示

    2、hyperclickjs-hyperclick

    可以跳转到指定的类或方法

    3、插件安装方法

    atom 插件安装有三种方法

    • 1、在 atom 编辑器中

    如图所示,打开 setting 中的 packages 选项,输入你需要的插件即可(前提是你要科学上网)

    • 2、使用命令行安装,第一种是图形界面安装 [最终还是调用命令安装的],第二种直接就是命令行安装了[前提也是要科学上网]。

    比如要安装 hyperclick 插件,打开命令行,输入以下内容即可

    apm install hyperclick
    复制代码
    • 3、手动安装 如果你没有科学上网的话,那么只能使用这一招了,也是以 hyperclick 插件为例。

    1、 打开 hyperclyck 的 github 地址,如果不知道话,我们可以在 atom 的插件页面搜索出来,真接就可以进入到 github 地址。如下图所示:

    2、进入到 atom 插件目录,并使用 git clone 源码,然后安装即可,以 mac 上为例子

    ### 以下分为三步 1、克隆源码 2、进入到源码目录 3、安装依赖
    cd ~/.atom/packages
    git clone https://github.com/facebooknuclide/hyperclick.git
    cd hyperclick
    npm install 
    复制代码

    通过以上步骤,我们就把插件安装好了。

    展开全文
  • 也可以关注CSDN博客的React Native分类 LeoMobileDeveloper 前言 工欲善其事,必先利其器 好像在哪听到一句话,”满级程序员不需要IDE,不需要自动补全,不需要静态语法检查”。对于这种言论,我只想说bullshit。...

    欢迎Follow我的Github,博客会同步在Github的Blog仓库更新。也可以关注CSDN博客的React Native分类


    前言

    工欲善其事,必先利其器

    好像在哪听到一句话,”满级程序员不需要IDE,不需要自动补全,不需要静态语法检查”。对于这种言论,我只想说bullshit

    IDE对于开发还是很重要的,而React Native开发官方推荐使用Atom+Nuclide插件。本文会详细的介绍,如何配置好这个环境,并且以一个示例工程为例,介绍如何利用这套环境进行开发,与运行,调试,断点

    使用Nuclide你能够

    • 配合flow进行静态语法检查,自动补全
    • 方便的debug
    • 进行版本控制,方便diff
    • iOS模拟器Log

    对了,为了从零开始,我卸载了之前安装好的atom和对应的插件


    Mac/Windows/Linux

    推荐还是用Mac开发React Native,因为iOS运行需要Mac的环境。而且,用Mac的话,也比较省心。

    本文的所有流程,均以Mac为例


    准备工作

    本文默认读者已经安装好了React Native,如果没有安装好,可以按照官网的讲解安装,很简单,本文侧重IDE

    注意,如果没有安装watchman 和Flow,建议安装

    安装watchman-自动监听文件内容变化,刷新数据

    brew install watchman

    如果提示没有安装brew

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    安装flow-提供静态语法检查,自动补全

    brew install flow

    如果你之前安装了flow或者watchman,建议更新到最新版本

    brew upgrade watchman
    brew upgrade flow

    安装Atom

    下载地址
    这个没什么难的,解压缩之后,把Atom从下载目录,拖到应用程序目录即可。
    打开Atom,你看到的界面应该是这样的


    安装Nuclide

    这里,我们在Atom中,用图形化界面来安装。

    点击菜单栏:Atom->Preferences,或者可以”Command+,”快捷打开

    然后,在Install Packets的输入框中,输入nuclide,出现的第一个就是我们想要安装的,点击install

    默认安装nuclide之后,会安装一大堆的依赖包,安装完成后

    可以看到,红色部分是额外的Toolbar可以快捷打开一些选项,小的红色框里多了一个nuclide选项。

    如果没有默认安装这些依赖包,可以选中,Packages->Settings View->Manage Packets

    然后,搜索nuclide,再nuclide package上双击,进入设置

    勾选Install recommended packets on startup

    退出Atom,再打开,会发现自动安装这些依赖包


    新建一个工程

    react-native init Demo --verbose

    然后,打开Atom,点击Add project folder

    再在右侧目录双击index.ios.js,你看到的应该是这样的界面


    自动补全

    我们在这一行上面,输入fun

    class Demo extends Component {

    会看到

    然后,会车,你就会发现自动生成了方法

    function functionName() {
    
    }

    自动补全肯定没有XCode 或者Android Studio来的那么强力,不过有总比没有好对吧。


    类型标注

    将光标放到上文提到的functionName上,你会发现如图,就是出现了这个方法的类型

    这时候,点击出现的针头,那么这个类型标注就会一直显示在界面上


    语法检查

    我们在function里随便输入

    function functionName() {
      a
    }

    然后,command+s保存文件,这时候,正常会出现如下检查错误
    这里写图片描述

    其中

    • 1,表示这一行有错误,点击那个红色的三角图标,你可以看到详细的错误描述
    • 2,表示整个工程的错误

    点击2,你会看到错误和警告的列表
    这里写图片描述

    如果这里,没有检查出错误

    打开终端,cd到工程的根目录,例如我的

    /Users/huangwenchen/Desktop/Demo

    然后,用终端检查flow能否正常工作

    Leo-2:Demo huangwenchen$ flow

    如果出现错误

    .flowconfig:97 Wrong version of Flow. The config specifies version ^0.25.0 but this is version 0.20.1
    Leo-2:Demo huangwenchen$ brew update flow

    证明你本地的flow版本和react native默认使用的flow版本不一致,通常,更新到最新版本即可

    Leo-2:Demo huangwenchen$ brew upgrade flow
    ==> Upgrading 1 outdated package, with result:
    flow 0.25.0
    ==> Upgrading flow
    ==> Downloading https://homebrew.bintray.com/bottles/flow-0.25.0.el_capitan.bottle.tar.gz
    ######################################################################## 100.0%
    ==> Pouring flow-0.25.0.el_capitan.bottle.tar.gz
    ==> Caveats

    跳转到方法或者类型定义

    使用command+鼠标左键


    在Nuclide运行项目

    第一步,运行react native packager

    点击 command + shift + p打开command palette(打开终端选项),然后输入

    react native start

    这里写图片描述

    然后,选择
    Nuclide React Native :Start packager

    如果,出现错误

    /Users/huangwenchen/Desktop/Demo/node_modules/react-native/local-cli/cli.js:123
    class CreateSuppressingTerminalAdapter extends TerminalAdapter {
    ^^^^^
    SyntaxError: Unexpected reserved word
        at exports.runInThisContext (vm.js:73:16)
        at Module._compile (module.js:443:25)
        at Object.Module._extensions..js (module.js:478:10)
        at Module.load (module.js:355:32)
        at Function.Module._load (module.js:310:12)
        at Function.Module.runMain (module.js:501:10)
        at startup (node.js:129:16)
        at node.js:814:3

    说明你node的版本太低,运行以下命令更新

    sudo npm cache clean -f
    sudo npm install -g n
    sudo n stable

    第二步,终端运行项目
    cd到项目目录,执行

    $ react-native run-ios
    $ react-native run-android

    在Nuclide中调试

    执行完上面一步后,你应该会看到这样的模拟器界面

    然后,在Nuclide中,点击 command + shift + p打开command palette(打开终端选项),输入react native debug

    接着,点击模拟器,Command+D,选择Enable Remote JS debugging

    这时候,你会看到,Nuclide中,加载了debug窗口


    添加断点

    和很多IDE一样,在每一行左边左键可以添加断点了
    这里写图片描述

    同时,修改代码看看效果

    function myLog() {
      console.log("adtad");
    }
    class Demo extends Component {
      render() {
        myLog();
          return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            ......

    保存,点击模拟器,Command+R,会发现,停在了断点处
    这里写图片描述

    其它的都是JS的调试技巧了,这里不再赘述,后面写博客的时候,遇到了再说。


    Element Inspector

    像网页调试,你可以再浏览器里动态修改网页的HTML代码,在React Native中调试你也可以
    Command + shift + p然后打开如下图
    这里写图片描述
    接着,你就会发现像HTML的Element Inspector出现了,你可以看到视图的布局和对应的属性

    这里写图片描述


    总结

    Facebook出品的一般都容易安装,并且使用起来上手相对容易。本文更多的是对英文文档的总结,以及列出了我在安装使用过程中遇到的一些坑,希望能有些帮助。

    展开全文
  • 工欲善其事, 必先利其器. ReactNative作为Facebook贡献的库, 里面有些定制的东西. 官方推荐Atom+Nuclide, 那么就尝试一下Atom. 在测试过程中, 发现安装...下载Atom编辑器, 安装, 介绍参考文档.2.Atom-React 插件Atom-
  • 使用Atom开发React,一些实用的插件: 安装: 点击右侧"install a package",出现左侧搜索框,输入要安装的插件名,点击"Packages"即可搜索插件 开发React 推荐安装如下插件: 1.atom-ternjs JS语法提示 ...
  • 开发工具Atom配置首先必须说一点不是主atomReact的必选的开发工具,你可以使用webstrom,sublime等各种开发工具,由于本人喜欢使用Atom所以使用Atom比较多。1、开发React配置 1、emmet 使得输入html飞速提升 2...
  • 接下来给大家讲解下React Native编辑器,这也是Fackbook官方推荐的一款编辑器Atom结合Nuclide插件进行React Native开发。当然Atom不仅是开发React Native的,主要是针对前端开发者使用的,如JS、CSS、HTML的编写等等...
  • 前面对React Native开发工具Atom做了一个详细的介绍,详见RN开发IDE详解。 Atom作为一款前端开发利器,有很多的插件供我们选择,这里罗列常见的可以提高我们开发效率的插件给大家介绍一下。ATOM常用插件1、...
  • atom + react.js

    2017-07-17 10:47:53
    在这个教程中我们会用类似 cmd-shift-P 的形式来运行命令,这是 Atom 在 Mac 上的默认快捷键,如果你在其他的平台上使用 Atom, 可能会稍有不同。如果某个快捷键无法工作,你可以通过命令面板来查找正确的快捷键。在 ...
  • React开发环境配置

    2016-12-21 17:34:22
    1、首先下载开发编辑器:Atom,下载址:https://atom.io/ 2、给编辑器安装插件:Atom... a、打开Atom编辑器,然后找到Settings, 在设置面板中找到最下面那个选项, 按照上述方法一次安装开发所需的三个插件,
  • JS/React 开发者的 Atom 终极配置 原文作者:Elad Ossadon 原文链接:The Ultimate Atom Editor Setup (+for JS/React) 根据多年以来不断完善 Sublime Text 配置的经验,决定这次给 Atom 也来一个大改造。这个过程...
  • 3:完成Atom的步骤后,去React官网下载React的压缩包,进行解压放在Atom的目录下,方便查找。 4:打开build文件夹,会有下载好的JS 文件 PS: 最重要的是箭头所指向的JS文件并不在压缩包里,所以要另外的找,进...
  • React基础入门 React基础入门 ReactDOM.render() JSX 组件 this.props.children PropTypes类型检查 defaultProps 设置默认值 Refs this.state this.props 传递当前全部的props到子组件 子组件更新父组件内容 ...
  • ATOM配置

    2018-07-05 20:37:18
    ATOM 最近发现了一款特别好用的markdown编辑器ATOM,所以前来分享。 Atom 是github专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页...
  • React路由与Apache配置

    2020-01-15 08:07:56
    我们知道,React是一个用来开发单页面的Javascript库。如果想让它实现多页面那样的功能,就需要用到路由。然而,路由是一个虚拟目录,并不是真实目录,页面挂载在Apache下必须进行重定向设置,否则会找到不对应的...
  • atom常用配置笔记

    2018-05-30 13:47:13
    #atom常用插件汇总##编码在游览器中查看插件```名称:open-in-browser使用快捷键:ctrl+shift+Q```##编码自动补全插件```名称:emmet使用快捷键:详情查阅博客文章 ...atom-beautify使用快捷键:ctrl+alt...
  • 主要讲述个人在使用Atom进行RN开发的过程中,使用过的比较优秀的插件,加快了开发的速度,特此分享,希望也能帮到你。
1 2 3 4 5 ... 20
收藏数 1,981
精华内容 792
热门标签