I have created a react app using the command create-react-app my-app
and when I build and start its working fine using npm start
Now I added one .JS file inside the SRC folder and used the tag inside App.Js
Here is the below code for that component
import React from 'react'
class Footer extends React.Component {
render() {
return (
<div>
<h1>It's a bit chilly out there</h1>
</div>
);
}
}
export default Footer;
After that I have added the Component into App.JS
class App extends React.Component{
render() {
return (
<>
<div>
Test Component created using Class
<Footer/>
</div>
</>
);
}
}
export default App;
After successfully compilation when I ran my app, I got empty browser and also get error in Console.
From the screenshots, i have understood to change the case used to name the react components.
Is your footer component named as Footer.js
Is your App component named as App.js
Comment if the above changes worked.
Related
I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error. Below I am sharing the code of App.js file and the browser generated error.
import React, { Component } from 'react'
import './App.css';
import PlayList from "./componentes/PlayList"
import SearchBar from "./componentes/SearchBar"
import SearchResults from "./componentes/SearchResults"
class App extends React.Component{
//code to be written
}
function App() {
return (
<div>
<h1>
Melophile
</h1>
<div className="App">
<SearchBar onSearch={this.search}/>
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/>
<PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} />
</div>
</div>
</div>
);
}
export default App;
Browser error:
Compiled with problems:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)
11 | }
12 |
> 13 | function App() {
| ^
14 | return (
15 | <div>
16 | <h1>
Looking for experts help to solve this problem.
The error you are seeing is because you have these two things:
class App extends React.Component{
And
function App() {
Therefore, there is a problem identifying what you are referring to. You either need to rename one of these places or decide what you want to work with (class or functions).
You have a class named App and a function named App. You can't have two things named the same.
What it appears you've done is mixed class-based React syntax with more modern functional syntax. Since you don't have anything written inside the class yet, it seems safe to assume you're not actually using class-based syntax, so you can simply remove the class (delete the following)
class App extends React.Component{
//code to be written
}
In your code you declared App class and then declare App function. So It's giving that App is already declared.
class App extends React.Component{
//code to be written
}
function App() {
So you can do,
Rename any one
Remove any one
Declare function inside class with diff name of class or function
you can use class based component or hook based component. you can't use mix of them.
you can look for more detail information.. https://reactjs.org/docs/hooks-intro.html
I am using npx create-next-app to create my NextJs project and now I want to add global style for it by bootstrap
After downloading bootstrap, it suggested me adding global style in pages/_app.js but I found no file like it. Thanks for helping me
when you make a new Nextjs project you don't have this file
you should create this file in root pages
_app.js or _app.tsx (if you use typescript)
const MyApp=()=>{
return(
enter code here
)
}
export default MyApp
You create your pages/_app.js, you place code below
import React from 'react';
export default function App({ Component, pageProps }) {
return (
<Component {...pageProps} />
);
}
To add bootstrap, you create styles folder in /public, you add your .css file of bootstrap (imagine it's bootstrap.css). After, you add import to your app.js file, and the example below:
import React from 'react';
import "../styles/bootstrap.css";
export default function App({ Component, pageProps }) {
return (
<Component {...pageProps} />
);
}
The possible reason you don't have app.js is because you didn't build your project yet
Add _document.js file in pages/_document.js, you can add your global style in this file index.jsx see documentation:
Custom Document Next.js
I am beginner to react....
I am trying to convert a website into react by breaking it into components.
My question how can I include my js files..
Will the code work if I include the js file in index.html or do I have to separate js code for each components ?
Some of the js code are required for each components.
You could just put the JavaScript code in the component which uses it. If you have a slider, you can put the JS functions, which control said slider in a <slider/> component.
Read Thinking in React
You can use create-react-app, this will create a demo project of React.
You can either write the component code in one file which will be App.js or if you want then you can create different files of every component. index.js will be the entry JS file, so the ReactDOM.render will take place in that file.
//App.js
import React, { Component } from 'react';
import FirstComp from './FirstComp';
class App extends Component{
render(){
return(
<div>
{/* JSX Statements */}
<FirstComp />
</div>
);
}
}
export default App;
//FirstComp.js
import React, { Component } from 'react';
class FirstComp extends Component{
render(){
return(
<div>
{/* JSX Statements */}
</div>
);
}
}
export default FirstComp;
Try FullStack React
import * as something from './something.js';
Now that you have imported the something.js file, you can call any function in something.js file.
something.someFunction()
I am making an application in electron using reactjs. O am using reactstrap as well. I have the main page named as app.js and want to go to a different page on a button click.
Background: The main page is called app.js and I want to go to an info page named info.js
info.js is exported as shown below
import React from 'react';
import { Alert } from 'reactstrap';
class Info extends React.Component {
render() {
return (
code is here
);
}
}
export default Info;
App.js is as follows as well
import React from 'react';
import { Alert } from 'reactstrap';
class App extends React.Component {
render() {
return (
code is here
);
}
}
Take a look at React Router setup Info.js as a route then use a Link to get to it, here is a good example by React Training.
I have the following hierarchy in my project
project
- node_modules
- public
- src
- components
- CustomGrid.js
- App.js
as well as the other standard files in any React project: package.json, README, package-lock.json, .gitignore.
CustomGrid.js contains the following code
import React from 'react';
import { Grid } from 'semantic-ui-react';
class CustomGrid extends React.Component {
render() {
return (
<Grid columns={2}>
<Grid.Column>
<p>Hello World</p>
</Grid.Column>
<Grid.Column>
<p>Hello World</p>
</Grid.Column>
</Grid>
);
}
}
export default CustomGrid;
App.js contains the following code
import React, { Component } from 'react';
import CustomGrid from './components/CustomGrid';
class App extends Component {
render() {
return (
<CustomGrid />
);
}
}
export default App;
The output I get is as follows
However, based on my code and the specification here, the two 'Hello World' statements should be side-by-side. What am I doing wrong?
It looks like you're missing the semantic ui css? See https://react.semantic-ui.com/usage#css
You need to install semantic css module
npm i semantic-ui-css
and then import it to your index.js
import "semantic-ui-css/semantic.min.css";
You can see the result at this codesandbox: SemanticGridTest
NOTE: this way you import the whole Semantic-css-library.
It's ok for development but not for production.