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

相关推荐
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
前端小盆友5 小时前
从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能
react.js·chatgpt·express
gzzeason6 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7786 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
十盒半价9 小时前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
海底火旺9 小时前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
爱学习的茄子9 小时前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link9 小时前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
归于尽9 小时前
原生JS与React的事件差异
前端·javascript·react.js
伍哥的传说10 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript