I started learning react. Started a React app with my commant prompt, everything is downloaded correctly, but the app that was started does not contain components. Every tutorial I try their apps start with this line in App.js file import React, {Component} from 'react'; but I don't have that.
Components are actually started with 'class App extends Component', but I dont have that. There is also no render method in this component.
I do not know what to try.
function App () {
return (...)
}
Follow this path if you copied your project from another external source :
Create a folder
Go to cmd of the current folder
In your cmd write:
create-react-app myapp
When the download finished,
In cmd write code .(this opens visual studio code and opens your react files)
Or simply open your editor and open folder in it
In cmd (terminal) of your project folder write npm start, and your app will load on localhost:3000
finally answer of your question You can edit your project, by going to src folder and editing app.js
update
* I checked create react app myself it seems In the new version of create-react-app
It doesn't create class-based component anymore (it creates a function based component) and you need to change it to class-based component manually if you want to.*
Update2, to change function based to class ,delete app.js codes and replace these:
Import React , { Component } from "react"
class App extends Component {
Render() {
return <div> test </div>;
}}
export default App;
Hope this helps you
Related
I'm new to react and I'm trying to implement a Navbar or any other component using React-bootstrap 5 . when I do npm start nothing is being displayed on the live server.
SCREENSHOTS ARE ATTACHED IN LINK
AS SOON AS I AM IMPORTING SOMETHING LIVE SERVER IS DISPLAYING NOTHING AND THE ERROR IS GENERATING
Compiled with warnings.
src/App.js
Line 1:8: 'react' is defined but never used no-unused-vars. DELETED EVERYTHING AND STARTED FROM SCRATCH 3 TIME.
First of all be sure to import the component navbar into your app component if you intend to modulize the project. Then i'd try to change the "const navbar = () => { " into "function Navbar{" and try to add ; after return )
I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
Due to some poor planning and some problems with domain registration I'm building a quick react app that's only function is to redirect to another site when the page loads. To do this I created a component like so:
class App extends React.Component {
componentDidMount() {
window.location.replace("insert url here");
}
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
This method works perfectly when in development, but does not perform the redirect when the project is built by netlify. Is there a way to fix this and if so why does this happen?
After looking at it further I realized the issue was with netlify. I'm posting because I discovered a couple of things that could make building react projects with netlify a little bit complicated and I want others to be aware. ALWAYS change the build directory from public/ to build/ with a react application and make sure your build command is either npm run build or CI=npm run buiild or your production scripts will not be added to your main html file properly.
Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:
import * as React from "react"; //red underline under "react"
import "./App.css";
import logo from "./logo.svg";
class App extends React.Component {
render() {
return <h1>Hello</h1>; //red underline under <h1> and </h1>
}
}
export default App;
that way I just can't write any jsx code here, because it always appears the issue:
test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
Can somebody please help me with this?
How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the #types packages along side React's dependencies, eliminating your problem.
Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).
Happy hacking!
I solved this issue by reloading VSCode.
ctrl+shift+P > Developer: Reload Window
I often get this message even at the beginning when I run my code:
"You attempted to import ______which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/." Did not have this problem before.
What I don't understand if why it happens even when files etc are within src directory? And I have not moved anything. All attempts at doing a React JS project is a fail, as a result.
I considered the issue could be the installation of ESLINT or webconfig as guessed by someone. I am in the very beginning of my code when I get this error message. This happens from all the create-react-app work I do.
This is the code in my App.js
import React, { Component } from 'react';
import Layout from './components/Layout/Layout';
import BurgerBuilder from '/containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render() {
return (
BurgerBuilder
);
}
}
export default App;
This problem apparently occurs if React is an older version (15 in this case when it should be React 16).