门户网站建设和推广,自己怎么制作网址,海关企业信息查询网站,福州定制网站开发制作文章目录 ⭐前言⭐搭建react ts项目⭐引入grapes 插件⭐结束 ⭐前言
大家好#xff0c;我是yma16#xff0c;本文分享关于react搭建在线编辑html的站点。 react 发展历史 React是由Facebook开发的一种JavaScript库#xff0c;用于构建用户界面。React最初发布于2013年… 文章目录 ⭐前言⭐搭建react ts项目⭐引入grapes 插件⭐结束 ⭐前言
大家好我是yma16本文分享关于react搭建在线编辑html的站点。 react 发展历史 React是由Facebook开发的一种JavaScript库用于构建用户界面。React最初发布于2013年并在2015年开源。以下是React框架的历史 2010年Facebook开始使用XHP框架使PHP代码生成HTML和JSX代码。Facebook的前端工程师Jordan Walke开始研究在JavaScript中实现类似的功能。 2011年Jordan Walke创建了内部项目JSX并在Facebook的广告实验室中使用。 2012年Facebook开始使用React构建他们自己的产品并将React项目开源。 2013年React首次发布React被认为是一个“视图”库而不是一个完整的MVC框架。 2015年React Native发布用于构建iOS和Android应用程序。 2016年React的版本15发布支持Fiber架构Fiber是一种将React组件渲染成底层平台原生UI元素的新实现方式可提高性能和可维护性。 2017年React发布了版本16其中包括对React Fiber架构的完整支持。 2018年React 16.6发布其中包括React Hooks功能允许开发人员在不使用类的情况下使用React状态和其他React功能。 2019年React 16.9发布其中包括钩子API的更新和性能优化。 React框架已经成为web开发中最受欢迎的框架之一其在社区和工业中有着广泛的应用。 搭建效果
⭐搭建react ts项目
create-react-app 工具 create-react-app 是一个用于自动化 React 项目搭建的命令行工具。它可以帮助开发者快速创建一个基于 React 的项目结构并且集成了常用的开发工具和配置例如 webpack、Babel、ESLint 等。 create-react-app 可以帮助开发者避免手动配置项目结构和工具链的繁琐过程让开发者能够更专注于项目的核心逻辑开发。同时create-react-app 中的配置也经过了官方和社区的广泛验证和优化具有很好的性能和可用性。 使用 create-react-app 只需要简单几步操作就能创建一个完整的、可用的 React 项目。同时create-react-app 也提供了丰富的命令行工具可以帮助开发者快速启动、构建和测试项目。 使用 create-react-app 脚手架创建ts的模板类型
$ npx create-react-app my-app --template typescript⭐引入grapes 插件
grapes插件简介 Grapes插件是一种用于Web开发的开源工具可以帮助用户快速创建动态和交互式的网页元素。它基于Javascript和CSS提供了丰富的可定制的组件和模板使用户可以快速创建和定制网页元素如按钮、表格、图表、弹框等等。Grapes插件还提供了一个易于使用的UI编辑器使得用户可以通过拖放和调整组件属性来创建和编辑网页元素。此外它还支持多语言和多浏览器适合开发响应式网页和移动应用程序。 安装grapes依赖
$ npm i grapesjs官网案例
link relstylesheet hrefpath/to/grapes.min.css
script srcpath/to/grapes.min.js/scriptdiv idgjs/divscript typetext/javascriptvar editor grapesjs.init({container : #gjs,components: div classtxt-redHello world!/div,style: .txt-red{color: red},});
/script主页配置app.tsx
import ./App.css;
import grapesjs/dist/css/grapes.min.css;
import grapesjs from grapesjs;
import { useState } from react;
import PresetPage from ./views/PresetPage
import EmailPage from ./views/EmailPage
import GrapesPage from ./views/GrapesPage
import {sendEmail} from ./service/sendEmailApifunction App() {const [editType,setEditType]useState(mjml);const changeEditype(val:string){setEditType(val)};return (div classNameAppheader classNameApp-headerdiv style{{width:50%,textAlign:left,paddingLeft:10px}}grapes web插件 对比button style{{marginLeft:20px}} onClick{()changeEditype(grapejs)}grapejs/buttonbutton style{{marginLeft:20px}} onClick{()changeEditype(mjml)}mjml/buttonbutton style{{margin:0 20px}} onClick{()changeEditype(preset)}preset newsletter/button当前的插件类型{editType}/header{editTypegrapejsGrapesPage editInstance{grapesjs}/GrapesPage}{editTypemjmlEmailPage editInstance{grapesjs}/EmailPage}{editTypepresetPresetPage editInstance{grapesjs}/PresetPage}/div);
}export default App;
grapePage.tsx
import { useEffect, useState } from react
const GrapesPage(props:any){const [editor,setEditor]useState();const [domRef,setDomRef]useState();const renderGrape () {if(domRef!editor){// ts-ignoreconst editorInstance:any props.editInstance.init({container: #gjs-grapes,});setEditor(editorInstance)}}useEffect((){renderGrape()},[renderGrape])return (div id{gjs-grapes} style{{width: 800px,height: 800px
}}ref{(ref: any) {setDomRef(ref)}}/)
};export default GrapesPage
效果 github仓库建设demohttps://github.com/yongma16/grapes-mjml-react 属于一个测试demo。
⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 最后感谢你的阅读
