什么是React
对于刚学习react的初学的者的我来说,其实是有点懵的,因为并不清楚react是什么?用来干什么?能给项目带来什么用?React官网地址: https://react.docschina.org/
其实对于一个初学者来说,官网写的会有点复杂化,但是也是可以借鉴学习的,可以先熟悉文档的内容之后再去看视频,视频的话我推荐上B站看,因为那里会比较全,大家都知道B站是一个学习的好地方。
react 项目搭建
今天主要是想给大家写一篇关于React项目从0到1的项目搭建,所以涉及其它知识点的话大家就去官网学习就可以了
准备工具:
- Visual Studio Code:下载地址:https://visual-studio-code.en.softonic.com/
- node:下载地址:https://nodejs.org/en/
-
git:下载地址:https://git-scm.com/
安装完node之后要去验证是否安装成功,打开cmd(Windows+r)进行输入:
,node -v
npm -v
出现版本号即为安装成功
这种就是已经存在版本好了的,就是安装成功了
React项目搭建什么是React - 全局安装:create -react-app:
npm install -g create-react-app
React项目搭建什么是React - 构建项目:
my-app是自己的项目名称,自己可以根据需求取相应的名称即可 ,当你下载完之后,最后面那里会有一些命令的,那些命令是用来运行项目的时候用npx create-react-app my-app
React项目搭建什么是React React项目搭建什么是React - 注意:当我们构建项目完成之后会有一些引藏的文件:
或Webpack
,可通过命令:Babel
npm run eject
来显示文件
但是此命令:
是不可逆的(意思就是输入之后显示出来 就不会再隐藏了的)如下图:npm run eject
项目已经搭建好了,现在我们需要创建自己的git仓库React项目搭建什么是React
创建Github仓库
为什么需要创建git仓库呢?这是因为git仓库是存放自己的代码的,你开发好的代码可以通过提交和推送到git仓库,
- Github:https://github.com/(免费)
- Coding: https://coding.net/(免费)
-
Gitlab: https://about.gitlab.com/ (免费30天)
创建一个属于自己的git仓库
注册
GitHub创建项目React项目搭建什么是React 创建git项目之后下面会有一些命令,初始化我们的仓库,通过GitHub进行输入下面的命令,按顺序操作,React项目搭建什么是React React项目搭建什么是React React项目搭建什么是React React项目搭建什么是React
补充知识
GIT基础命令
拷贝项目:
git clone
(仓库地址)
创建分支:
git branch <name>
创建并进入分支:
git checkout-b <name>
切换分支:
git checkout <name>
查看状态:
git status
添加所有文件:
git add
.
提交暂存区:
git commit-m '这里是当前提交的描述'
拉取:
git pull
推送:
git push
查看分支:
git branch --list
查看分支(包含远程分支):
git branch -a
合并其他分支到当前分支:
git merge--no-ff'描述'<name>
路由模式
项目的话就已经搭建好了,后面就是需要引用一些依赖项了,
react-dom
和
react-router-dom
React-router
提供了一些router的核心api,包括
Router
,
Route
,
Switch
等,但是它没有提供dom操作进行跳转的api
React-router-dom
提供了
BrowserRouter
,
Route
、
Link
、
Switch
等api,可以通过dom的事件控制路由
依赖
npm instal react-router
npm instal react-router-dom
注意:如果在项目中依赖了react-router-dom和react-router之后要删掉项目中的node_modules文件重新再下载,因为你依赖了之后项目的是有冲突的,如果不删掉的话会有问题和报错的,所以需要重新下载node_modules
总结
React搭建可能会有点繁琐和枯燥,但是这个是毕竟之路,还是要拥有耐心的把这些工具和环境搭建好才能进行React的开发,我也是刚学习React,有很多写的不足的地方,大家可以进行指出和纠正。