用户登录

我们可以先用 React 官方提供的 create-react-app 这个工具去创建一个 React 项目,它会给我们安装好项目需要的东西,还会给我们配置好开发项目用的环境 ..

打开命令行工具 .. Windows 用 cmder,可以新建一个 bash 类型的命令行窗口,mac 还有 linux 用户打开系统自带的终端 ..

先确定系统上已经安装好了 node.js,还有 yarn 这个工具 ... 然后我们用 npm 去安装一下 create-react-app ..

npm install create-react-app --global

创建项目

完成以再用这个工具去创建一个 React 项目 .. 先进入到某个地方 .. 比如我的桌面 .. 执行一下 create-react-app react-notes-example

这样 create-react-app 这个工具会去给我创建一个 react 项目,在项目里已经安装好了需要的所有的东西,比如 react,react-dom,react-scripts 之类的东西 ..

完成以后进入到项目的下面 .. cd react-notes-example

再启动一下项目 .. 执行 yarn start

这样会给我们创建一个本地服务器,并且会自动在浏览器上打开这个服务器的地址 .. 你会看到一个 react 项目的这个欢迎界面 ..

下面再用编辑器打开项目 ... 这里我用的是 atom 编辑器 ... 项目的主要的代码都在 src 这个目录的下面 ..

版本控制

再回到命令行 .. 可以先把 src 下面所有的东西删除掉 .. 我们会在后面从头开始创建一个 react 项目 ..

rm -rf src/*

在这个 src 的目录下面,再添加一个空白的文件 .. 名字是 .gitkeep .. 这样在做版本控制的时候,会保留这个 src 目录 .. 因为 git 不会保留完全空白的目录 ..

初始化一个仓库 ... git init ... git status 查看状态 ... git add . 添加所有的东西.. 再 commit 一下 .. git commit -m 'init'

再去给项目添加一个远程仓库 .. 可以在 github 这个网站上去创建一个远程仓库 ..

名字是 react-notes-example ... 一小段描述 ... React.js 应用案例 ..

创建这个仓库 ...

复制一下这个添加远程仓库的命令 ... 回到命令行 ... 在项目下面执行一下这行命令 ..

再把项目 push 到项目的远程 .. git push origin master

完成以后回到项目的远程 ... 刷新一下 ... 这样会有刚才我们创建的这个空白的 react 项目 .. 在课程里我对项目做的修改,以后都会 push 到这个远程仓库 ..

用 create-react-app 创建 React 项目《 React:应用案例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点