I´m trying to use the official semantic-ui-react for the first time with React. I´ve built a brand new react application:
$ create-react-app test
And I then tried to add the same react image as follows in App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import { Image } from 'semantic-ui-react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className="ui container">
<h1>Hello World</h1>
<Image src={logo} avatar/>
<Image src={logo} size='mini'/>
</div>
</div>
);
}
}
export default App;
The result shows me 2 big react {logo} images, not mini or avatar styled:
Ideas of what I´m missing here ?
Semantic UI React requires a Semantic UI' CSS, you forgot to setup it, here is instuctions. We will also add an example setup with CRA soon.
You might have found your answer already, but not seeing it here, so adding solution for the same error I got while using Image component with svg icon
import { Image } from 'semantic-ui-react';
import { ReactComponent as Logo } from './logo.svg';
<div className="ui container">
<h1>Hello World</h1>
<Image as={Logo} title="logo" avatar />
</div>
Hope this helps some one!
Related
when i am run npm start in termianl then i am facing this type of error so I have no idea what I do...?
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
As noted by Dave, it is not necessary to import React anymore for JSX to work, so this ESLint rule is probably throwing the error, depending on your ESLint configuration.
You can either disable the rule on your configuration file or the ignore file or import React.
import React from 'react';
I am working on a SPA using React.
Currently, in production, user only sees a blank page when the app crashes.
So, I am trying to set a custom error page.
Since I am using BugSnag for error monitoring in my react app; I have used the ErrorBoundary provided by BugSnag.
Following is the code for initializing and placing the ErrorBoundary.
const bugsnagClient = bugsnag('8XXXXXXXXXXXXXXXbac')
bugsnagClient.use(bugsnagReact, React)
const ErrorBoundary = bugsnagClient.getPlugin('react')
ReactDOM.render(
<ErrorBoundary FallbackComponent={FallBack}>
<IntlProvider locale={language} messages={messages[language]}>
<Provider store={store}>
<App />
</Provider>
</IntlProvider>
</ErrorBoundary>,
document.getElementById('root')
);
Following is the custom error code:
import React, { Component } from 'react';
import fallbackVector from '../assets/500-error-vector.svg';
import { Link } from "react-router-dom";
export default class FallBack extends Component{
render(){
return(
<div className="container-fluid mt-3 mb-3 mt-md-5 mb-md-5">
<div className="row">
<div className="col-12 col--404 text-center">
<img src={fallbackVector} alt="page not found" />
<p className="mt-5 font-weight-bold">Something went wrong!</p>
<Link to="/">
<button className="btn btn-primary mt-3">GO TO HOME</button>
</Link>
</div>
</div>
</div>
)
}
}
Somehow, it is still showing the blank page.
There can be a possibility that error is happening outside of the React component tree and therefore it is not being caught by ErrorBoundry.
Any ideas about how to solve this issue?
If the error happens outside of the React component tree then it wouldn't be caught by the ErrorBoundary and the Fallback component won't be rendered.
If you have a reproduction case which triggers an error in the React component tree where this isn't working then please contact us at Bugsnag Support and we'll take a look.
Long-time WordPress dev and Gatsby/React/GraphQL rookie.
I am trying to emulate this Gatsby Github Displayer, which connects to the Github API via GraphQL and brings down information about your repos and then displays them on a page.
I'm looking to do things slightly differently and have both elements as components and then display one of those components on onto the main page of my Gatsby website.
Here's my repo with the error in it.
Here's my component:
import React from "react"
const RepositoryList = ({ repositories }) => (
<div>
{repositories.nodes.map((repository, i) => (
<div key={i}>
<h2><a href={repository.url}>{repository.name}</a></h2>
</div>
))}
</div>
)
export default RepositoryList
and my component that I want rendered on the homepage:
import React from "react"
import RepositoryList from "../components/repository-list"
const WebDevelopment = ({ data }) => (
<div>
<h1>My repositories</h1>
<RepositoryList repositories={data.github.viewer.repositories} />
</div>
)
export default WebDevelopment
export const query = graphql`
query RepositoriesQuery {
github {
viewer {
repositories(
privacy: PUBLIC
affiliations: OWNER
isFork: false
first: 100
) {
nodes {
name
url
}
}
}
}
}`
Here's how I'm trying to render it onto the homepage:
import React from "react"
import Layout from "../components/layout"
import Headshot from "../components/headshot"
import PMIEFOldWebsite from "../components/pmief-old-website"
import PMIEFNewWebsite from "../components/pmief-new-website"
import SEO from "../components/seo"
import "./mystyles.scss"
import JFedOldWebsite from "../components/jfed-old-website"
import JFedNewWebsite from "../components/jfed-new-website"
import WebDevelopment from "../components/web-development"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Digital Marketing Strategist<br />Front-End Web Developer</h1>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Headshot />
</div>
<p>I've been in the web business for a long time. I worked in the nonprofit world for 15 years. I went from staff assistant to program administrator to accidental techie to full-fledged web developer.</p>
<p>I'm currently a contractor at Dudnyk where I do front-end development on websites, email templates, and Google banner ads.</p>
<p>I'm a developer with experience in HTML, CSS, PHP and JavaScript. I'm building this site on Gatsby so that I can play around with ES6 and React and start realizing the possiblities that the JAMstack offers.</p>
<h2>Portfolio</h2>
<h3>Project Management Institute Educational Foundation</h3>
<p>I started as a program administrator and became the webmaster, email, and social media guy. I served as the staff technical expert and content manager for the rebranding and website redesign and migration from flat HTML files to Sitecore CMS.</p>
<div className="container">
<div className="columns">
<div className="column">
<h3>Before</h3>
<PMIEFOldWebsite />
</div>
<div className="column">
<h3>After</h3>
<PMIEFNewWebsite />
</div>
</div>
</div>
<h3 style={{ marginTop: `3.45rem` }}>Jewish Federation of Greater Philadelphia</h3>
<p>I was brought on as the technical project manager for the website redesign and migration from Drupal to WordPress. I stayed on as the solo web developer and email marketing manager.</p>
<div className="container">
<div className="columns">
<div className="column">
<h3>Before</h3>
<JFedOldWebsite />
</div>
<div className="column">
<h3>After</h3>
<JFedNewWebsite />
</div>
</div>
</div>
<WebDevelopment />
</Layout>
)
export default IndexPage
When I do, it throws the error: TypeError: Cannot read property 'github' of undefined.
Clearly there's something I'm not understanding, and I can't uncover anything in tutorials. Any assistance would be great.
Hiya it looks like you are using a page query in a component. For component queries you would need to use StaticQuery or the useStaticQuery hook. Check out these docs https://www.gatsbyjs.org/docs/static-query/ & https://www.gatsbyjs.org/docs/use-static-query/
I am trying to use the Carbon Design's UI Shell component.
I followed this blog to install all libraries, dependencies, etc.
Below is my code:
import {UIShell} from 'carbon-components-react';
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<UIShell>UIShell Placeholder</UIShell>
</header>
</div>
);
}
export default App;
When I run this code, I get:
"Failed to compile: ./src/App.js Attempted import error: 'UIShell' is not exported from 'carbon-components-react'."
According to the repository, UIShell is a component of carbon-components-react.
Why am I getting this error?
If you look in ./node_modules/carbon-components-react/lib/index.js, you will see that, although UIShell is defined in .../lib/components/, it's not exported.
So the question is actually... how can we access the UIShell components from the carbon-components-react component library when it's not exported?
I have found that that it's possible to import the UIShell component library explicitly:
import {...} from 'carbon-components-react/es/components/UIShell'
Or, if you are not using ESM, I think that you could require the components via the following:
require('carbon-components-react/lib/components/UIShell')
I have written a code for my website and unfortunately, i am not able to load images that are located in my local library. I have moved my images folder inside 'src' folder, but the image doesn't load at all.
Here is the code for my component called 'Landscape' which I am trying to load.
Code:
import React, {Component} from 'react';
import {Grid, Button, Row, Col, Thumbnail} from 'react-bootstrap';
import 'react-bootstrap-carousel';
import './Landscape.css';
export default class Landscape extends Component{
render(){
return(
<div className="thumbnails">
<Grid>
<Row>
<Col xs={6} md={4}>
<Thumbnail src=".Pictures/1.jpg" alt="242x240">
<h3>Elephant</h3>
<p>zoo</p>
<p>
<Button bsStyle="primary">Like</Button>
{' '}
<Button bsStyle="primary">Dislike</Button>
</p>
</Thumbnail>
</Col>
</Row>
</Grid>
</div>
);
}}
If you have a few images you can just import it directly in your component
import logo from './Pictures/1.jpg';
Then call it
<img src={logo} alt="logo" width={"240"} height={"240"} />
if you have hundreds of images because you can’t use import paths, you have to create a images folder in the public folder and use this code.
//This is the regular way.
<img src={process.env.PUBLIC_URL + 'images/profile.svg'} width={"200"} height={"200"} className="profile-img" alt="profile" />
Another way you can specify each component has a images.js file, then import all the images that retarded of that component in images.js and name it as the related component name
images.js
import logo from './images/logo.svg';
import cover from './images/cover.svg';
import profile from './images/profile.svg';
import background1 from './images/body.svg';
export default {
logo,
cover,
profile,
background1
}
Then in your component you can just import images.js file:
import images from './images';
Then call any img you want:
<img src={images.logo} className="App-logo" alt="logo" />
<img src={images.cover} className="App-logo" alt="logo" />
<img src={images.profile} className="App-logo" alt="logo" />
<img src={images.background1} className="App-logo" alt="logo" />
My answer only applies if you are using create-react-app or Webpack with the file-loader plugin.
You have to import the picture file before using it. This has to be done in order for Webpack to bundle the images correctly for the production build.
import pic1 from './Pictures/1.jpg';
...
<Thumbnail src={pic1} alt="242x240">
You can read more here.
Put all your images in one 'images' folder under the public folder, then anywhere in your project, you can use the following path in img element:
It works fine with projects initiate with create-react-app