• 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

  • 相关阅读:
    svg手写标签
    使用node搭建本地服务器
    window电脑上设置鼠标触屏板的开关
    本地git如何与gitlab连接
    utools中的内网穿透下架,可使用natapp替代。
    移动端rem.js
    扫码登录开发者工具时,提示:调试过程中开发者可通过以下公众号获得你的相关信息。怎么取消这个公众号啊?
    实现图片的延迟加载
    Chrome 中安装 Vue 扩展程序
    VMWare虚拟机Bridged类型网卡ping不通的原因和解决办法
  • 原文地址:https://www.cnblogs.com/bjlhx/p/8968382.html
Copyright © 2020-2023  润新知