zoukankan      html  css  js  c++  java
  • 003-代码补全,运行,调试

    一、代码补全

      IntelliJ IDEA为JavaScript代码中的React API和JSX提供代码补全。代码补全适用于React方法,特定于React的属性,HTML标记和组件名称,React事件,组件属性等。从React官方网站了解更多信息。

      要获得React方法和React特定属性的代码完成,您需要在项目中的某处存在react.js库文件。通常库已经在你的node_modules文件夹中。

      完成React方法,属性和事件 默认情况下,键入时会自动显示代码完成弹出窗口。例如:

        

      在JSX标签中,IntelliJ IDEA为特定于React的属性(如className或classID)和非DOM属性提供编码帮助,如key或ref,此外,自动完成也适用于在项目的CSS文件中定义的类的名称:

        

      所有React事件(如onClick或onChange)也可以使用花括号(= {})自动完成:

        

      代码补全也适用于大括号内的JavaScript表达式。这适用于您定义的所有方法和功能:

        

      代码补全HTML标签和组件名称 IntelliJ IDEA为您在JavaScript中或其他组件内部的方法内定义的HTML标记和组件名称提供代码完成:

        

      补全也适用于使用ES6样式语法的导入组件

         

      补全组件属性 IntelliJ IDEA为使用propTypes定义的组件属性提供代码完成并解析它们,以便您可以快速跳转或预览其定义:

        

       当您自动完成组件的名称时,IntelliJ IDEA将自动添加所有必需的属性。如果组件使用中缺少某些必需的属性,IntelliJ IDEA会提醒您。

    二、将HTML属性传输给JSX

      您使用类属性或事件处理程序复制一段HTML代码并将其粘贴到JSX中时,IntelliJ IDEA会自动用React特定的属性(className,onClick,onChange等)替换这些属性。

    三、运行和调试React应用程序

      开始构建新的React单页应用程序的建议方法是创建React应用程序。只有在这种情况下,您的开发环境才会预先配置为使用webpack和Babel。否则,您需要首先配置构建管道。

    3.1、要运行React应用程序,请执行以下操作之一:

      在npm tool window (View|tool window| npm)中,双击start任务【参看http://www.cnblogs.com/bjlhx/p/8967531.html】。感谢Webpack Hot Module Replacement,当开发服务器运行时,只要您更改任何源文件并保存更新,应用程序就会自动重新加载。

    3.2、调试React应用程序

      1》

      

      等待应用程序编译完成并且Webpack开发服务器准备就绪。在http:// localhost:3000 /上打开浏览器查看应用程序。

      复制正在运行应用程序的URL地址(默认情况下为http:// localhost:3000 /),创建调试配置时稍后需要此URL。

      2》创建一个新的JavaScript调试配置:选择Run |编辑配置“,单击,然后从列表中选择”JavaScript Debuging“。在run/debug配置:JavaScript调试对话框中,将保存的URL(http:// localhost:3000 /)粘贴到URL字段中。保存配置。

      3》在代码中设置断点并通过单击配置列表旁边的开始调试会话。

      4》当命中第一个断点时,切换到调试工具窗口并照常进行:逐步执行程序,停止并恢复程序执行,在暂停时检查它,探索调用堆栈和变量,设置监视,评估变量,查看实际的HTML DOM等。   

    更多详细参看:http://www.jetbrains.com/help/idea/react.html#react_code_completion

        

  • 相关阅读:
    hadoop中namenode发生故障的处理方法
    开启虚拟机所报的错误:VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the program, access all directories the program uses, and access all directories for temporary fil
    Hbase的安装与部署(集群版)
    分别用反射、编程接口的方式创建DataFrame
    用Mapreduce求共同好友
    SparkSteaming中直连与receiver两种方式的区别
    privot函数使用
    Ajax无刷新显示
    使用ScriptManager服务器控件前后台数据交互
    数据库知识
  • 原文地址:https://www.cnblogs.com/bjlhx/p/8968425.html
Copyright © 2011-2022 走看看