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.
Related
I've been stuck with this error and couldn't fix it even after googling.
it says 'Module not found: Error: Can't resolve'.. based on researching on google, it appears that this happens when the import statement cannot find the file at the declared path.
But there clearly is a file named 'Button.js' in my src/components folder.
I am not sure what is wrong. Would really appreciate your help!
A fix you could do is either exporting Button module as default in the end of Button.js file like
export default Button;
Or either import the button module in braces like :
import { Button} from “./components/Button”
If you haven’t set the base url as src:
As you are using relative paths and /components/Button.js is upper than the page directory so you have to use .. to come out of the pages directory and then read /pages/Home.js
So you should use ../Button.js instead of ./componets/Button.js
try
import {Button} from './components/Button.js'
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
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
Hi I am new to react I am trying added new component called Test and try to use it the app.js imported test into app.js but still get error. Below you can find stackblitz url Thanks in Advance.
Stackblitz url
import Test from './components/test'
Implement this line, make sure that c is written in lowercase in component/... path OR just copy the line above and replace yours with it. That will work for sure.
Issue in your sandbox is Components whereas your folder name is components:
import Test from './Components';
and you need to complete file path if your not using index.js as reference i.e
import Test from './components/Test';
Here is demo: https://stackblitz.com/edit/react-vcw5a8?file=src%2FApp.js
Two ways to go here: Either you import the File directly like this:
import Test from './components/Test';
or you create a index.jswithin the Components-Folder and add this:
import Test from './test.jsx';
export default Test;
Also, your Import-Statments are Upper-Case whereas you folder-name is lowercase, so you'll have to adjust on or the other.
Would it be possible to import * from multiple files within the same import declaration i.e
Imports would usually be made with one file as follows
import * as action from '../actions/ActionCreators'
Would the following be possible by some means?
import * as action from { '../firstActions/FirstActionCreators', '../secondActions/SecondActionCreators' }
whereby the same is import is made from two different directories/files.
Thanks
The best practice is to import only the required stuff. Since you are using ES6 you can try like this.
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router'