React学习笔记(一)

简介: React学习笔记(一)



记录一下react课程的学习路径,方便后续复习,课程地址 在线课程

安装 umi 依赖

mkdir antd-course
cd antd-course

cnpm init -y

cnpm install umi --save-dev

在vscode中创建配置文件

export default {};

新建src目录,并且将页面的参数改为单数

export default {
  singular: true,
}

创建page目录并且新建helloworld.js

export default () => {
    return <div>hello world</div>;
  }

修改package.json

{
  "name": "antd-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "umi dev",
    "build": "umi build"
      },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "umi": "^3.3.3"
  }
}

在控制台运行启动命令

cnpm run dev

访问应用

使用配置式路由,更改配置文件

export default {
    singular: true,
    routes: [{
        path: '/',
        component: './HelloWorld',
      }],
  }

访问应用

增加插件集到项目中

cnpm i @umijs/preset-react --save-dev

引入插件

export default {
    singular: true,
    dva:{},
  antd:{},
    routes: [{
        path: '/',
        component: './HelloWorld',
      }],
  }

创建.gitignore避免将无用的文件提交

node_modules
dist
.umi

提交

git init
git add -A
git commit -m 'init'

构建和部署

cnpm install serve -g
serve ./dist
相关文章
|
2月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
111 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
6月前
|
移动开发 前端开发 Java
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
77 0
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
139 0
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
87 0
|
7月前
|
前端开发
React学习笔记
React学习笔记
|
7月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
78 0
|
JavaScript 前端开发 调度
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
87 0
|
前端开发
前端学习笔记202307学习笔记第六十二天-react原理之1
前端学习笔记202307学习笔记第六十二天-react原理之1
70 0
|
前端开发
前端学习笔记202307学习笔记第六十一天-react知识点串讲之6
前端学习笔记202307学习笔记第六十一天-react知识点串讲之6
74 0
|
前端开发
前端学习笔记202307学习笔记第六十一天-react知识点串讲之11
前端学习笔记202307学习笔记第六十一天-react知识点串讲之11
69 0