React-01React创建第一个项目(npm install -g create-react-app)

1. React特点

  • JSX是javaScript语法的扩展,React开发不一定使用JSX。
  • 单向响应的数据流,React实现单向数据流,减少重复代码,比传统数据绑定更简单。等等

JSX是js的语法扩展,允许在js中编写类似HTML的代码

javascript 复制代码
const element = <h1>Hello, JSX!</h1>;

2. 使用Create React APP创建项目

2.1 确保是否安装node.js与npm(node包管理)

node -v

npm -v

2.2 全局安装React官方支持的脚手架工具

npm install -g create-react-app

2.3对应目录文件下创建React项目my-app

npx create-react-app my-app

npx是npm 5.2+版本自带的一个工具 用于运行本地或者远程的npm包

创建项目成功如下

对应创建项目成功后的执行命令如下

2.4 react对应的文件目录结构

  • React 项目由多个文件和文件夹组成,核心文件包括 index.htmlindex.jsApp.js

  • React 组件是应用的基本构建块,可以是函数组件或类组件。

  • JSX 是 React 的核心语法,用于描述 UI。

  • Props 和 State 是 React 组件中管理数据的主要方式。

相关推荐
小小爱大王29 分钟前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往30 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听32 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle33 分钟前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎37 分钟前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特37 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle37 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落37 分钟前
HTML5 音乐敲击乐静态界面
前端
海在掘金6112738 分钟前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691538 分钟前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全