React + 项目(从基础到实战) -- 第一期

react是什么

任何领域,强大,高效的东西一定是简单的

  • react 是js,外加一点模板语言JSX(像HTML)
  • 下载最多,生态丰富

符合js语法

React 官方中文文档 (docschina.org)

核心价值

组件化 + 数据驱动视图

组件化

  • 不是react原创,在React流行开
  • 拆分组件页面,通过组件拼接页面,实现组件复用
  • 易于多人合作

数据驱动视图

UI=f(state)

  • state 数据
  • ui 视图(user interface)
  • 数据经过函数的封装驱动视图

只关注业务数据的修改,不再操作DOM,增加开发效率

创建项目

使用脚手架

为什么

  • 前端项目配置多,由0开始成本高

常用脚手架

  1. create-React-App创建React项目
  2. vite创建React项目
  3. 使用eslint prettier husty等,制定编码规则

vite 和webpack的区别

  • webpack :
    传统的前端打包工具(将文件整合在一起--打包),create-React-app脚手架底层实现
  • vite:
    打包工具(使用ESMoudle 语法,比较快,将分散的文件联系),也是构建工具

工具准备

下载 nodeJs

换成淘宝镜像

下载vsCode

下载git

create-react-app创建

Getting Started | Create React App 中文文档 (bootcss.com)

npx create-react-app my-app --template typescript

默认是js,注意之后添加 --template typescript 使用ts

cd 你的文件
npm start

vite 创建

开始 | Vite 官方中文文档 (vitejs.dev)

代码规范--使用eslint,prettier

  1. 安装相关插件
  2. 创建配置文件
  3. 创建命令并使用

在文件一保存的时候进行处理

.vscode 全局的配置

json 复制代码
{

    "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

}

}

自己的配置

有点麻烦先不做了,使用vite构建项目

提交到git仓库

常见命令:

git init

git status

git add .

git commit -m "注释"

代码流程---使用husky,commit-lint

husky

在代码提交之前检查现有的代码是否符合规范,不符合定义

命令修改

commit-lint

规范提交git commit -m "注释" 之后的注释部分

相关推荐
Myli_ing11 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风13 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟22 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾44 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript