天天看点

React项目搭建什么是React

什么是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
  • 构建项目:

    npx create-react-app my-app

    my-app是自己的项目名称,自己可以根据需求取相应的名称即可 ,当你下载完之后,最后面那里会有一些命令的,那些命令是用来运行项目的时候用
    React项目搭建什么是React
    React项目搭建什么是React
  • 注意:当我们构建项目完成之后会有一些引藏的文件:

    Webpack

    Babel

    ,可通过命令:

    npm run eject

    来显示文件

    但是此命令:

    npm run eject

    是不可逆的(意思就是输入之后显示出来 就不会再隐藏了的)如下图:
    React项目搭建什么是React
    项目已经搭建好了,现在我们需要创建自己的git仓库

创建Github仓库

为什么需要创建git仓库呢?这是因为git仓库是存放自己的代码的,你开发好的代码可以通过提交和推送到git仓库,

  • Github:https://github.com/(免费)
  • Coding: https://coding.net/(免费)
  • Gitlab: https://about.gitlab.com/ (免费30天)

    创建一个属于自己的git仓库

    注册

    React项目搭建什么是React
    GitHub创建项目
    React项目搭建什么是React
    创建git项目之后下面会有一些命令,初始化我们的仓库,通过GitHub进行输入下面的命令,按顺序操作,
    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,有很多写的不足的地方,大家可以进行指出和纠正。