react项目_保证一看就会 | 手把手教你创建一个React项目
一、如何使用 git 在 GitHub 上创建一个项目
- 新建一个项目
首先,在github上注册自己的账号,然后登录后,可以看到如下界面,是你的主页。点击右边的➕号,选择第一个选项
- 填写项目信息
此时我们正在创建一个项目。转跳到如下页面:
红色标注说明:
- 项目名称
- 项目描述
- 公有还是私有。即是否给别人看
- 是否创建md文件说明
- 用户忽略一部分文件的文件
- 是否添加开源证书
- github项目创建完成,界面如下:
- 点击如上的绿色按钮,有如下标红内容,点击右边的圆圈,复制链接。
备注:如果你不想用Clone with HTTPS出来的这个链接,可以选择切换Use SSH。个人感觉:使用上感觉没啥区别,只是走得协议不一样。
到了此步,线上就创建好了一个项目仓库。接下来将其和本地同步(即和我们自己的电脑)
二、本地电脑中,先创建一个React项目
//1. 创建后端,通过express $ mkdir be$ cd be($ npx express -e)无效的话,如下做:$ npm init$ npm install express --no-save//2. 创建前端react项目$ mkdir fe$ cd fe//react项目快速搭建($ npx create-react-app my-app同下效果)$ npx create-react-app .$ cd my-app$ npm start
小Tips:一开始表姐是自己安装官网搭建,一开始用的npm,但是太慢,切换了淘宝源。然后发现用npx可以将各种安装依赖只在项目中临时创建,于是就改用了这个。后面发现还是yarn最快。
三、将本地文件和远程仓库同步
//1.从工作区提交暂存区 $ git add . 提交所有改动的文件//备注: 第一次使用时会提示输入以下内容:$ git config --global user.email "you@example.com"$ git config --global user.name "Your Name"//2.暂存区到本地服务器$ git commit -m "提交的注释" 暂存区到本地服务器接着弹出填写:git账号和密码//3.提交远程服务(本地连接远程)$ git push origin master:提交远程服务(origin:远程服务器名称 master:主分支)如果是主分支,只要git push就可以了或者(//本地同步远程$ git remote add origin url$ git pull origin 分支名 --allow-unrelated-histories)//查看是否连接成功$ git remote -v//4.更新(拉取下来)$ git pull origin master : 更新//5.上传代码$ git push --set-upstream origin master之后再重复上面1.2.3步
另:附上git常用命令
Git 本地操作//1.如何将远程仓库和本地进行相关的联系Clone with https:每次提交远程服务器都需要用户名和密码--不常用Clone with ssh:配置私钥(本地)和公钥(配置给githup)//2.克隆代码到本地$ git clone 仓库的url---第一次//3.查看状态:$ git status 对比本地和本地服务器的区别//4.创建分支Git branch 分支名称 创建分支Git checkout 分支名称 切换分支Git branch 查看分支//5.Git commit -am “提交的注释” === git add . git commit -m ””//6.版本:$ git tag v1.0$ git push origin v1.0//7.协作://8.提交日志 $ git log //9.$ git rm与$ git rm --cached//10.当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用$ git rm file_path$ git commit -m 'delete somefile' $ git push//.gitignore:忽略提交文件,忽略环境配置。
四、我的整个项目结构
src下新建文件夹- pages- components- assets - actions,及下面还要新建一个api文件夹(因为表姐后面的数据请求写在的axtions里的)- router- utils- actions- reducers- store- hoc- context- server
五、配置组件库Ant Desigin
//安装$ yarn add antd
其他:参考官网中的按需配置,表姐认为很详细了。
六、配置路径别名
npm中找customize-cra第三方包,找到其中的别名Alias,按照说明修改config-overrides.js 文件。
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');const path = require("path") //引入path模块module.exports = override( fixBabelImports('antd', { libraryDirectory: 'es', style: 'css', }), addWebpackAlias({ //别名:绝对路径(要写绝对路径,就要用到path模块,在上面引入) "@": path.join(__dirname, "src") }),);
配置好了之后,重新启动项目
$ yarn start
使用时,如下:
import LayOut from "@/layout"; //如此使用路径别名
七、配反向代理
- src目录下新建setupProxy.js文件
- 安装方向代理插件
$ yarn add http-proxy-middleware -D
- setupProxy.js内配置如下:
const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:3000', changeOrigin: true, })} //小tips:最后$ yarn add运行,启动没问题就OK。
这样,一个react项目就创建好了。接下来就是写我们自己的项目代码了哦。下一篇我会继续为大家分享我的登录注册拦截及项目效果。如果喜欢这篇文章,关注我的头条号@职场大表姐,我会继续为大家分享更多相关内容。如果你有什么想法,可以留言告诉我哦^_^
#职场众生相##职场达人说#
react项目_保证一看就会 | 手把手教你创建一个React项目相关推荐
- 手把手教你新建一个winform项目(史上最全)
文章目录 前言: 第1步.打开Microsoft Visual Studio(简称vs),本人这里使用的是Visual Studio 2017 专业版,如下图: 1.2 Visual Studio C ...
- 卷积神经网络训练准确率突然下降_详解卷积神经网络:手把手教你训练一个新项目...
作者:Tirmidzi Aflahi 原文链接:https://thedatamage.com/convolutional-neural-network-explained/Tirmidzi Afla ...
- npm 卸载_手把手教你创建一个NPM包
前言 在前端,基于NodeJs的工程化开发已经是一个很成熟的解决方案,而工程化的构建又离不开诸多便捷又高效的可复用的NPM包,那么这些包是如何制作.发布的呢?今天我们就来研究一下这个问题. ...
- 手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)
一篇博客带你实现一个真正的项目! 先来看看它是什么样式的: 目录: 1.大体步骤
- 手把手教你做关键词匹配项目(搜索引擎)---- 第九天
第九天 回顾: 8. 手把手教你做关键词匹配项目(搜索引擎)---- 第八天 7. 手把手教你做关键词匹配项目(搜索引擎)---- 第七天 6. 手把手教你做关键词匹配项目(搜索引擎)---- 第六天 ...
- 【electron】如何快速进行electron项目开发(包含了各种创建一个electron项目的方法)
文章目录 导读 开发环境 各种electron项目初始化方案 create-electron(推荐) 功能特征 安装 vue-cli + electron-vue 使用说明 fork的优质代码 克隆g ...
- Extjs6 --- 学习笔记(1)创建一个新项目
原公司使用的前端框架是Extjs,于是系统学习了Extjs的4和6.旧东家的项目主要为后台管理系统,因此对前端界面UI的要求并不高,侧重于数据的展示与处理 ,刚开始使用的是Extjs4,后升级成6. ...
- 如何创建一个 react 项目及如何运行?
如何创建一个 react 项目及如何运行? 一.安装 create-react-app 二.检测 create-react-app 是否安装成功 三.创建 react 项目 四.运行 react 项目 ...
- 如何创建一个React项目(超简单)
1.安装Node.js(官网Node.js下载) 2.运行node -v和npm -v两条命令(检验是否下载成功Node.js) 3.npm install -g cnpm --registry=ht ...
最新文章
- centos6.5原生系统修改ceph-mon 的ELF来让其加载低版本glibc库函数
- 一篇文章全面了解监控知识体系--转
- 一个可供参考的Java高并发异步应用案例--转
- POJ3070 Fibonacci(矩阵快速幂)
- boost::function和boost:bind取代虚函数
- idea new对象后自动补全_IDEA的quot;奇淫巧技quot;
- python正则去除换行符,关于python:用于删除换行符的正则表达式
- And Then There Was One POJ - 3517(变形约瑟夫环+规律)
- OpenGL于MFC使用汇总(三)——离屏渲染
- 你在 或者不在 需要逻辑回归来算 | 协和八
- 湾区人工智能私密圈|湾区AI精英汇
- linux双系统启动项grub,grub双系统启动顺序更改
- php中背景图怎么设置不重复,css 图像不重复怎么设置
- 如何优雅地编码文本中的位置信息?三种positioanl encoding方法简述
- 数据集的非均衡问题(imbalanced data)和应对方法
- 如何在Nature杂志上发表文章
- pyserial库是python语言用于,python的pyserial模块
- java applet介绍,applet java 介绍
- 数据库中,DDL,DQL,DML,DCL是什么意思?
- 【总结】手机图片预览插件photoswipe使用总结
热门文章
- 给定的 columnmapping 与源或目标中的任意列均不匹配_闻歌研究 | 图文自动匹配任务研究调研...
- 通信系统设计与python的书_腾讯十年Python开发老司机推荐的入门书籍,你确定不看吗?...
- 《UML中的六大关系》和《Eclipse中如何使用UML方便查看项目框架》
- php中finally不能用,php-什么时候以及为什么`finally`有用?
- python打包成exe_【Python】使用pyinstaller打包成exe文件时可以显示图片的方法
- java全面的计算器代码_Java实现计算器的代码
- cadence原理图封装pin名称重复_Cadence原理图库文件引脚名重复处理方法介绍
- 以太网接口保护方案设计图
- matlab 计算误码率,关于误码率的问题 急!!!!!
- php 错误记录_PHP中把错误日志保存在系统日志中(Windows系统)