React学习笔记

1. React语法,React.js编写网站,React-Native编写App

2. 现已经不提供直接下载React包的方式,都是通过npm下载,设置淘宝镜像之后,cnpm install -g create-react-app,创建项目create-react-app {项目名}

3. 旧教程中react.js、react-dom.js、browse.min.js文件意义

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <!-- react.js是React的核心库 -->

        <script src="./build/react.js" charset="utf-8"></script>

        <!-- react-dom.js的作用是提供与DOM相关的功能 -->

        <script src="./build/react-dom.js" charset="utf-8"></script>

        <!-- browser.min.js的作用是将JSX语法转成JavaScript语法 -->

        <script src="./build/browser.min.js" charset="utf-8"></script>

    </head>

    <body>

        <!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->

        <div id="container"></div>

    </body>

    <!-- 在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/baben -->

    <!-- babel是一个转换编辑器,ES6转成可以在浏览器中运行的代码 -->

    <script type="text/babel">

        // 在此处编写React代码

        /*

            ReactDOM.render(html, dom, callback)

            React的最基本方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中

            html: 模板的渲染内容(HTML形式)

            dom: 需要插入的DOM节点

            callback: 渲染后的回调,一般不用

           */

            ReactDOM.render(

                <h1>Hello React</h1>,

                document.getElementById("container")

            );

    </script>

</html>

4. JSX:JSX不是一门新的语言,是个语法(语法糖)。

1). JSX必须借助React环境运行

2). JSX标签其实就是HTML标签,只不过我们在JavaScript中书写这些标签的时候,不用使用""括起来,可以像XML一样书写

3). JSX语法能够让我们更直观的查看到组件的结构,但是不能够在浏览器上面运行的,最终会转化成JavaScript代码在浏览器上运行

4). 在JSX中运行JavaScript代码,使用{}括起来

5). 例如:属性、设置样式、事件绑定

React使用JSX来替代常规的JavaScript。JSX是一个看起来很像XML的JavaScript语法扩展。我们不需要一定使用JSX,但它有一下优点:

1). JSX执行更快,因为它在编译为JavaScript代码后进行了优化。

2). 它是类型安全的,在编译过程中就能发现错误。

3). 使用JSX编写模板更加简单快速。

注:由于JSX就是JavaScript,一些标识符像class和for不建议作为属性名,React DOM使用className和htmlFor来做对应的属性。

基于开源大模型的教学实训智能体软件,帮助教师生成课前备课设计、课后检测问答,提升效率与效果,提供学生全时在线练习与指导,实现教学相长。 智能教学辅助系统 这是一个智能教学辅助系统的前端项目,基于 Vue3+TypeScript 开发,使用 Ant Design Vue 作为 UI 组件库。 功能模块 用户模块 登录/注册功能,支持学生和教师角色 毛玻璃效果的登录界面 教师模块 备课与设计:根据课程大纲自动设计教学内容 考核内容生成:自动生成多样化考核题目及参考答案 学情数据分析:自动化检测学生答案,提供数据分析 学生模块 在线学习助手:结合教学内容解答问题 实时练习评测助手:生成随练题目并纠错 管理模块 用户管理:管理员/教师/学生等用户基本管理 课件资源管理:按学科列表管理教师备课资源 大屏概览:使用统计、效率指数、学习效果等 技术栈 Vue3 TypeScript Pinia 状态管理 Ant Design Vue 组件库 Axios 请求库 ByteMD 编辑器 ECharts 图表库 Monaco 编辑器 双主题支持(专业科技风/暗黑风) 开发指南 # 安装依赖 npm install # 启动开发服务器 npm run dev # 构建生产版本 npm run build 简介 本项目旨在开发一个基于开源大模型的教学实训智能体软件,帮助教师生成课前备课设计、课后检测问答,提升效率与效果,提供学生全时在线练习与指导,实现教学相长。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值