搭建一个react项目

搭建react整体框架

1、电脑里新建文件夹
2、npm create react-app 项目名称    如 npm create react-app huihuidemo / yarn create react-app huihuidemo
3、cd 项目名称    如 cd huihuidemo
4、npm run start
5、安装antd    cnpm i antd -S / yarn add antd
6、在css文件中最顶部引入  @import '~antd/dist/antd.css';   //分号不能丢
    (也可在js文件里直接引入,  import 'antd/dist/antd.css';  )
7、在js jsx文件中引入需要使用的组件   import {Button,Icon...} from 'antd';
8、(以后必要)安装路由和ajax请求插件   yarn add react-router-dom axios 

具体可见antd官网   https://ant.design/docs/react/use-with-create-react-app-cn
解决react脚手架不支持less的问题
1、安装less相关包    cnpm i less less-loader -S / yarn add less less-loader
2、暴露webpack    npm run eject / yarn eject   (此语句执行后会有config和scripts文件夹生成)
      若出现以下错误: (Remove untracked files, stash or commit any changes, and try again.)
      是因为我们使用脚手架创建一个项目的时候,自动给我们增加了一个.gitignore文件,而我们本地却没有文件仓库
      这样解决: 先输入  git add .      再输入  git commit -m 'up'
3、找到webpack.config.js的const cssRegex = /\.css$/; (第38行) 做出如下改动
    - const cssRegex = /\.css$/;
    + const cssRegex = /\.(css|less)$/;
4、找到webpack.config.js的const loaders ,在里面最后一组后面添加
    { loader: require.resolve('less-loader') },
添加之后是这样的:
const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {...
       },
      {...
      },
      {...
      },
      {
        loader: require.resolve('less-loader')
      },
    ].filter(Boolean);
5、大功告成

ps:若npm start失败,出现这个问题(Build fails after eject: Cannot find module '@babel/plugin-transform-react-jsx' )
则可以
1、删除 node_modules 文件夹
2、运行 yarn
3、cnpm i less less-loader -S / yarn add less less-loader
3、重新 npm start / yarn start

react项目文件层次架构

config
public
  |__static
       |__ueditor  //百度编辑器
scripts
src
|__api   //axios前后端交接
     |__config.js  //配置服务器地址
     |__index.js  //引入接口并暴露
     |__statecode.js  //错误提醒状态码模块
|__image
|__pages   //用于存放项目的各个模块页面
     |__usercenter  //用户中心模块
           |__userlogin.js
           |__userchange.js
           |__usercenter.less   //用户中心模块less
     |__order  //订单模块
           |__details.js
           |__userorder.js
           |__order.less
     |__page3
           |__page3-1.js
           |__page3-2.js
           |__page3.less
     |__index.js    //首页,路由一般在此页
     |__index.less   //首页的less
|__index.js
|__index.css
|__router.js  //路由部分

原文地址:https://www.cnblogs.com/huihuihero/p/10990394.html

时间: 2024-11-09 02:09:46

搭建一个react项目的相关文章

如何使用脚手架搭建一个react项目

1.准备工作: 首先要知道,搭建一个react项目总是需要安装node.js和npm的,未安装的请移步node.js官网:https://nodejs.org/en/ 检测是否安装成功:npm -v 和node -v 2.npm安装脚手架 执行命令npm install create-react-app 3.使用npx和脚手架创建项目my_app,这个过程可能需要几分钟,请耐心等待 npx create-react-app my_app 这里用到了npx,就是可以让你不用全局安装create-r

从零开始搭建一个react项目

如果只是想试试 React,那么建议使用 create-react-app来创建一个react项目.快速开始 因为 create-react-app 和 vue-cli 不一样,create-react-app将webpack的相关配置直接封装好了,所以自定制化程度不高,所以考虑手动构建一个 React项目 代码下载 准备工作 安装node环境. 配置cnpm(看个人需求). 准备一个空的文件夹react-demo. 初始化工程 从这里开始新建一个react工程 1. 初始化工程目录 1 cd

如何架构一个 React 项目?

编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有多种.我相信,根据你的实际情况对架构进行演进,要远比坚持一些条条框框的教条更好.接下来我将会介绍一些基础的方法以资您思考. 将所有的东西都放在一个文件中 最简单的项目可以被放到一个文件之中.而这就是我所选择的用来处理我的Webpack 配置的方法.这种方法最大的好处就是所有你需要的东西都在这一个文件

vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可.本文用Vue-cli从零开始搭建一个Vue项目. 准备工作 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可

个人搭建的React项目之React音乐播放器

该项目是本人自使用react框架以来制作的较大的项目,目前该项目放在github上,感兴趣的朋友可以去看看一下,觉得还行的话可以给个star,哈哈 地址:https://github.com/cocoxiaoyue/react-music-player 项目环境 运行 1.该项目是基于node环境,通过create-react-app搭建的react项目,所以该项目应在装有node的机器上运行. 2.该项目运用的是网易云音乐接口,所以应该下载网易云音乐接口项目https://github.com

完整搭建一个vue项目

目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node -v npm -v 2.为了提高下载效率,可以使用淘宝镜像 # 淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org # 检查是否安装成功 cnpm -v 3.安装webpack打包工具 webpack中文文档 npm

从头搭建一个React应用

node,webpack这些就不一一介绍怎么安装了,默认大家都知道. 一.npm install -g create-react-app 首先全局安装react的脚手架工具 create-react-app 上面提示,npm有新版本了,哎,先不管. 二.新建一个react项目 哦吼,华丽地报错了,先不要慌,我们看到报错信息是 cb() never called!  This is an error with npm itself. 好吧,大概知道了是npm的问题,应该是版本问题?那么,来更新一下

创建第一个react项目

由于新项目的缘故,接触了一下React这个 Javascript 库.下面我就简单的总结一下经验以及遇到的一些问题,希望能够帮到需要的朋友. 一.安装 Node.js. 以下是我百度云盘的分享. https://pan.baidu.com/s/1ftU3mn2jN9bnOGevMdcrDg     提取码:wow3 二.安装cnpm cmd命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 三.安装yarn cmd命

简单搭建一个SSM项目

简单搭建一个用户管理的SSM项目框架,虽然也能用servlet+jdbc搭建更简单的,不过个人感觉工作中更多用的ssm框架项目,这里就简单用ssm来搭建需要的项目吧. 准备工具:eclipse.jdk1.7.Mysql.maven.tomcat.(请先确定计算机本身已安装好前面几个工具,myeclipse自动集成maven,eclipse需要自己先配置,具体配置请自行百度) 这里先把项目的目录结构显示下 好的,现在开始 File->new->other->maven project Ne