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 "注释" 之后的注释部分

相关推荐
我要洋人死4 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人16 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人16 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR22 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香23 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969326 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai32 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91540 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress