zoukankan      html  css  js  c++  java
  • 002-创建基本项目-新项目、空项目、已有项目

    一、创建基本项目

      您可以使用create-react-app软件包或创建一个空的IntelliJ IDEA项目并在其中安装React。create-react-app项目地址:https://github.com/facebookincubator/create-react-app

    1.1、使用create-react-app生成React应用程序【第一种】

      create React App是开始构建新的React单页应用程序的推荐方式。因此,您的开发环境已预先配置为使用webpack,Babel,ESLint和其他工具。详细了解如何安装React并从React官方网站创建React应用程序。

    1》全局安装create-react-app

      打开内置终端(View | Tool Windows | Terminal)并在命令提示符下键入npm install -g create-react-app。

    2》创建一个应用程序

      1》File→New→Project→New Project

      2》选择Static Web选项,选择React APP项目,

      3》指定项目名称和存储路径, 在Node Interpreterfield选择合适的nodejs版本

      4》在create-react-app字段中,指定create-react-app包的路径。

        注意:命名不能再包含大写字母

        

    创建成功后, 

      npm start
        Starts the development server.
    
      npm run build
        Bundles the app into static files for production.
    
      npm test
        Starts the test runner.
    
      npm run eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you can’t go back!
    
    We suggest that you begin by typing:
    
      cd test_react_app
      npm start
    
    Happy hacking!
    Done

    目录结构

      

      注意:要下载项目依赖关系,请执行以下操作之一:

        打开Terminal(View | Tool Windows | Terminal)并在命令提示符下键入npm install。

        在项目根目录中的package.json文件的上下文菜单中选择运行'npm install'。

    1.2、在空白的IntelliJ IDEA项目中安装React

      在这种情况下,您将不得不按照以下构建React应用程序中的描述来自行配置构建管道。详细了解如何将React添加到React官方网站的项目中。

    1》创建一个空的IntelliJ IDEA项目  

      1》File→New→Project→New Project

      2》选择Static Web选项,创建Static Web

      3》指定项目名称和存储路径【注意名称不能有大写字母】

    2》在空项目中安装React

      1》打开您将使用React的空白项目。

      2》打开Terminal (View | Tool Windows | Terminal) 使用: npm install --save react react-dom

    按照以上添加没有成功,此处添加了如下package.json

    {
      "name": "test2_react_app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-scripts": "1.1.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }

    3.3、从现有的React应用程序开始

      要继续开发现有的React应用程序,请在IntelliJ IDEA中打开它并下载所需的依赖项。

    1》打开机器中已有的应用程序源

      File→Open

      或者也可以从版本库中检出项目

    2》下载依赖

      在package.json上运行,npm install

  • 相关阅读:
    SQL中 decode()函数简介
    php中foreach()的用法
    swfuploadphp上传说明
    未知,等知道什么以后再改
    php上传文件处理
    smarty中的section和foreach
    asp.net 异常:"DataBinding: 'System.Data.DataRowView'
    自定义MembershipProvider配合Asp.net 2.0 Login控件(转的,忘记哪里的了)
    地理信息中各种坐标系区别和转换总结
    asp.net异常DataRowView The type or namespace name 'DataRowView' could not be found
  • 原文地址:https://www.cnblogs.com/bjlhx/p/8968382.html
Copyright © 2011-2022 走看看