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
Related
Just like we'd do
import * as React from 'react';
and then for example
const [state, setState] = React.useState(false);
I would like to import a bunch of my exported stuff from a folder to then access using dot-notation of the imported module.
For example, an "AppBar" component using "AppsButton", "HomeButton", "BugReportButton" and "HelpButton", which I put as jsx files in the same folder. These files each "export default" functions for their views. I would like to do:
import AppBar from '#mui/material/AppBar';
import * as AppBarContent from ".//AppBar"; // hopefully the correct syntax for the folder named "AppBar", which this file sits in
and then use each component in the view like:
<AppBar>
<AppBarContent.AppsButton />
<AppBarContent.HomeButton />
<AppBarContent.BugReportButton />
<AppBarContent.HelpButton />
</AppBar>
I looked about and found this resource, but wasn't certain it's the same thing I'm after and when I made the suggested index.js with the following content it didn't change anything (I could've done it wrong).
index.js:
exports.AppsButton = require("./AppsButton");
exports.HomeButton = require("./HomeButton");
exports.BugReportButton = require("./BugReportButton");
exports.HelpButton = require("./HelpButton");
exports.HelpDrawer = require("./HelpDrawer");
Any single resource or some steps how to achieve this please?
You cannot have more than one default export in one file. Use named exports as follows:
appbar.js:
export const BugReport = () => <div> bug </div>
export const Header = () => <div> header </div>
export const Footer = () => <div> Footer </div>
Then you can import and use them as follows:
header.js
import React from "react";
import * as Appbar from "./appbar";
function Header(props) {
return (
<div>
<Appbar.BugReport/>
<Appbar.Footer/>
<Appbar.Header/>
</div>
);
}
export default Header;
I actually found the solution to this when checking out some coding standards for React:
One point says "Create a index.js within each folder for exporting".
Source: https://www.jondjones.com/frontend/react/react-tutorials/react-coding-standards-and-practices-to-level-up-your-code/
After I've added an index.js to each folder that imports all components in that folder and then exports them all, I can import individual components from that folder level as a "module" (apologies if terminology incorrect) and also import all as a named source that I can access using dot notation.
Note that for this to work the imports (of indexed exports) must now include curly braces.
For example all the buttons going into a new folder "buttons" and having an index.js:
import AppsButton from "./AppsButton";
import HomeButton from "./HomeButton";
import AppHomeButton from "./AppHomeButton";
import HelpButton from "./HelpButton";
export {AppsButton, HomeButton, AppHomeButton, HelpButton}
Then the AppBar.js a folder up can do either:
import {AppsButton, HomeButton, AppHomeButton, HelpButton} from "./buttons"
with
<AppBar>
<AppsButton />
<HomeButton />
<BugReportButton />
<HelpButton />
</AppBar>
or:
import * as buttons from "./buttons"
with:
<AppBar>
<buttons.AppsButton />
<buttons.HomeButton />
<buttons.BugReportButton />
<buttons.HelpButton />
</AppBar>
(I went for the former in this case, but I can see now how in other areas of my code-base I could have things like appBarContent.buttons.AppsButton reused elsewhere using this approach...)
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.
Hope You are doing great and in good health.
I'm a beginner in React.js and doing my FYP project, I come to a problem where I'm not able to insert external JS or Jquery code inside the react,
I have tried many npm and mentioned processes in StackOverflow, but that not work?
What should I do? where I import these scripts ??
//import all libraries here
import React, { Component } from "react"; //importing react
import $ from "jquery"; // be sure to do npm install jquery
import some_library from "./path/to/some/library"; //importing directly from .js file
class App extends Component {
render() {
return (
...
);
}
}
export default App;
If you want to use, plain JavaScript/JSON to render its relevant DOM, I recommend to go with functional components.
import React from "react";
const example = () => {
return (
<div className="App">
<h1>Hello World</h1>
<h2>This is inside a function</h2>
</div>
);
};
export default function App() {
return example();
}
Hi guys I'm trying to make a jigsaw website using react. I found a library called snapfit.js that can generate simple jigsaws from a png file. The problem is that I need to get this script working in a react component.
Currently I import the snapfit.js file in my index.html and when I open the console in chrome I can see that snapfit got added to the window (snapfit.window). I cant seem to find a way to make use of it in my react component though.
Currently I have:
import * as React from 'react'
import mole from '../assets/mole.png'
import {Helmet} from 'react-helmet'
import Button from 'react-bootstrap/Button'
export class PuzzelSnapfit extends React.Component {
render(){
return (
<div>
<h2>Demonstration</h2>
<div><img src={mole} onLoad={alert(this)} />
</div>
</div>
);
}
}
export default PuzzelSnapfit
I also tried using react-helmet like this:
<div><img src={mole} onLoad={window.snapfit.add(this)} />
When I try executing it that way I get a toUpperCase of undefined error, so it seems that this is undefined. I also tried loading the image into state but then I also get a undefined error.
Any help would be appreciated because I really dont know what else I could try except for maybe injecten a html file into my component but that also has its downsides.
You can import external scripts into your react js files by using the import statement.
example (your file where you want to use snapFitFunction1() and snapFitFunction2()):
import * as React from 'react'
import mole from '../assets/mole.png'
import {Helmet} from 'react-helmet'
import Button from 'react-bootstrap/Button'
import { snapFitFunction1, snapFitFunction2 } from './snapfit.js';
...
In your snapfit.js file, you should have a export statements for snapFitFunction1, and snapFitFunction2.
example (snapfit.js):
function snapFitFunction1() {
console.log('Foo');
}
function snapFitFunction2() {
console.log('Bar');
}
export snapFitFunction1;
export snapFitFunction2;
You may have to add exports for functions you want to use from the snapfit.js file.
You can call the external library in componentDidMount instead of React helmet like this:
const snapJs = (yourScriptPath) => {
const script = document.createElement("script");
script.src = yourScriptPath
script.async = true;
document.body.appendChild(script);
}
componentDidMount () {
snapJs("snapfit.js")
}
If you prefer using React Helmet then this would be the correct way:
import {Helmet} from "react-helmet";
const PuzzelSnapfit = props => (
<div>
<Helmet>
<script src="snapfit.js" type="text/javascript" />
</Helmet>
</div>
);
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()