正文 

当前位置： 首页 > java > java教程

15.在网页中配置使用react

author author     2022-09-13     562

关键词：

看一下测试项目的结构，就是一个简单的web项目

技术分享

 

index.html

<div id="app">
            
    <div class="carousel-con" id="ts-list">
                
    </div>
            
</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>、
<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="funcjs/home.js" type="text/javascript" charset="utf-8"></script>

需要react.js,react-dom.js 这里使用的react版本都是比较低（0.14.5），home.js是编译之后的文件，这里先不要管怎么来的，会在下面介绍

安装node.js (为了使用npm包管理器);
命令行cd进入web目录;

操作完成上面俩步

接下来安装 jsx语法tranformer

npm install --global babel-cli
npm install babel-preset-react

这是编译用的 

jsx文件目录如下，当然你也可以放在你喜欢的地方

技术分享

使用babel编译，其中的jsx是目标路径，funjc是编译完成的js文件的存放路径

babel --presets react jsx --watch --out-dir funcjs

也可以将上述命令行写入bat文件中

技术分享

 

 

 技术分享

 

 来看一下效果，双击bat文件

技术分享

运行完成

原来的jsx文件九转化成js文件啦

技术分享技术分享

 


是否可以在带有 pug 的 React 中使用 Framer Motion

...2823:15:09【问题描述】：我正在使用多种技术进行高级React网页开发我以前使用AOS来简单地为我的反应组件设置动画，也尝试过GreenSock一次，但它不符合我的需求......我通过https://github.com/pugjs/b 查看详情

如何在 React 中登录页面后配置侧边栏导航中的路由？

】如何在React中登录页面后配置侧边栏导航中的路由？【英文标题】：HowtoconfiguretheRoutesinSidebarnavigationafterLoginpageinReact?【发布时间】：2021-12-2518:29:15【问题描述】：我正在React中设计一个用户仪表板，其中用户登录并使用其他链... 查看详情

在 react-native 中迭代 JSON 数组

...取所有profiles对象。我尝试使用以下代码，但它没有获取配置文件对象。如何打印列表中的所有配置文件对象？代码：import 查看详情

如何在 React 中使用 Tailwind CSS 来配置 Create React App？ [关闭]

】如何在React中使用TailwindCSS来配置CreateReactApp？[关闭]【英文标题】：HowtouseTailwindCSSinReacttoconfigureCreateReactApp?[closed]【发布时间】：2021-09-0615:23:44【问题描述】：我对使用tailwindcss和react应用程序很陌生。我已经按照tailwindcss的指... 查看详情

在 React 故事书自定义 webpack 配置中使用 webpack ProvidePlugin

】在React故事书自定义webpack配置中使用webpackProvidePlugin【英文标题】：usingwebpackProvidePlugininReactstorybookcustomwebpackconfig【发布时间】：2017-10-0513:44:51【问题描述】：我已经为React中的拖放构建了一个包装器包，并添加了storybook示例... 查看详情

关于在react中使用cssmodules

....config也遇到了一些麻烦,不过基本都摸清楚套路了, 在配置好sass之后,我发现..官方竟然已经给配置好了sass中用module的配置, 令人惊奇配置sass的方法:https://blog.csdn.net/qq_41694696/article/details/80075470既然官方已经给配 查看详情

react中css的使用

网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似，但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异，我们可以定义特定的样式类名，也可... 查看详情

在 JSX 中使用 React.cloneElement()

】在JSX中使用React.cloneElement()【英文标题】：UsingReact.cloneElement()inJSX【发布时间】：2018-07-1612:49:15【问题描述】：我想知道如何在JSX中使用cloneElement语法。我阅读了文档并尝试了示例，但仍然没有任何线索。classABCextendsReact.Compone... 查看详情

如何在 SharePoint SPFx + react 项目中配置 jest 单元测试框架

】如何在SharePointSPFx+react项目中配置jest单元测试框架【英文标题】：howtoconfigurejestunittestframeworkinSharePointSPFx+reactproject【发布时间】：2021-12-2416:50:15【问题描述】：我尝试配置jest单元测试框架以响应SharePointSPFx项目下面我提到所... 查看详情

在 React 渲染方法中使用 for 在 return 语句中失败

】在React渲染方法中使用for在return语句中失败【英文标题】：useofforfailinginsidereturnstatementinsideReactrendermethod【发布时间】：2016-10-1404:15:25【问题描述】：以下代码失败，错误为Unexpectedtoken指向for：importReactfrom\'react\';importReactDOMfrom\... 查看详情

如何在 React 中使用 fetch() API 来设置状态

】如何在React中使用fetch()API来设置状态【英文标题】：Howtousefetch()APIinReacttosetState【发布时间】：2018-09-1523:25:15【问题描述】：我正在尝试在React中编写一个组件，该组件将使用fetch()API从网站获取数据，然后使用setState设置与数... 查看详情

如何分辨网页的哪一部分与特定的react组件相关联

...ols。当没有立即清除组件时，我该怎么做才能识别组件在网页上的位置？答案如果您使用htmlname属性为组件分配了唯一的名称，则可以从chrome开发工具的elements标签中过滤该名称。如果您实际上是想在页面中查看它的位置，那么... 查看详情

React 15 与 React-redux 不兼容

...试在我的项目中升级到新发布的react@15.0.0-rc.1，该项目也使用react-redux@^4.4.0包。但是，当我尝试运行文档中建议的升级时(https://facebook.github.io/react/blog/2016 查看详情

对象作为 React 子代无效（在 Internet Explorer 11 中用于 React 15.4.1）

】对象作为React子代无效（在InternetExplorer11中用于React15.4.1）【英文标题】：Objectsarenotvalidasareactchild(InInternetexplorer11forReact15.4.1)【发布时间】：2017-04-1508:13:54【问题描述】：对象作为React子对象无效（找到：带有键$$typeof,type,key,re... 查看详情

如何在 React.js 中使用 Google 字体？

...问题描述】：我用React.js和webpack建立了一个网站。我想在网页中使用Google字体，所以我把链接放在了这个部分。GoogleFonts<linkhref="https://fonts.googleapis.com/css?family=Bunge 查看详情

如何使用 Jest 在本机反应中模拟“react-native-config”库的配置数据？

】如何使用Jest在本机反应中模拟“react-native-config”库的配置数据？【英文标题】：HowtomockConfigdataof\'react-native-config\'libraryinreactnativeusingJest?【发布时间】：2021-12-3110:19:18【问题描述】：在这里，我试图获取环境详细信息以获取... 查看详情

在 WebStorm 中配置端口 - React + Node Express 应用程序

】在WebStorm中配置端口-React+NodeExpress应用程序【英文标题】：ConfigureportsinWebStorm-React+NodeExpressapp【发布时间】：2019-10-1603:00:29【问题描述】：我将使用WebStormIDE进行全栈实现。我为此使用react.js和node-express。我可以在单独的项目中... 查看详情

如何配置tomcat 7以在react中使用react-router-dom？

】如何配置tomcat7以在react中使用react-router-dom？【英文标题】：Howtoconfiguretomcat7toworkwithreact-router-dominreact?【发布时间】：2018-07-1307:04:53【问题描述】：我有一个react项目，它在开发版本中运行良好，但是当我将其导出(bundle.js)并将... 查看详情