React

搭建开发环境

create-react-app(创建项目):npx create-react-app xxx(xxx 项目名)

解读项目目录

app.js

复制代码
// 项目的根组件
// app被引入到index.js 被index.js里的核心代码 渲染到 public里的index.html里的root div上去
function App() {
  return (
    <div className="App">
     this is APP
    </div>
  );
}

export default App;

index.js

复制代码
// 整个项目的入口
// 下面两个是react两个必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入项目的根组件
import App from './App';

// 把根组件渲染到id为root的dom节点上(在public下的index里)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

JSX

jsx:js+xml(html)

本质

jsx不是标准的js语法,浏览器不认识,需要通过解析工具(babel)做解析之后才能在浏览器中允许

想深入了解jsx (Babel · Babel (babeljs.io))多看看区别呗

jsx中使用js表达式

{}

注意:仅支持表达式哦!!if语句、switch语句、变量声明属于语句 不是表达式 不允许出现在{}中

相关推荐
用户784721509914 分钟前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong18 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373220 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪1 天前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码1 天前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农1 天前
【React用到的一些算法】游标和栈
算法·react.js
小高0071 天前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆1 天前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js