Since UIKit 3.0 is in beta I would like to use the stable version UIKIT2.27.4 with React and Meteor, however it is not detecting it. I have imported it as follows:
In meteor client/main.js is as follows
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import '../imports/jquery-3.2.1.min.js';
import '../imports/uikit/css/uikit.min.css';
import '../imports/uikit/js/uikit.min.js';
class App extends Component {
render() {
return (
<div>
<nav className="uk-navbar">
Kareri
<ul className="uk-navbar-nav">
<li>Home </li>
<li>Trekking</li>
<li>Hotels</li>
<li>Contact</li>
</ul>
</nav>
</div>
);
}
};
Meteor.startup(() => {
ReactDOM.render(<App />, document.querySelector('.container'));
});
How can i get uikit to work with REACT and METEOR?
Related
I am just started working with react js for couple of days it throws error like
src\App.js
Line 2:8: 'navbar' is defined but never used no-unused-vars.this error occurs while i am importing the navbar component into my app.js, i did install eslint package and update my npm version also,i really dontknow what to do .i would really appreciate if u guys provide solution
Below code is my app.js:
import React from 'react';
import navbar from"./components/navbar";
import './App.css';
function App() {
return (
<div className="App">
<navbar />
</div>
);
}
export default App;
below is my navbar.js code which i am trying to import in the app.js
import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";
class navbar extends Component{
render(){
return(
<nav className="navbarItems">
<h1 className="navbar-logo">React<i className="fab fa-react"></i>
</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((items,index)=>{
return(
<li key={index}>
<a className={MenuItems.cname}href={items.url}>
{items.title}
</a></li>
)
})}
</ul>
</nav>
)
}
}
export default navbar;
I keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
In my react app I am getting 'library' is not defined no-undef' error. I am trying to add font awesome in my app. I have write some code for this:
Error:
Failed to compile
./src/sections/header/header.js
Line 11: 'library' is not defined no-undef
Search for the keywords to learn more about each error.
header.js code
import React, { Component } from "react";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {
faGoogle,
faFacebook,
faTwitter,
fainstagram
} from '#fortawesome/free-brands-svg-icons';
library.add(
faGoogle,
faFacebook,
faTwitter,
fainstagram
);
class Header extends Component {
render() {
return (
<div className="social-icons">
<ul>
<li><FontAwesomeIcon icon="fafacebook" /></li>
<li><FontAwesomeIcon icon="fatwitter" /></li>
<li><FontAwesomeIcon icon="fainstagram" /></li>
</ul>
</div>
)
}
}
App.js Code
import React from 'react';
import logo from './logo.svg';
import './App.css';
import bootstrap from 'reactstrap';
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
library.add(fab);
You could add library import since import is not globally accessible to other component
import React, { Component } from "react";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { library } from '#fortawesome/fontawesome-svg-core'
import {
faGoogle,
faFacebook,
faTwitter,
fainstagram
} from '#fortawesome/free-brands-svg-icons';
library.add(
faGoogle,
faFacebook,
faTwitter,
fainstagram
);
class Header extends Component {
render() {
return (
<div className="social-icons">
<ul>
<li><FontAwesomeIcon icon="fafacebook" /></li>
<li><FontAwesomeIcon icon="fatwitter" /></li>
<li><FontAwesomeIcon icon="fainstagram" /></li>
</ul>
</div>
)
}
}
I am working on react app. I have include free 'react-fontawesome' in ny application. The issue is that a Regular and Brand fonts HTML is not rending in output HTML but solid fonts are working properly. How can i fix this issue?
App.js
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/free-solid-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { far } from '#fortawesome/free-regular-svg-icons'
header.js
import React, { Component } from "react";
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
<div className="social-icons">
<ul>
<li><FontAwesomeIcon icon={["fab", 'facebook']}/></li>
<li><FontAwesomeIcon icon={["fab", 'twitter']}/></li>
</ul>
</div>
import React from "react";
import ReactDOM from "react-dom";
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebook, faTwitter } from '#fortawesome/free-brands-svg-icons'
import "./styles.css";
function App() {
return (
<div className="App">
<ul>
<li>
<FontAwesomeIcon icon={faFacebook}/>
</li>
<li>
<FontAwesomeIcon icon={faTwitter}/>
</li>
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Look for icons here in github repo for fontAwesome
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}