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;
Related
Sorry for my bad english and a new learner programming.
I have a single problem with React.JS in App.js,
I have written an exterrnal JS file, called Fundamental.js, the code is the following:
const testing = () => {
console.log('test log 12456');
}
export default testing;
When I import Fundamental.js file into App.js, my VS Code shows a popup message:
'testing' is defined but never used.
how to solve it?
the import list in my React App.js is:
import logo from './Linux_Logo.png';
import './App.css';
import testing from './FundaMental';
Thank you so much to whoever solves my problem!
Welcome to SOF. In your component testing should be Testing [capitalized] and In testing nothing is returned that's why showing this in the terminal. Try this plz:
import React from 'react';
function Testing() {
return (
console.log('test log 12456');
)
}
export default Testing
when importing:
import Testing from './FundaMental';
It is better to keep the same name of the function name and the js file name.
VS Code is saying that you imported a function but you're not using it.
Your testing module defines the function testing. It doesn't execute it.
There are two ways to get rid of the warning:
Call the testing function in App.js, or
Don't import it into App.js.
If testing is the beginning of a React component then follow #Pabel Mahbub's answer, including the suggestion to rename the function Testing and rename the file Testing.js. As your app grows that will make it easier to manage.
This is only a warning/reminder that you import something but you never used it. React has this kind of checking that will warn us of the unusual code that we have. To fix this warning either trigger the function or remove it. Hope this helps!
I have a string that is the name of the icon I want to import/require and I'm trying to import/require the SVG file that I want to use in React Native dynamically. My initial idea was this:
const icon = require(`#src/assets/icons/${iconName}`)
However, I realized that this would not work and that I need to have all my icon options imported. This is why I created an Icons.ts file from which I'm trying to require and then export all my icons like this:
const Icons = {
ArrowRight: import('#src/assets/icons/ArrowRight.svg'),
ArrowLeft: import('#src/assets/icons/ArrowLeft.svg'),
};
export default Icons;
And then I attempted to use them in my component like by hardcoding Icons.ArrowRight:
{leftIcon && <IconContainer>{Icons.ArrowRight}</IconContainer>}
Which unfortunately didn't work and I got the following error:
Objects are not valid as a React child.
If I import an icon straight in my component like this:
import Close from '#src/assets/icons/close.svg';
I can then use it like this:
<Close />
You need to execute the icon component.
<IconContainer><Icons.ArrowRight /></IconContainer>}
Maybe this question is trivial, but researching in several import/export docs did not give me an answer. I am trying to understand a code snippet that starts with the following imports on a CodePen example:
const Point = ol.geom.Point;
const RMap = rlayers.RMap;
I would rather expect module imports like this:
import { Point } from "ol/geom";
import { RMap } from "rlayers";
I thought it might be related to some hidden CodePen functionality, but also could not find an explanation. The CodePen is here https://mmomtchev.github.io/rlayers/#/add_delete when you click on the CodePen button. You can see in the JS settings that the CDN https://cdn.jsdelivr.net/npm/rlayers#1.4.1 was added. But I don't see how this would allow
the syntax given above. It did also not work, when I tried on a new CodePen.
In your Pen's settings, go to the JS panel and scroll down to add packages there. You can load in packages from Skypack that way, and they'll appear something like:
import * as React from "https://cdn.skypack.dev/react#17.0.1";
import { useState } from "https://cdn.skypack.dev/react#17.0.1"
(or whatever you want to install)
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>
)
}
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;