I'm working on a React project, and creating a component called SVGLogo that simply imports an svg and exports as a component. I noticed that when I use require() to import my svg file, it works fine:
const SVGLogo = require('../../../../../vft-site/src/images/logo.svg');
But my linter suggests I use the import statement. I changed it but now I get the error 'cannot find module... or its corresponding type declarations':
import SVGLogo from '../../../../../vft-site/src/images/logo.svg';
Why are these different?
import comes in es6 like a new feature and require can be called from anywhere but import can be called on top of script
Related
I'm using functional components and exported a function and imported this function in my App.js.
How do i use that component, for some reason editor doesnot take the component.
I'm also using scss, anyone please check if the process of adding scss is correct or not!!
In react to import & exporting a file there is a naming convention.
You should perform these changes to your App.js and skeletion_loader.jsx file.
In skeleton_loader change the function name from this skeletonLoader to SkeletonLoader and in the App.js file import it as import {SkeletonLoader} from "../xyz.jsx";
When we write code in index.js file in src folder of an React app first of all we write this line:
import React from 'react';
I know react is a package
But I want to know what is React basically
an object, a method or something else.
The React variable that you import is an object, and it contains most of the methods that are used by React when generating a web-page.
The reason this import has been historically required is because the JSX that you write (e.g. return <p>text</p>) gets converted into a function call, calling the React.createElement function.
Note that in newer versions of React you no longer need to import react when using JSX. See https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more information.
Credit to Olivier Boissé for an answer in the comments.
In order to find out what React is, you just need to write:
console.log(react);
Then you will see that it is an object with many properties and methods.
String:
import React from "react";
We are writing in order to import this object into a file where we will use some of its method. If you don't use anything from React in the file, then you don't need to import it.
For example, in react 18, it is no longer necessary to import the react object into a file index.js
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
In any case, at this stage of your study of react, it may not be entirely clear to you what is used in it and for what, but in the future you will become more aware of all the possibilities of react. There is a time for everything
React error message wont construct my code
I'am confused on the pathway and terminal .....
Ive already tried changing the name of my app and that doesn't work
https://gist.github.com/patrowheels/fece9597d6862094a1a3672b9d6cdecf
You are importing as:
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"
Yet, you say your file names are header.js, footer.js, etc.
Try importing as:
import Header from "./components/header.js"
import MainContent from "./components/maincontent.js"
import Footer from "./components/footer.js"
so the filenames match.
I'm trying to import an SVG file as follows:
import ExampleIcon from './icons/example.svg';
But I'm getting a render error:
Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/example.edcd2c8d.svg') is not a valid name.
How can I use a simple import without needing to cast ExampleIcon as a React Component as follows?
import { ReactComponent as ExampleIcon } from './icons/example.svg';
I'm trying to keep my code standardized within the code base, so I would prefer to avoid using the ReactComponent method where possible.
I realised I needed to use react-svg-loader to achieve the result I want, as React disallows SVG imports otherwise.
I'm developing React with TypeScript
What I want to do is to use React component library without #types definition.
I'd like to use this library
https://github.com/react-component/calendar
In my React code, I wrote as below
import * as React from "react";
import * as ReactDOM from "react-dom";
import Calendar from 'rc-calendar';
ReactDOM.render(<Calendar />, document.getElementById('content'));
but I get error:
ERROR in ./index.tsx
(4,22): error TS2307: Cannot find module 'rc-calendar'.
I'm guessing this is because there is no type definition but the library above seems not have type definition file for typescript.
How could I use such library with TypeScript?
In TypeScript 2.1, unless you're using --noImplicitAny, you will be able to just use this library without declaration files (provided that it's installed).
But since TS 2.1 isn't out yet, what you can do is create a file called externals.d.ts with the following content:
declare module "rc-calendar";
That basically tells TypeScript "hey, this thing exists, stop bugging me, and I want to use it however I want."
You can also give it a slightly better shape.
declare module "rc-calendar" {
declare var calendar: any;
export default calendar;
}
Now this thing can only be imported as a default import.
You can continue fleshing this thing out until it is sufficiently detailed.