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 )
Related
I'm trying to create the most basic react app using antd but it renders a blank page. I used a venv, ran npx create-react-app . and replaced the default App.js file contents with the below example from the antd website. Can someone please advise?
App.js:
import React from 'react';
import { Button } from 'antd';
import 'antd/dist/reset.css';
import './App.css';
const App = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
Terminal output:
Compiled successfully!
You can now view antd-examples in the browser.
Local: http://localhost:3000
On Your Network: http://10.5.0.2:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
I was expecting to see a button show up with the above code given there were no errors or warnings but just saw a blank screen instead. Note that when I use the starter code generated from running npx create-react-app . the page renders fine and I see the slowly rotating react symbol.
Edit:
There is some messages in the console log. You can see it here in pastebin.
The package.json file contents are here on pastebin.
The problem in this case is that the antd dependency is missing in the package.json. After installing it with yarn add antd the code works like expected.
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
I'm using a bootstrap theme into ReactJS app. Everything works except the NavBar transition/animation effect on scrolling isn't working. I have noticed in the projects GitHub they are using a script. They are referring this script in the index.html page (the last line within the body tag).
Now, I'm trying to get it working in my ReactJS app but without luck so far. I've created a navbar component and imported into App.JS. I've used same id, "mainNav" for the tag with in my navbar component, but I've noticed that an error in the script. It says "undefined is not an object(evaluating '$("#mainNav").offset().top > 100)' in the browser.
Could you please point me what I'm doing wrong? How can I get the same effect using ReactJS?
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
I'm trying to get Icons working with Gatsby but it they don't seem to be showing in the production build.
I am importing the icons like this
import {
initializeIcons
} from "office-ui-fabric-react"
and calling the function like this
initializeIcons()
which is all in my index.js page file. This works fine when running gatsby develop however when i run gatsby build && gatsby serve the icons show up like this.
However, when I look inside Chrome dev tools, i can see the icon fonts being downloaded.
so i am assuming it is something to do with the static render of gatsby. I started with this template https://github.com/microsoft/gatsby-starter-uifabric
Any help is appreciated.
I had the same issue. After trying a bunch of work-arounds, I ended up using office-ui-fabric-core instead.
Install the library:
npm i office-ui-fabric-core
Import the ui-fabric-core css
import "office-ui-fabric-core/dist/css/fabric.css";
example icon component:
import React from "react";
const MyIcon = ({iconName}) => <i className={`ms-Icon ms-Icon--${iconName}`} aria-hidden="true"></i>
export default MyIcon;
Example usage:
<MyIcon iconName="People" />
The answer was to use the initializeIcons(undefined, { disableWarnings: true }) method outside of the App class code, just above it will do fine.
To quote the wiki article on the use of this method
If your code is running in an environment where icons may have already been registered, you may need to disable the warnings. (By default, registering the same icon twice will ignore subsequent registrations.) To initialize icons and avoid duplication warnings, pass options into initializeIcons:
https://github.com/microsoft/fluentui/wiki/using-icons