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;
Related
I am trying to use highlight.js with react but the syntax highlighting is now working.
I am trying to store the highlighted syntax inside a variable but the whole content is displayed without highlighting with highlight.js span tags.
import React from "react";
import hljs from "highlight.js";
const test = `const test = require('test')`;
const tt = hljs.highlightAuto(test).value;
function App() {
return (
<>
<pre>
<code>{tt}</code>
</pre>
</>
);
}
export default App;
I think react-highlight is built on top of highlight.js
As you can see below the my react component is not rendering also in vscode its greyed out (line 2 first picture).
Dont know what I am doing wrong
import React, { Fragment, useEffect } from 'react';
import counterComponent from './components/counterComponent';
function App() {
return (
<Fragment >
<h1>hello</h1>
<counterComponent/>
</Fragment>
)
};
export default App;
First of all capitalize your component names. so CounterComponent instead of counterComponent.
Second you're exporting counterComponent twice.
export const ....
and export default in the bottom. Choose one and change your import according to whichever you choose..
You need to import counter component with {}
As its export const
Import {CounterComponet} from …
because you are doing something wrong counterComponents correctly, look at you App.js file or the second Image and look at line number 2(it is a little dark-ish) because you are not using it right.
Also you are default and modular exporting counterComponent do any one of them, I usually do it like this
import React, { Fragment} from "react";
function counterComponent () {
return (
<Fragment>
<h1>hello</h1>
</Fragment>
);
}
export default counterComponent;
If that doesn't work, My suggestion is check again if there is not any spelling mistake or you are importing from the right location
I am making a container for a d3 line graph that I'm going to create, my format so far is this:
import React from "react";
import AnalyticPads from "../AnalyticPad/AnalyticPad";
import Pad from "../AnalyticPad/Pad";
import MainContent from "../AnalyticPad/MainContent";
import Extention from "../AnalyticPad/Extention";
const GraphPad = () => {
return (
<AnalyticPads properties={{height: "200px"}}>
<Pad>
<MainContent>
</MainContent>
<Extention>
</Extention>
</Pad>
</AnalyticPads>
)
}
export default GraphPad;
And my "AnalyticsPad" looks like this:
import React from "react";
const AnalyticPads = (props) => {
return (
<div className="analytic-pad-container">
{props.children}
</div>
)
}
export default AnalyticPads;
What I want is that there will be a grid of "Pads" and I want this "AnalyticsPad" to provide default styles for each pad, for example if I want each pad to have a height of 200px I set it in this wrapper and then for any individual pad that I want to differ from the default I can overide it.
The "MainContent" component is where the line graph will be and any extra information will be put inside the "Extention" which will render if a button is pressed.
Throughout my react app I keep using the context api to provide the data to the children components, but I know ( or think ) it is bad practice to do this, from what I understand context should only be used for providing data to global components.
What is best practice?
please don't answer with a solution for class components as I have never used them before as I am new 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>
)
}
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'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;