`
yangwei0915
  • 浏览: 465209 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

WebStorm创建和运行React项目

 
阅读更多

前提:

已经安装好node和webstorm

 

1.运行如下命令安装create-react-app命令

npm install -g create-react-app

2.在WebStorm中新建React App项目工程

3.点击Run,在运行设置中,Command中设置为run,stcrip中设置为run,如下图所示:



 

4.点击Run按钮,运行项目

5.如果在第三步的stcrip中设置为build,则是进行项目的构建,执行后会在项目中生成一个build目录,包含生成好的各种编译后的文件。如果要运行,需要将build中下面的目录或文件复制到盘符的根目录下,或者web server的根目录下,因为所有的文件引用都是基于根目录的绝对路径引用。

  • 大小: 54.4 KB
分享到:
评论

相关推荐

    ReactNative环境的配置和webstorm的使用

    7. **测试环境**: 运行`react-native run-android`检查是否可以成功创建和运行一个简单的React Native项目。 #### iOS版本 1. **安装Homebrew**: Homebrew是MacOS的包管理器,用于安装命令行工具。打开终端,输入`...

    react-webpack:构建react + webpack + es6环境

    这是一个建造webpack + react项目脚手架的简易教程,参照了的配置方式。每一个例子都有非常详细的建造步骤。 运行并启动项目 克隆项目到本地以后,选择要运行的示例进入到该项目路径下 安装: npm install 运行: ...

    webstorm_essentials_react

    3. **React组件**:`ComponentName.js`或`.jsx`文件,展示如何在WebStorm中创建和管理React组件。 4. **样例数据**:可能包含`mock`或`data`目录,用于模拟API响应,便于开发和测试。 5. **样式文件**:如`styles....

    Reacjs_Live_Template:用于 WebStorm 的 React 片段

    在 WebStorm 中,Live Templates 是一种功能,允许开发者创建和使用自定义的代码片段,只需输入缩写即可。例如,当你在编写 React 组件时,可能经常需要输入 "class"、"render"、"propTypes" 或 "state" 等关键字。...

    React Native的快捷设置

    在WebStorm中,你可以使用内置终端来运行React Native命令,如`react-native run-ios`或`react-native run-android`。只需在IDE底部点击“Terminal”标签,然后在输入框中输入命令即可。 7. **调试配置**: ...

    vuereact自动化创建单页面多页面应用项目调试项目打包的一体化cli工具

    针对标题"vue react自动化创建单页面多页面应用项目调试项目打包的一体化cli工具"以及描述,我们可以深入探讨这个CLI工具在Vue.js和React开发中的应用。 Vue.js和React都是当前非常流行的JavaScript框架,用于构建...

    Webstorm 10——最全文档教学安装包

    它由JetBrains公司开发,专为JavaScript、HTML5、CSS等Web技术提供强大的代码编辑、调试、版本控制和项目管理等功能。这个“Webstorm 10——最全文档教学安装包”是一个完整的教程资源,旨在帮助初学者和有经验的...

    react native 技术分享

    这会创建一个新的React Native项目,项目文件包括index.android.js和index.ios.js,分别对应Android和iOS平台的入口文件。在React Native版本更新至0.49以后,新的项目结构中已经不再区分index.android.js和index....

    WebStorm-2017.3.2

    在项目管理方面,WebStorm支持多种构建工具,如Grunt、Gulp和Webpack,可以方便地配置和运行构建任务。它还集成了任务管理工具如JIRA和GitHub,使得开发流程更加顺畅。同时,WebStorm具有强大的代码重构能力,可以...

    WebStorm11汉化包

    2. **项目管理**:支持创建、导入和管理多种类型的项目,包括Git、SVN等版本控制系统,便于团队协作和代码版本控制。 3. **调试工具**:内置强大的JavaScript调试器,可以设置断点、查看变量值、单步执行,有助于...

    WebStorm eslint 插件

    ESLint是Alex Casalboni创建的一个开源项目,它的目标是帮助开发者遵循一致的编码风格,并避免可能导致运行时错误的编码习惯。通过配置一系列规则,ESLint可以检查代码并提供实时反馈,帮助开发者提升代码质量。 在...

    WebStorm默认配置

    - **配置运行/调试**:在`Run/Debug Configurations`中,可以为不同的项目或脚本设置运行和调试配置,方便快速启动应用或测试。 7. **Git集成** - **设置Git**:在`Settings/Preferences > Version Control > ...

    webstorm 相关的设置

    4. **插件管理**:WebStorm允许安装和管理各种插件,如Vue.js、React、Angular等框架的支持,以及Git图形化界面等实用工具。在`Settings/Preferences` > `Plugins`中进行设置。 5. **语言与框架支持**:WebStorm对...

    reactnative初始工程

    在React Native中,"firstProject"可能是指你的第一个项目文件夹,里面包含了所有必要的文件和配置,用于运行一个简单的React Native应用。下面将详细介绍React Native的基础知识和"firstProject"可能包含的内容: ...

    react-native介绍

    React Native是一种由Facebook开发并开源的跨平台移动应用开发框架,它的主要特点是能够使用React和JavaScript编写出既具备原生应用体验,又具有Web开发灵活性的应用程序。React Native允许开发者编写一次代码,即可...

    强大的Web前端开发工具WebStorm

    此外,WebStorm还内置了对React、Angular、Vue.js等流行前端框架的智能感知,能帮助开发者快速理解和构建复杂的项目结构。 二、HTML5与CSS3编辑 WebStorm在HTML5和CSS3的编辑方面表现出色。它能自动完成HTML标签和...

    react-native移动端开发笔记1

    8. 学习React和React Native基础知识 掌握React Native开发,还需要对React的基本概念有深入理解,包括组件化、状态管理和生命周期方法。同时,学习如何使用Flexbox布局来设计UI,以及如何处理触摸事件等移动端特有...

    WebStorm安装配置方法图文教程

    三、使用WebStorm创建项目 WebStorm支持多种类型的项目创建,包括但不限于: 1. Empty Project:创建一个空白的项目,便于从零开始构建。 2. HTML5 Boilerplate:提供HTML5开发的基础模板,有助于快速搭建项目框架。...

    WebStorm2017.2.4汉化文件

    WebStorm是一款由...通过这些特性,WebStorm为Web开发者提供了一个高效、智能的开发环境,助力他们更好地完成项目开发。汉化后的WebStorm对于中文用户来说,更是如虎添翼,使得他们能够无障碍地利用其强大功能。

    webstorm课程练习final1.rar

    1. **项目管理**:学习如何在WebStorm中创建、导入和管理项目。了解如何设置项目的根目录,配置文件结构,并使用内置的文件浏览器进行文件和目录的操作。 2. **代码格式化与重构**:掌握使用WebStorm进行代码格式化...

Global site tag (gtag.js) - Google Analytics