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 组件中管理数据的主要方式。

相关推荐
一 乐5 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
C_心欲无痕5 小时前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫5 小时前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo6 小时前
前端跨页面通信终极指南:方案拆解、对比分析
前端
yinuo6 小时前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
xkxnq7 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
烛阴7 小时前
拒绝配置地狱!5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
Van_Moonlight7 小时前
RN for OpenHarmony 实战 TodoList 项目:空状态占位图
javascript·开源·harmonyos
xkxnq7 小时前
第一阶段:Vue 基础入门(第 15天)
前端·javascript·vue.js
anyup9 小时前
2026第一站:分享我在高德大赛现场学到的技术、产品与心得
前端·架构·harmonyos