React 安装及创建项目

一、最熟悉的操作利用create-react-app搭建项目
1、全局安装create-react-app，执行：npm install -g create-react-app 命令进行安装

2、进入要安装项目的文件夹，执行：npx create-react-app react-blog 创建一个react-blog项目
3、进入项目cd react-blog，执行：npm run start 编译启动项目即可(如图就ok了)

此页面会自动开启；

4、在项目src目录创建views文件夹，放置页面组件，这里我创建了login和main两个文件夹并创建了对应的login.js、main.js页面组件

// login.js
import React from 'react'
export default function Login() {return (<div>Login</div>)
}

// main.js
import React from 'react'
export default function Main() {return (<div>Main</div>)
}

5、在项目src目录创建components文件夹，放置公共组件

二、安装配置路由
1、首先安装路由组件,这里我使用的是5.0版本的配置：npm install react-router-dom@5 --save-dev
2、在src目录创建路由文件夹router并创建index,js
3、这里我做了token判断是否登陆，显示对应页面组件

import React from 'react';
import { BrowserRouter ,Route, Switch, Redirect} from "react-router-dom";
import Login from '@/views/login/Login';  //  导入登陆组件
import Main from '@/views/main/Main';  // 导入登陆后要显示的main组件
export default function IndexRouter() {return (<BrowserRouter><Switch><Route path='/login'  component={Login}></Route>{/* <Route path='/'  component={Main}></Route> */}<Route path='/'  render={()=>{return localStorage.getItem('token')? <Main></Main> :  <Redirect to='/login'></Redirect>}}></Route></Switch></BrowserRouter>)
}

3、修改src/App.js,引入我们的路由入口文件@/router/index

import React from 'react';
import './App.css';
import RouterView from '@/router/index';
function App() {return (<RouterView></RouterView>);
}
export default App;

React 安装及创建项目相关推荐

Django在Win7下安装与创建项目hello word示例
Django在Win7下的安装及创建项目hello word的例子有关python 的django 框架安装与开发的小例子. Django在Win7下的安装及创建项目hello word. 1.安装 ...
vue及脚手架的下载安装，创建项目
壹．安装 1.1安装vue.js,网址为:https://vuejs.org/v2/guide/installation.html ,老师给的网址打开会变成源代码. 1.2安装node,zip是安装完 ...
Django 框架篇: 一. Django介绍; 二. 安装; 三. 创建项目;
Django介绍一. web框架: 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来 ...
JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
Maven入门学习，安装及创建项目
一.maven介绍: 1.maven是一个基于项目对象模型(POM Project Object Model),通过配置文件管理项目的工具(项目管理工具). 2.maven主要功能:发布项目(从编译到 ...
Atlassian JIRA 插件开发之二安装和创建项目
安装参考 https://developer.atlassian.com/server/framework/atlassian-sdk/install-the-atlassian-sdk-on-a-w ...
QT 基础知识一（QT安装、创建项目、常用窗口控件使用、信号与槽机制讲解）
QT概念 Qt:Qt是一个跨平台的C++框架(C++库),Qt除了支持界面设计(GUI编程),还封装了与网络编程.多线程.数据库连接.视频音频等相关的功能. ctrl 撤销(返回上一步) 市面常见的G ...
electron入门——安装及创建项目
由于项目需要,一只数据狗暂时转向前端.本来以为写写html5.ccs.js,没想到需要electron+vue. vue现在算是有点了解,electron还是非常懵懂,于是乎在bilibili上面看点 ...
分享本周所学——Unreal Engine 5（UE5/虚幻引擎5）安装以及创建项目的常见问题
大家好,欢迎来到<分享本周所学>第八期.本人是一名人工智能初学者,刚刚大一.最近突发奇想打算跟同学用UE5开发一个小游戏,目前计划是做一个Roguelike卡牌游戏.我之前是有C++算法基 ...

React 安装及创建项目

React 安装及创建项目相关推荐

最新文章

热门文章