React webPack搭建

简介: 1). 安装脚手架create-react-appnpm install -g create-react-app图1.png2). 创建项目# 项目名小写create-react-app logistics项目结构图2.
1). 安装脚手架create-react-app
npm install -g create-react-app
img_c70631c68434ee590d7b5d60d4e9e9f5.png
图1.png
2). 创建项目
# 项目名小写
create-react-app logistics
  • 项目结构


    img_b8db4b4b7f1b7d5d8be43daa2b692290.png
    图2.png
3). 启动
# 进入目录
cd logistics
# 启动
npm start
4). 浏览器验证

浏览器打开地址http://localhost:3000/

img_3a20fdd61cb7a44030ec7f17c165bf26.png
图3.png

5). 配置多个Html页面
6). 单页面示例
7). 多页面示例
8). 路由跳转

I. react-router-dom
官方示例

9). 推荐

I. 开发时推荐单页面方式

目录
相关文章
|
缓存 JSON 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 7
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
609 0
|
缓存 JavaScript 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 2
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
400 0
|
13天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
6月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
383 0
|
6月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
73 0
|
11月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
69 0
|
前端开发 应用服务中间件 nginx
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
|
前端开发
React 安装使用 Less(详细流程,包含 webpack、craco 方式)
React 安装使用 Less(详细流程,包含 webpack、craco 方式)
480 0
|
缓存 前端开发 JavaScript
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 5
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
181 1
|
Web App开发 移动开发 缓存
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 6
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
372 0