Преобразовать веб-сайт из HTML, CSS, bootstrap & JQuery в React?

Question

Привет, ребята, надеюсь, что вы в порядке, я студент и у меня есть в этом году сделать что-то вроде проекта, чтобы закончить учебу, поэтому я решил создать веб-сайт (используя React / Django), у меня уже есть сайт, но сделал HTML, CSS, bootstrap & JQuery, так что теперь я должен преобразовать его в реагировать , но у меня проблема: я не знаю, как включить некоторые js файлы в компоненты, все остальное идет хорошо, мне нужно только то, что в js файлы для применения его в некоторых компонентах. Надеюсь, ты поможешь мне. Сердечно

Answer 1

Таким образом, React работает так, что вы будете создавать "HTML" с использованием компонентов / компонентов класса React, как в этом примере

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> 
  )
}

Answer 2

Вы можете иметь javascript код внутри ваших компонентов, аналогично

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

, если javascript код, если он нужен только для инициализации компонента, вы можете использовать ответные ловушки для запуска только части кода один раз после создания компонента.

import React, { useEffect } from 'react';

const Component = props => {

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

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

пустой массив в качестве второго аргумента указывает ловушке useEffect, что эффект должен запускаться только один раз после инициализации компонента.