react项目创建从0到1及安装（ts、axios、路由、redux）
React概述
React是一个由Facebook开发的开源JavaScript库，专注于构建用户界面（UI）。它采用组件化架构，允许开发者通过声明式编程创建可复用的UI组件，适用于构建单页面应用（SPA）或复杂的前端项目。
核心特点
组件化开发
React将UI拆分为独立的组件，每个组件管理自身的状态和逻辑，便于维护和复用。组件通过props（属性）接收数据，通过state（状态）管理内部数据。
虚拟DOM（Virtual DOM）
React通过虚拟DOM优化渲染性能。当状态变化时，React会先在内存中计算虚拟DOM的差异，再高效地更新真实DOM，减少不必要的重绘。
JSX语法
JSX是JavaScript的语法扩展，允许在JavaScript中直接编写类似HTML的代码，简化组件的定义和渲染逻辑。
单向数据流
React遵循单向数据绑定原则，数据从父组件通过props传递给子组件，确保数据流动的可预测性。
基础示例
以下是一个简单的React组件代码：
import React from 'react';function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}export default Greeting;
生态系统
React拥有丰富的生态系统，常见工具和库包括：
- React Router：处理前端路由。
- Redux/Context API：状态管理解决方案。
- Next.js/Gatsby：服务端渲染和静态站点生成框架。
适用场景
- 动态数据驱动的单页面应用（如社交媒体、仪表盘）。
- 需要高性能渲染的复杂UI（如实时数据展示）。
- 跨平台开发（通过React Native构建移动应用）。
React的灵活性和高效性使其成为现代前端开发的主流选择之一。
一、安装react脚手架 (确保已安装node)
# 安装脚手架
npm install -g create-react-app#查看是否安装成功
create-react-app -V
二、创建react项目（Vite 和Next.js）两种创建方式
1. Vite创建 (推荐)
一个现代化的前端构建工具，以极速启动和热更新著称，适合开发轻量级到中等复杂度的 React 应用。
- 快速原型开发：需要快速验证想法或构建小型项目。
- 学习 React/TypeScript：适合初学者或需要类型安全的项目。
- 对性能敏感：Vite 的按需编译和极速启动适合开发体验优先的场景。
- 轻量级：仅包含核心依赖，无额外框架捆绑。
- 灵活扩展：可自由添加路由（如 react-router-dom）、状态管理（如 Redux 或 Zustand）等。
- 生态丰富：支持 Vue、Svelte 等其他框架模板。
创建的时候包含安装了ts ( my-app项目名称 ) ( react-ts )
npm create vite@latest my-app -- --template react-ts
2. Next.js创建
一个全栈 React 框架，内置服务端渲染（SSR）、静态生成（SSG）、API 路由等功能。
- 开箱即用：默认集成 TypeScript、ESLint、Tailwind CSS、App Router 等，适合生产级应用。
- 全栈能力：支持在前端项目中直接编写后端逻辑（如数据库操作、身份验证）。
- 企业级应用：需要 SEO、复杂路由或数据预取的项目。
- 全栈开发：希望在一个项目中同时处理前端和后端逻辑。
- 快速启动生产项目：Next.js 的默认配置已优化为生产环境。
创建命令 （my-next-app项目名称）
npx create-next-app@latest my-next-app
三、配置react项目
react项目目录
1. 安装less 命令
npm install less -D