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

相关推荐
Smile_Gently8 小时前
Vue 2 前端项目实现 在线IDE 功能
javascript
梦鱼8 小时前
element-ui:el-autocomplete实现滚动触底翻页
前端
阿伟实验室8 小时前
debian10部署简易web服务器
运维·服务器·前端
云枫晖8 小时前
Vue3 响应式原理:从零实现 Reactive
前端·vue.js
月弦笙音8 小时前
【AI】👉提示词入门基础篇指南
前端·后端·aigc
konh8 小时前
React Native 自定义字体导致 Text / TextInput 文本垂直不居中的终极解决方案
前端·react native
奔赴_向往8 小时前
跨域问题深度剖析:为何CORS设置了还是报错?
前端
纯爱掌门人9 小时前
别再死磕框架了!你的技术路线图该更新了
前端·架构·前端框架
没头脑的男大9 小时前
Unet实现脑肿瘤分割检测
开发语言·javascript·ecmascript
丁点阳光9 小时前
Ract Router v7:最全基础与高级用法指南(可直接上手)
前端·react.js