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

相关推荐
南城巷陌1 小时前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
Dcc3 小时前
构建可维护的 React 应用:系统化思考 State 的分类与管理
前端·react.js
进阶的鱼3 小时前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite
Gazer_S5 小时前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
.生产的驴5 小时前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
蓝婴天使18 小时前
基于 React + Go + PostgreSQL + Redis 的管理系统开发框架
react.js·postgresql·golang
知识分享小能手19 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead20 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
今天头发还在吗20 小时前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
需要兼职养活自己1 天前
react【portals】与vue3【<Teleport>】
前端·react.js