热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

react搭建项目

1.npminstallcreate-react-app-g2.create-react-appdemo (demo为项目名)3.cddemo  4.npminstall5.npm

1.npm install create-react-app -g
2.create-react-app demo  (demo为项目名)
3.cd demo   
4.npm install
5.npm start     //运行

 

public里面的文件:

    favicon.ico即为html的ico 图标,可以替换
    manifest.json,是app的配置文件,设置icons,首页路径等;

src文件夹:

    index.js 是入口文件
    App.js是最大的组件App
    registerserviceworker.js 用来做资源离线的缓存,registerServiceWorker注册的service worker 只在生产环境(正式环境)中生效。

常用命令

    npm start 启动项目,在 http://localhost:3000查看项目运行
    npm run build 项目打包,生成build文件夹
    npm run eject弹出配置文件,用于修改默认的配置,操作不可逆
    npm test --测试


安装Ant Design

  npm install antd --save  或者 cnpm install antd-mobile --save

  npm install react-app-rewired --save-dev
配置 package.json

  "scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
            "eject": "react-scripts eject"
        }

项目根目录创建一个 config-overrides.js 用于修改默认配置

  由于引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra,否则会出现问题。

  npm install customize-cra --save-dev

  npm install less-loader less --save-dev

  cnpm install --save-dev react-app-rewire-less

 

  const {
      override,
      fixBabelImports,
      addLessLoader,
    } = require("customize-cra");
 
 
   module.exports = override(
      fixBabelImports("import", {
         libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
     }),
     addLessLoader({
       JavascriptEnabled: true,
       modifyVars: { "@primary-color": "#1DA57A" }
     })
   )

如果启动报Cannot find package 'babel-plugin-import'错误,则说明axios所需的插件没有装上,需安装

  npm install axios qs --save

  npm install antd babel-plugin-import --save



推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 本文通过探讨React中Context的使用,解决了在多层级组件间传递状态的难题。我们将详细介绍Context的工作原理,并通过实际案例演示其在项目中的具体应用。 ... [详细]
  • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Node.js 入门指南(一)
    本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
  • Webpack中实现环境与代码的有效分离
    本文探讨了如何在Webpack中有效地区分开发与生产环境,并实现代码的合理分离,以提高项目的可维护性和加载性能。 ... [详细]
  • 利用 Jest 和 Supertest 实现接口测试的全面指南
    本文深入探讨了如何使用 Jest 和 Supertest 进行接口测试,通过实际案例详细解析了测试环境的搭建、测试用例的编写以及异步测试的处理方法。 ... [详细]
  • 了解如何快速搭建属于自己的个人博客,无需编程基础,适合Mac和Windows用户。通过本文,您将学会使用GitHub Pages和Hexo构建一个完全自主的在线空间。 ... [详细]
  • 使用 Angular CLI 快速构建 Web 前端项目
    本文详细介绍如何利用 Angular CLI 的常用命令来搭建和管理 Angular 项目,包括项目创建、依赖管理、组件生成等核心操作。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 前端开发中的代码注释实践与规范
    本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
author-avatar
longfeiPHP
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有