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.
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 am trying to add a plugin to the classic build of CKEditor5. I have followed the instructions on this page: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
I can tell that I've done everything properly since everything works as it is supposed to when I open up the sample/index.html.
Now comes the time to integrate this custom build with my react app.
The instructions on this page, 'describe' what to do:
You will create a new build somewhere next to your project and include
it like you included one of the existing builds.
It says to 'include it like you included of one of the existing builds'. Well, this is how I included the classic-build:
import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "#ckeditor/ckeditor5-react";
import ClassicEditor from "#ckeditor/ckeditor5-build-classic";
import "./styles.css";
function App() {
return (
<div className="App">
<CKEditor
editor={ClassicEditor}
// Other Props
}}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
So, I would assume that I would do something like this:
import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "#ckeditor/ckeditor5-react";
import ClassicEditor from './ckeditor/ckeditor'
import "./styles.css";
function App() {
return (
<div className="App">
<CKEditor
editor={ClassicEditor}
// Other Props
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
That is, simply change the import statement from:
import ClassicEditor from "#ckeditor/ckeditor5-build-classic";
to
import ClassicEditor from './ckeditor/ckeditor'
With ./ckeditor/ckeditor/ being the ckeditor.js file found in the build folder of my modified version of the custom build.
But, this does not work. There is no export in the new ckeditor.js file. Neither a default export nor a named export. So perhaps I should import the file like this:
import './ckeditor/ckeditor'
But then how do I tell the React component which editor to use. There is an editor prop, which takes the name of the editor to use -- namely:
<CKEditor
editor={ClassicEditor}
// Other Props
/>
So I am stuck. I have no idea how to include the custom build into my react app.
Any ideas?
Thanks.
The CKEditor team helped me solve this problem. You can read the solution here: https://github.com/ckeditor/ckeditor5/issues/2072#issuecomment-534987536
The main point was that I needed to publish my customized build as an npm package, install that package on my site and then import the installed package.
Once I did that, everything worked just fine.
Forget what you know about customizing cke4 then read this
Steps to customize your CK5 Editor
fork the ckeditor5 classic build
clone your new fork
customize the ckeditor (I used the online build tool)
build the editor with $ npm build
add & commit changes
push your commits to your forked repo
clone your forked repo to your existing project and use the ckeditor from YOUR build.
This process is not very straight forward and the documentation on it is non-existent at best. Hopefully my pain is your gain!
Extra
The online build tool has you download a .zip and what I did was overwrote my forked project files with the ones form the zip. I built, uploaded, etc. Make note that the config for the toolbar is inside the sample/index.html if you don't add that then you won't see your toolbar.
Remember to add the toolbar config!
** EDIT **
If you're working on a team you'll want to go with the version at the top.
Simpler
Use the Online Build Tool
download the zip to your project
go to the folder in git and npm install
edit your ckeditor.js to include the config from sample/index.html (I put everything in my Editor.defaultConfig)
in the same folder run npm build
go to your main project and import ckeditor from the build you just made eg import ClassicEditor from './online-build/build/ckeditor';
in the project folder run npm build
If everything works except you don't have a toolbar then you need to re-examine your config setup.
Cheers!
** EDIT **
I wanted to add the "source editing" plugin which doesn't seem supported (??) What I did was manually snagged the source-editing code from the ckeditor5 main git (all the plugins are listed at the bottom) then pasted that code into my project and imported from that folder. This is all a bit chaotic and it's not suitable for teams BUT IT WORKS - good luck
import SourceEditing from './ckeditor5-source-editing/src/sourceediting.js';
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
Every time I refresh the page the font-awesome icons are being displayed big. Seems like the css in being loaded before applying the proper size because right after the refresh it shows big, and then goes to the right size.
I tried some solutions I found online but none of them worked.
Right now I'm back to square one where I have these:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebook } from '#fortawesome/free-brands-svg-icons'
import { faTwitter } from '#fortawesome/free-brands-svg-icons'
import { faLinkedin } from '#fortawesome/free-brands-svg-icons'
import { faEnvelope } from '#fortawesome/free-solid-svg-icons'
import { faMapMarkerAlt } from '#fortawesome/free-solid-svg-icons'
and then use them like this:
<FontAwesomeIcon icon={faFacebook} color="white" size="2x"/>
I didn't need to import any css but I did install following this link:
https://www.npmjs.com/package/#fortawesome/react-fontawesome
Basically I installed those:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
If someone could give me a direction on what to look for it would be great.
My project is hosted at Github (https://github.com/palomaschkrab/keto-ui)
And you can run it with "npm run dev" and go to localhost:3000/about_us if you want to see it happening.
This is a very common bug when using Font Awesome icons with static site generators that use server side rendering, like Gatsby.js and Next.js.
The cause is the fact that the icon is being rendered before the CSS is loaded.
You can fix this by loading the CSS manually in your root component, and then preventing Font Awesome from loading it again so you don't have duplicate classes.
Add the following to e.g. layout.js or index.js:
// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import '#fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '#fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
More info can be found in this Github issue.
I've seen this before when browsing some pages, most notably www.getbootstrap.com
Only happened with Firefox and I found that Ctrl+F5 would fix the problem. As soon as I opened another URL on the same site, that effect returned. Never found out what was causing it, as I then decided to go to Chrome.
I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.