本地项目推送到GitHub及React/Webpage配置环境和实现热替换

一、Git实现本地项目推送GitHub

1.首先定义全局用户名和邮箱：

git config  –global user.name "***"
git config  –global user.email"***@**.**"

2.检查是否已生成密钥 cd ~/.ssh，ls如果有3个文件，则密钥已经生成，id_rsa.pub就是公钥；如果没有生成，那么通过 ssh-keygen -t rsa -C "yourEmail" 来生成。将公钥粘贴到GitHub。

cd ~/.ssh
ls
ssh-keygen -t rsa -C "yourEmail"

3.GitHub创建New repository。至此，可以copy SSH秘钥。

git remote add origin git@github.com:hana333/webStorm.git

这样就将本地项目关联到GitHub上了，可以正常执行pull,push项目的操作了。

 git add .    //保存
 git commit -m "some description"    //commit到本地
 git pull -u origin master   //拉取远端默认分支
 git push -u origin master  //推送到远端默认分支

二、react配置环境及webpack配置实现热替换

1.根目录下建一个webpack.dev.js，设置好入口出口文件等内容。

2.npm init,生成package.json,其中会显示你所安装的依赖，然后对应可以找出少了哪些你需要的依赖。

3.安装缺少的react包。

npm install --save react react-dom
npm install --save-dev webpack babel-cli babel-loader babel-preset-es2015 babel-preset-react

4.修改package.json里面的scripts：

“scripts”：{
   “dev”：“webpack --config webpack.dev.js” 
}

到这边，webpage和react的基本配置就完成了。如果想要实现热替换的话，接下来的步骤可以实现。

1.用webpage创建一个本地服务器。

npm webpack-dev-server html-webpack-plugin --save-dev

2.修改package.json里面的scripts：

“scripts”：{
   “dev”：“webpack-dev-server --config webpack.dev.js”
}

3.安装react-hot-loader：

npm install --save-dev react-hot-loader

4.更改webpack.dev.jsh和.babelrc的配置，这里主要是记录流程。具体变更内容就不贴出来了。

5.最后npm run dev就可以启动热替换了。

以上内容不是很完善，为了自己方便记忆和整理流程写的。如果有错误，敬请指出。

参考文档链接：

http://www.ruanyifeng.com/blog/2015/03/react.htm

https://github.com/varHarrie/YmxvZw/issues/14