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语句、变量声明属于语句 不是表达式 不允许出现在{}中

相关推荐
楊无好2 小时前
react中的受控组件与非受控组件
前端·react.js
菠萝+冰2 小时前
react虚拟滚动
前端·javascript·react.js
明月与玄武6 小时前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
举个栗子dhy10 小时前
第四章、路由配置
前端·javascript·react.js
im_AMBER10 小时前
React 03
前端·笔记·学习·react.js·前端框架·react
.生产的驴13 小时前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
@PHARAOH1 天前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
举个栗子dhy1 天前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
举个栗子dhy1 天前
第一章、React + TypeScript + Webpack项目构建
前端·javascript·react.js
半生过往1 天前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js