Develop Reference

How to use HTML with JS in React app to export component

I am building MERN project and in react part I got:
- src/
- components/
- AdminPage/
- admin-page.html
- admin-page.css
- admin-page.js
So the problem is in App.js:How could I use regular html, css, js and not ``react in <AdminPage/> component:
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './components/HomePage/HomePage.component';
import LoginPage from '../src/components/LoginPage/LoginPage.component';
import RegisterPage from '../src/components/RegisterPage/RegisterPage.component';
import UserPage from '../src/components/UserPage/UserPage.component';
import AdminPage from '../src/components/AdminPage/AdminPage.component';
Is there way NOT to use the classic way like
AdminPage.component.jsx and from there export the component; how could I do that with regular html, css and js?

I'm assuming you don't want to consider a functional component because of maintaining something in the html/css/js that can't be easily refactored into React:
ie.
const NewComponent = () => {
const functions = () => {
}
return (
<div style={styles} ></div>
);
}
const styles = {
...css
}
export default NewComponent;
Then I'd say your best solution would be to paste the body of html from admin-page.html into you index.html file.
Preferably under the root div tag ( ).
This will show up under all your React code (like a footer would) but you can use a class name or id to show / hide the page under certain conditions.
Then just link your css and js as separate stylesheets / scripts in the header and footer.
I would strongly advise against this though as it will most likely increase your technical debt to the project.
Hope it helps : )
[update]
By default, React does not permit you to inject HTML in a component, for various reasons including cross-site scripting. However, for some cases like a CMS or WYSIWYG editor, you have to deal with raw HTML. In this guide, you will learn how you can embed raw HTML inside a component.
dangerouslySetInnerHTML Prop
If you try to render an HTML string inside a component directly, React will automatically sanitize it and render it as a plain string.
Ok so looking at this again if you just want to add the complete 200+ lines of HTML / JS I'd say you could just import them to a component with the dangerously SetHTML prop. Like so:
const HTML = import('../the/file/path/to/the.html');
const JS = import('../the/file/path/to/the.js');
const newComponent = () => {
return (
`<div dangerouslySetInnerHTML={{ __html: myHTML }} />;`
)
}
Alternatively, If you want a safer solution you could use dompurify:
If XSS is a primary concern, you can use an external library like DOMPurify to sanitize the HTML string before injecting it into the DOM using the dangerouslySetInnerHTML prop.
To install the DOMPurify library, run the following command.
npm i dompurify
You can see the example usage below.
import DOMPurify from "dompurify";
const myHTML = `<h1>John Doe</h1>`;
const mySafeHTML = DOMPurify.sanitize(myHTML);
const App = () => <div dangerouslySetInnerHTML={{ __html: mySafeHTML }} />;
You can also configure DOMPurify to allow only specific tags and attributes.
// ...
const mySafeHTML = DOMPurify.sanitize(myHTML, {
ALLOWED_TAGS: ["h1", "p", "span"],
ALLOWED_ATTR: ["style"],
});
// ...
With many thanks to Gaurav Singhal for this brilliant article:
https://www.pluralsight.com/guides/how-to-use-static-html-with-react

How do I link my javascript files in react when converting from HTML,CSS,JS into JSX, CSS, JS?

I have a typical website created with HTML, CSS, Javascript and I'm trying to convert it into react.
I can convert my HTML into JSX pretty easily with an online converter and my CSS is the same, I just have to import it differently.
But now I'm confused about how to link up my javascript files. Because my HTML is now JSX which is in a Javascript file as well.
Normally in html this is all I need to do to link my java script and everything works:
<script type="text/javascript" src="js/main.js"></script>
How would I do this in react such that my JSX will have the same functionality as did my HTML?
Right now whether I try to import it from file location:
import './javascript/main.js'
It doesn't do anything. I'm not getting any errors. My JSX and CSS works fine and all I have for my CSS is (this import works fine):
import './css/main.css'
If it should work, please let me know, it must mean there's an error elsewhere that I have to sort out.
Thanks in advance

I don't think you can import js code on a react app, probably you have to create react-app first, then create its components and add you javascript code within these components, it´s pretty easy, i recomment you to read the documentation of react and see how it works. Hope it helped you.

You can include JavaScript functions inside JSX itself :
import React from 'react';
const Something=()=>{
// Your javascript functions :
return(
<div>
Your Html here
</div>
)
}
export default Something
// Or if You are using Class Component :
import React, { Component } from 'react';
class Something extends Component {
state = { }
// Your Javascript Functions
render() {
return (
<div>
Your HTML goes here
</div>
);
}
}
export default Something;
and if you want to import js file from another location you have to include export in your function:
export const Name=()=> {
}
and import:
import {Name} from '/location';

Convert website from HTML,CSS,bootstrap & JQuery to React?

Hi guys hope you're fine, I'm student and I have this year to do some thing like a project to end my studies , so I chose to create a website (using React/Django) I already have the site but made by HTML,CSS,bootstrap & JQuery , so now i have to convert it to react , but i have a problem i don't know how to include some js files inside a components , every things else is going good, I need just what is in the js files to applied it in some components.
Hope you help me out.
cordially

You can have javascript code inside your components likewise
const Component = props => {
//javascript code
return (<div>-- Component JSX---</div>)
}
if the javascript code if just needed for the initializing of the component you can use react hooks to run a piece of code only one time after the component is created.
import React, { useEffect } from 'react';
const Component = props => {
useEffect(() => {
// javascript code
}, [])
return (<div>--Component JSX---</div>
}
the empty array as second argument indicates the useEffect hook that the effect should only be ran once after the component has been initialized.

So the way React works is you will be building "HTML" using React functional/class components like this example
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.
So the return is where you will build your website, then in the next component you will import should look something like this.
Normally, it is called App.js or in some instances where it's more complex it's anythinng you want.
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>
)
}

Atom Red Highlight after single quote (')

How to disable specific instances of the red highlighting.
I've tried entering an escape before the single quote, but it didn't work. I'm certain the single quote is causing the red highlighting because when I remove it, it goes away.
Here's the code:
import React from 'react';
const banner = () => {
return <p>Tristan\'s first React site!</p>
};
export default banner;

"The red highlight" is coming from eslint. I don't know which configuration you are using but this warning is for no-unescaped-entities
So you can fix it by using like:
<p>Tristan&apos;s first React site!</p>
or by using other options that you can find that link.
You can use something like:
{`Tristan's first React site!`}
or
<p>{'Tristan\'s first React site!'}</p>
or
<p>{"Tristan\'s first React site!"}</p>
as suggested in the comments and the other answers, but this probably causes another warning: jsx-curly-brace-presence

Something like this should work
import React from 'react';
const banner = () => {
return <p>{'Tristan\'s first React site!'}</p>
};
export default banner;

Code snippet inside Highlight component displays in a long single line

Code snippet inside Highlight component displays in a long single line.
How to add multiple line codes inside an Highlight component?

Assuming you are using react-highlight, the easiest way is probably to use <br>'s. It seems like using the innerHTML prop should also be an option, but from my (limited) testing, that functionality appears buggy.
import React, {Component} from 'react';
import Highlight from 'react-highlight';
class App extends Component {
render() {
return (
<div>
<Highlight language='javascript'>
const varOnLine1 = "abc";<br/>
const varOnLine2 = "def";<br/>
const varOnLine3 = "ghi";
</Highlight>
</div>
);
}
}
export default App;