希望将 'https://startbootstrap.com/' 中的免费模板集成到我的 React 应用程序中

Looking to integrate free templates from 'https://startbootstrap.com/' into my react app

我想下载其中一个免费 bootstrap templates 并将所述模板添加到我的 React 应用程序中。我试着阅读了一些文档,但找不到任何关于将这些免费模板与 React 集成的文档。

我为我喜欢的模板做了一个 npm install,但我不确定下一步该做什么。我的 node_modules 目录中只有模板。

我将模板中 html 文件正文中的内容放入我的 app.js 的 return 中。添加了 css 和 vendor 文件夹。然后我尝试将模板 css 文件导入我的 app.js 以及更改我的 index.html 文件中需要的内容。其中一些奏效了。其他部分没有。

只是想将这些漂亮的模板正确地集成到我的 React 项目中。

如有任何帮助,我们将不胜感激!

问题是这些 templates 是在考虑 Bootstrap 的情况下构建的 而不是 React。这些模板是使用常规的 HTML、CSS、JS、jQuery 等创建的,并且对于 React 应用程序来说不是开箱即用的。因此,为了让这些模板之一发挥作用,在 React 的上下文中,需要对所述模板的许多部分进行手动更改。

例如,除了获取 React 应用程序所需的模板片段之外,还必须更改模板提供的 HTML 页面中列出的众多属性。这是因为在 React 中你不能在 JSX 中使用为 JavaScript 保留的关键字。

那么这是什么意思呢?

您必须将 HTML 中的 class 属性更改为 className,您的 CSS 样式规则才能在模板中生效。 onchange 变为 onChangeonsubmit 变为 onSubmit,等等......

标准是 camelCase reserved JavaScript keywords in JSX.

你绝对可以让这个模板在 React 中工作,它只需要在你这边进行一些手动调整。但是,如果您想要一个开箱即用的 React 模板,我会考虑使用 React 构建的免费模板。

希望对您有所帮助!