将网站从 HTML、CSS、bootstrap 和 JQuery 转换为 React？答案

【问题标题】：Convert website from HTML,CSS,bootstrap & JQuery to React?将网站从 HTML、CSS、bootstrap 和 JQuery 转换为 React？
【发布时间】：2020-05-05 06:28:26
【问题描述】：

大家好，希望你们没事，我是学生，今年我要做一些事情，比如结束我的学业，所以我选择创建一个网站（使用 React/Django）我已经有了这个网站但是由 HTML,CSS,bootstrap 和 JQuery 制作，所以现在我必须将其转换为 react ，但我有一个问题，我不知道如何在组件中包含一些 js 文件，其他一切都很好，我只需要 js 文件中的内容即可将其应用到某些组件中。希望你能帮帮我。亲切地

【问题讨论】：

标签： javascript jquery html css reactjs

【解决方案1】：

您也可以在组件中包含 javascript 代码

const Component = props => {
//javascript code
return (<div>-- Component JSX---</div>)
}

如果只需要 javascript 代码来初始化组件，您可以使用 react hooks 在组件创建后只运行一次代码。

import React, { useEffect } from 'react';

const Component = props => {

useEffect(() => {
 // javascript code
}, [])

return (<div>--Component JSX---</div>
}

作为第二个参数的空数组表示 useEffect 钩子，该效果应该只在组件初始化后运行一次。

【讨论】：

【解决方案2】：

所以 React 的工作方式是你将使用 React 功能/类组件构建“HTML”，就像这个例子

import React from 'react';
//Just like a normal javascript function, it listens to in this 
instance, the return statement. You're returning regular HTML.
function Navbar() {
  return (
    <div>This is some text built by react</div>
    <p>Saying hello to react by building a functional component</p>
  )
}

export default Navbar;  //This right here is exporting the file so it can be 
//used elsewhere just import it in other file.

所以返回是您将建立您的网站的地方，然后在您将导入的下一个组件中应该看起来像这样。

通常，它被称为 App.js，或者在某些更复杂的情况下，它是您想要的任何东西。

import Navbar from '../components/Navbar.js';

function App() {
  return (
    <Navbar /> //Now you don't have to write your main content in here you can 
               //just import it. Just like Navbar
    <div>This is my main content in page</div> 
  )
}

【讨论】：