1、在本地中创建一个项目所在的文件夹

2、npm -g create-react-app

3、在此文件夹下 create-react-app react-demo (项目名)

4、cd react-demo

5、npm start(等待一会浏览器自动开启)

6、开始噼里啪啦写你需要的代码

7、(重点)在package.json配置文件中加一句: “homepage”: “./” (为下面打包做准备,如果不加这句话,那么在预览时开启的页面空白,原因路径不对)

8、npm run build(打包)

9、在你的GitHub上新建个仓库,把地址复制下来备用

10、项目所在文件夹下git init

11、git add . (点的意思是所有文件,把所有文件添加上去)

12、git commit -m "xxxxxxxxxx"(提交信息)

13、git remote add origin https://github.com/xxx/xxx(刚才你在GitHub上保存的地址)

14、git pull origin master(上传之前先拉一下,第一次不拉也行,但是之后提交最好想成这个习惯)

15、git push -u origin master(把你的代码提到GitHub上)

16、此时,在GitHub对应的仓库上,就可以看到刚才提交的代码了。

  接着,点击“setting”;

  找到GitHub Pages,source中点击下面按钮切换到master branch,点击save;

  就可以看到一个链接了,点击链接,发现出现的是你项目中的README.md;

  在链接后面加上   /build/#    回车后,即可看到预览效果。

之后的修改代码后,重新npm run build ,重复11~15步骤即可。

create-react-app创建项目并用git上传至GitHub及展示预览效果的更多相关文章

  1. 如何把项目通过git上传之github完整教程

    作为一个有追求的程序员,需要撸点自己的开源项目,虽然我现在只是在学着造轮子,但这并不影响我成为大神的心.Github是基于git实现的代码托管,很多程序员在上面托管自己的开源项目,我使用Github也 ...

  2. C# asp:FileUpload上传文件使用JS实现预览效果

    js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...

  3. 用命令行在本地创建一个库并上传到Github

    1  如何在本地创建一个仓库并上传到github? 基本步骤: $ mkdir blog //在桌面上创建一个叫"blog"的目录 $ cd blog //"cd blo ...

  4. React项目打包并部署到 Github 展示预览效果

    React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...

  5. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  6. java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载

    java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...

  7. 【已采纳】新项目第一次怎么上传到github里面

      言归正传,最近学习了怎么将新创建的本地代码上传到github上,这里简单的记录一下,我喜欢使用命令行,这里全用命令行来实现,不了解git命令的可以去了解下. 第一步:建立git仓库 cd到你的本地 ...

  8. Windows下如何将一个文件夹通过Git上传到GitHub上(转)

    在通过windows系统的电脑上写代码,需要将项目上传到GitHub上去.比如在Pycharm上写Django后端,整个项目是一个文件夹的形式,那么怎么才能这个文件夹通过Git命令上传到GitHub上 ...

  9. Mac git 上传到 github

    上传本地项目到github 1.初始化本地项目 进入到你的项目,根目录下git init,会在你的项目的根目录下多出一个.git的文件夹,也许你的mac隐藏了,但是用命令行或者vscode等工具是可以 ...

随机推荐

  1. Android 开发 MaterialDialog框架的详解

    前言 开始之前还是需要废话一下,因为有一些坑需要告知.首先MaterialDialog在GitHub上作者已经转型使用100% Kotlin语言编写,虽然可以在Java里调用Kotlin使用.但是个人 ...

  2. efcore migration

    实体------->migration------->db ---------------------------------------------------------------- ...

  3. qt qextserialport __imp_SetupDiGetDeviceRegistryPropertyW

    使用 qextserialport 编写串口助手的时候,提示找不到 __imp_SetupDiGetDeviceRegistryPropertyW,经过摸索有以下两种解决方法: 第一种: 把相应的源文 ...

  4. [转]Python 的列表解析式,集合解析式,字典解析式

    Python 的列表解析式,集合解析式,字典解析式 这三种都是 python 里面的语法糖. 语法糖,Syntactic Sugar,就是为了写程序时候少出错,发明的一些简便的方法,但不影响这个语法的 ...

  5. IntelliJ IDEA神器使用技巧 慕课

    1,高效定位代码:无处不在的跳转. 项目之间的跳转(打开了多个窗口):ctrl+alt+] 或ctrl+alt+[ 查找窗口 shift+ctrl+a  输入recent file 最近打开的文件. ...

  6. 使用shell命令给文件中每一行的前面、后面添加字符

    shell command shell给一个文件中的每一行开头插入字符的方法:awk '{print "xxx"$0}' fileName shell给一个文件中的每一行结尾插入字 ...

  7. 用es5原生模仿-es6Promise异步处理

    用es5原生模仿-es6Promise异步处理,不过在处理异常的时候有点小bug不是很完美,不过多级then 是没问题的和resolve, rejec  正常调用和异常处理调用是没问题的.本帖属于原创 ...

  8. Servlet中response、request乱码问题解决

    Java Web(二) Servlet中response.request乱码问题解决   三月不减肥,五月徒伤悲,这就是我现在的状态,哈哈~ 健身.博客坚持. --WH 一.request请求参数出现 ...

  9. 最长公共前缀(python) leetcode答案

    直接上代码: def longestCommonPrefix(strs): """ :type strs: List[str] :rtype: str "&qu ...

  10. 拾遗----javascript一些实用方法

    1. join() join() 方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. var ids = [];                 for(var i = 0 ...