react初步创建环境

今天来初步认识下react的搭建环境
在了解创建环境之前我们首先先了解react是是什么

• React 是 Facebook 在 2011 年开发的前端 JavaScript 库。
• 它遵循基于组件的方法，有助于构建可重用的UI组件。
• 它用于开发复杂和交互式的 Web 和移动 UI。

初步了解到react是什么之后我们可以开始创建一个react项目了

一、然而在创建react之前我们首先需要有一个git仓库,他能有效的帮助我们去完成小组开发,而我们需要做的是把react的项目搭建在git仓库里

——git仓库创建请参考下一章文章——

在此我们已经创建好一个git仓库并将文件上传到了网络仓库那么我们就可以开始在这个本地文件里随时进行更改并进行上传文件了

我们打开gitee的命令符 git bash 在此输入

npx create-react-app my-app

官方标准命令，my-app即为我们自己的项目名称也就是说my-app是可以替换成我们自己想要的项目文件夹名称

git仓库提交

下载完成之后切记要进行一次git仓库提交

cd scss-route-mobx  进入项目目录

然后我们在bash控制台进入我们下载的项目文件里

yarn eject  开启配置文件

在这个时候先不用着急开启项目,我们要使用上面这个命令来使基础配置开启,下载

yarn start   启动项目

到这一步了,那么恭喜你,这个时候我们开启项目,到这一步我们可以算是完成创建一个项目了

下载完成之后那么我们的第一步项目已经创建完毕,接下来我们开始后续的项目准备工作

二、完成sass安装

sass能有效帮助我们进行模块化开发,且使css文件看着更舒服

安装sass指令

yarn add node-sass-chokidar
yarn add npm-run-all

下载完毕sass之后我们还要打开src里的packge.json文件来修改一下

"scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive  --use-polling --polling-interval 1000",
        "start-js": "node scripts/start.js",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "node scripts/build.js",
        "build": "npm-run-all build-css build-js",
        "test": "node scripts/test.js --env=jsdom"
},

以上命令直接替换packge.json里的scripts部分即可

那么恭喜你已经获得了一个可以运行的项目

接下来我们可以进入react的实战了