如何使用React脚手架创建项目以及基本的目录介绍

让我康康0

已于 2022-07-10 22:11:34 修改

阅读量2.5k

点赞数

文章标签： react.js git 前端

于 2022-07-10 19:21:51 首次发布

本文链接：https://blog.csdn.net/qq_44015417/article/details/125325070

版权

1.准备工作，检查自己电脑是否安装了node和npm

 1.cmd中输入node -v  和npm -v检查自己的版本
 2.如果没有安装的有的话就可以先进行安装node.js和npm
   注意：1.安装npm时要使用淘宝镜像，要不然在下载时会因为网络原因失败
        2.脚手架要提前安装node的原因是因为脚手架使用的是webpack打包，webpack打包需要用到node

2.创建脚手架的代码


 1. 全局安装react脚手架        
     npm i -g create-react-app
 2. 安装之后就可以找到对应的路径去创建React项目了  
    cd D:\kangxin\document\reactTest\ProjectLogin
    D:
 3.创建项目
   create-react-app react-admin-client
 4.创建完成之后执行命令进行运行
  npm start

3.打包发布项目步骤

1.运行如下命令

npm run build
npm install -g serve
serve start
打开运行serve start出来后的地址就可以了

2.打开运行serve start出来后的地址就可以了

在这里插入图片描述

4,提交代码到Git上

1）首先在git上创建一个项目

在这里插入图片描述

2）在对应项目的目录下打开git窗口进行初始化git

代码借鉴如下文章：https://www.csdn.net/tags/OtTaIgysMzY5MS1ibG9n.html

1.创建git仓库   git init
2.将git添加到暂存区 git add .
3.清理屏幕  clear
4.提交版本  git  commit -m "名字"
5.推送关联 git remote add origin https://github.com/..../kangxin.git (git中有)
6.推送分支 git push origin master

在这里插入图片描述

3）切换dev分支

切换分支为dev：git checkout -b dev
提交代码到dev分支上：git push origin dev
执行完成之后git上面就有两个分支了

在这里插入图片描述

4）拉取git代码到本地

  拉取项目   git clone 项目地址
  进入到项目目录 cd 名字
  查看分支 git branch
  从远程dev分支上获取dev代码  git checkout -b dev origin/dev
  再查看分支  此时为dev分支  git branch
  从dev上拉取代码   git pull origin dev

5.打开从git中拉取下来的项目进行编码

src/APP.js应用基本文件

// 应用基本组件
import React, { Component } from 'react'

//类文件 快捷键RCC可以实现
export default class App extends Component {
  render() {
    return (
      <div>
          APP
      </div>
    )
  }
}

src/index.js入口文件

// 入口文件
import React from "react";
import ReactDOM from "react-dom";


import APP from './App';
ReactDOM.render(<APP/>,document.getElementById('root'))