• ReactNewsApp介绍一个由React.js编写的新闻WebApp。 A news WebApp by React.js. 本应用仅供学习,请不要用于商业用途,供学习交流�� 因为技术有限,所以可能有好多不足,欢迎提建议哦��

    ReactNewsApp

    介绍

    一个由React.js编写的新闻WebApp。
    A news WebApp by React.js.
    本应用仅供学习,请不要用于商业用途,供学习交流��
    因为技术有限,所以可能有好多不足,欢迎提建议哦��
    �� 项目地址

    技术栈

    React.js组件化开发

    项目采用组件化的思想,把大的功能模块划分成一个个小的模块,便于团队合作和维护。

    react-router路由管理

    路由库React-Router,它是官方维护的,事实上也是唯一可选的路由库。它通过管理 URL,实现组件的切换和状态的变化,开发复杂的应用几乎肯定会用到,特别是SPA(单页应用)

    antd使页面更加美观

    Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。

    • 特性

    企业级金融产品的交互语言和视觉体系。

    丰富实用的 React UI 组件。

    基于 React 的组件化开发模式。

    背靠 npm 生态圈。

    基于 webpack 的调试构建方案,支持 ES6。

    开始

    本项目以慕课网视频为原型开发,大家可以发挥想象改进功能��

    下载下来之后,先安装依赖 npm install 或者 cnpm install,然后:

    npm run dev or npm run build

    预览

    PC端
    react-news by microzz.com

    手机端

    react-news by microzz.com

    �� 个人技术网站
    ��GitHub

    展开全文
  • 基于create-react-app手脚架创建的项目,使用React.js进行开发的App管理平台系统Web前端工程。 做了2年的Android开发,第一次使用react去折腾一个前端项目,如有做得不好的地方,还望纠正。 为什么做一个App管理...

    简介

    基于create-react-app手脚架创建的项目,使用React.js进行开发的App管理平台系统Web前端工程。

    做了2年的Android开发,第一次使用react去折腾一个前端项目,如有做得不好的地方,还望纠正。

    为什么做一个App管理平台系统?因为每次发布App的时候都是用公司N年前开发的一个发布系统,界面难看且落后。所以抽时间想自己也搞一个出来,折腾新的技术也是挺有趣的。

    为什么选择React?因为之前我用过纯React Native和干货集中营开放的API开发过一个App应用GankAndPanyz,所以还算是熟悉React的语法。

    第一次跨岗去尝试前后端分离,嗯!服务端代码也是自己来搞(使用的是Spring+SpringMVC+MyBatis)和MySQL数据库,虽然对一些原理还不是很深入,但是能把系统做了出来,收获还是挺大的。从移动端->前端->后端->全栈工程师,挺进!

    项目源码Github地址

    功能

    1. 登录功能
    2. 数据统计功能:App登录统计、App下载统计
    3. 项目管理功能:项目的添加、编辑、删除、整合了Android、iOS下载二维码
    4. App管理功能(Android、iOS):根据场景App分为正式环境和测试环境进行展示每个App的本地链接下载和二维码下载
    5. 版本发布功能:根据对应的手机系统上传安装包和相应的信息进行版本发布

    使用到的第三方框架

    • ant design of react:UI框架
    • react-router:路由框架
    • fetch: 网络请求框架
    • moment:日期处理框架
    • rechart:图表框架
    • qrcode.react 二维码框架
    • crypto-js:加密解密框架

    截图

    login

    datastatistics1

    datastatistics2

    projectlist

    appmanager

    version

    展开全文
  • 今天没事,准备利用react写一个后台管理系统,但是在刚创建项目引入antd的时候,就遇见了一个神坑!!! 再说坑之前,咱们先来说一下如何利用create-react-app搭建项目和引入antd 想利用create-react-app搭建基本...

    今天没事,准备利用react写一个后台管理系统,但是在刚创建项目引入antd的时候,就遇见了一个神坑!!!

    再说坑之前,咱们先来说一下如何利用create-react-app搭建项目和引入antd

    想利用create-react-app搭建基本项目,首先全局应该有这个工具

    cnpm i create-react-app -g
    

    在全局安装完之后,就可以利用create-react-app初始化项目了

    create-react-app admin('项目名')
    // 下完包后 进入admin目录
    cd admin
    // 然后就可以将项目跑起来
    yarn start
    

    这样我们就很顺利的完成了react的基本结构搭建

    接下来我们就可以在项目中配置antd

    1. 下载antd

      cnpm i antd -S
      
    2. 配置antd按需加载css 首先下载babel-plugin-import

      cnpm i babel-plugin-import -S
      
    3. 在创建.babelrc文件

      {
        "plugins": [
          ["import", { "libraryName": "antd", "style": "css" }] 
        ]
      }
      
    4. 最后在项目中引入antd组件

      import { Button } from 'antd';
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
      
    5. 当你们看到这的时候,你们会发现,这不正常操作么,没有什么坑啊,但是你会发现antd的样式没有起作用,????满脑子疑问,这里其实错的不是我们,也不是antd,而是这个脚手架,他默认是不使用.babelrc的

    6. 所以我们要将配置项暴露出来进行修改npm run eject
      在这里插入图片描述

    7. 此时这个报错,需要将代码利用git提交

      git add .
      git commit -m "init"
      
    8. 然后再重新npm run eject 此时应该没问题了

    9. 暴露出来之后找到config/webpack.config.js文件,将babelrc:false改为true
      在这里插入图片描述

    10. 还没有完,浏览器还会报错
      在这里插入图片描述

    11. 此时将package.json中的babel下面的 "presets": [ "react-app" ] 配置到 .babelrc中,并将package.json中的babel删除掉
      在这里插入图片描述
      此时大功告成
      在这里插入图片描述

    展开全文
  • 1.使用 npm install -g create-react-app 时,页面报错:如下:此时查看错误日志:大概意思猜测是npm的问题 就把命令改成cnpm install -g create-react-app,此时第一步可以顺利执行2. 输入create-react-app my-app...

    1.使用  npm install -g create-react-app 时,页面报错:如下:


    此时查看错误日志:


    大概意思猜测是npm的问题 就把命令改成cnpm install -g create-react-app,此时第一步可以顺利执行

    2. 输入create-react-app my-app,创建名为my-app的项目,如下图:


    又报之前的错了,原因是因为这个命令执行的时候,会安装一些包,但默认还是使用的npm,所以我们在安装了淘宝镜像cnpm之后,应再将cnpm设置为默认的安装方式,具体操作如下:

    安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org

    设置为默认:npm config set registry https://registry.npm.taobao.org,此时就可以正常使用了。

    展开全文
  • create-react-app 脚手架将配置文件全部都屏蔽了,让用户使用默认配置就能满足大部分需求,有点类似于“乔布斯”的设计理念; 在实际开发中,文件夹的目录嵌套比较深,文件夹也比较多,为了方便管理,就需要设置...

    文章参考

    1. react-app-rewired github

    问题描述

    create-react-app 脚手架将配置文件全部都屏蔽了,让用户使用默认配置就能满足大部分需求,有点类似于“乔布斯”的设计理念;
    在实际开发中,文件夹的目录嵌套比较深,文件夹也比较多,为了方便管理,就需要设置“绝对路径”

    使用 react-app-rewired插件解决

    1. 安装依赖库
    cnpm install react-app-rewired --save-dev
    
    1. 在项目的根目录创建config-overrides.js 文件
    const path = require('path')
    
    function resolve (dir) {
      return path.join(__dirname, '.', dir)
    }
    
    /* config-overrides.js */
    module.exports = function override(config, env) {
      //do stuff with the webpack config...
      // alias
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': resolve('src'),
        '@components': resolve('src/components'),
        '@page': resolve('src/page')
      };
      return config;
    }
    
    1. 修改启动脚本 package.json
      "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom",
        "eject": "react-scripts eject"
    }
    
    1. 启动工程,执行 “npm run start” 命令

    放出create-react-app默认配置,修改webpack配置文件

    1. 安装脚手架依赖库,执行 'npm run eject’命令,释放出默认配置
    2. 删除依赖库,执行’npm install’ 重新安装依赖库
    3. 修改工程名/config/webpack.config.js文件
    resolve: {
          alias: {
            'react-native': 'react-native-web',
            ...(isEnvProductionProfile && {
              'react-dom$': 'react-dom/profiling',
              'scheduler/tracing': 'scheduler/tracing-profiling',
            }),
            ...(modules.webpackAliases || {}),
            '@': path.resolve(__dirname, '../src'),
            '@components': path.resolve(__dirname, '../src/components'),
            '@pages': path.resolve(__dirname, '../src/pages')
          },
    }	  
    

    @components 代表的是 '工程名/src/components’目录
    @pages 代表的是 '工程名/src/pages’目录

    1. 重新执行’npm run start’命令,启动工程
    展开全文
  • 使用react-app-rewired启动react项目报错 报错内容如下: 关键报错内容: The “injectBabelPlugin” helper has been deprecated as of v2.0 翻译过来就是: 自2.0版起,“injectbabelplugin”助手已被弃 react-...
  • 1、create-react-app是什么? 做一个react项目,构建其开发环境对初学者来说是很困难的!所以,facebook专门出了create-react-app命令,用于react项目开发环境的构建! create-react-app是基于webpack+ES6创建的。...
  • React 脚手架 create-react-app 新版使用说明 重点是配置代理 近期更新了一下 create-react-app 工具,然后发现,和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版...
  • React - react-app-rewired

    2020-02-13 10:34:31
    react-app-rewired 与customize-cra 配合,用于 create-react-app 构建的项目中添加 Webpack 配置 yarn add customize-cra react-app-rewired --dev 更换 package.json 中的 script 命令 "scripts": { "start...
  • 一、问题: &nbsp;&nbsp;&nbsp;&nbsp;&...可以在项目文件夹按住shift点击右键就会看见:在此处打开PowerShell窗口,打开后输入命令creat-react-app my-app,因为我之前有安装...
  • 直接在目录下cmd然后create-react-app,报错 解决方法,以管理员身份运行cmd,再create-react-app,不报错了,但是依旧有问题: A template was not provided. This is likely because you're using an outdated...
  • Mac上安装create-react-app

    2019-05-06 18:40:13
    Mac上安装create-react-app,经常出现安装不上,这里说一下办法: 方法一: sudo npm install -g create-react-app create-react-app my-react cd my_code yarn start 方法二: yarn global add create-react-app ...
  • 前言:   一般我们开始创建react web应用程序的时候,要自己通过 npm 或者...现在 如果你正在搭建react运行环境,使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-script
  • 使用了 "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" }, 后报错信息如下: int...
  • 创建实例create-react-app时,需要执行指令: create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢。解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令...
  • react-create-app使用react-app-rewired在根目录下添加webpack配置文件 仅当个人学习笔记,如有错误欢迎大家指出 安装react-app-rewired与customize-cra $ npm install react-app-rewired customize-cra 2...
  • 1、npm install -g create-react-app 安装create-react-app create-react-app my-app 生成react程序2、npm run eject ...
  • create-react-app关闭eslint提醒(亲测)在create-react-app框架下的react项目中,定义变量,未使用会出现如下报错:解决方案:1: 运行npm run eject 注意:这是一个单向操作,一旦你使用eject,那么就不能恢复了 ...
  • 使用react官方文档推荐命令npx create-react-app my-app, // 全局安装 create-react-app npm install -g create-react-app // 使用create-react-app 安装文件`在这里插入代码片 create-react-app react-demo1 ...
  • create-react-app 全局安装create-react-app $ npm install -g create-react-app 如果不想全局安装,可以直接使用npx $ npx create-react-app your-app //也可以实现相同的效果 创建一个项目 $ create-react-app ...
1 2 3 4 5 ... 20
收藏数 73,287
精华内容 29,314
热门标签