I'm trying to import the svg from the public folder.
How can I do that using import?
I've tried:
import Avatar_1 from './public/avatar_1.svg';
but I'm still getting "Module not found: Can't resolve './public/avatar_1.svg'"
Is there a way to use process.env.PUBLIC_URL?
I think it's not possible to access the public folder from src, so I did the following:
import { ReactComponent as Avatar1 } from './assets/avatar_1.svg';
and it worked.
How to use it:
<Avatar1 />
Please note that the ReactComponent as part of the import is mandatory, and that your new component name, like Avatar1, should always start with a capital letter. Otherwise react won't recognize this as a react component.
Create 'icons' folder in Public Directory and Use this code :
import React, { Component } from 'react';
const iconPath = process.env.PUBLIC_URL + '/icons/';
export default class TestComponent extends Component {
constructor(props) {
super(props);
}
render(){
return (<img
src={`${iconPath}icon-arrow.svg`}
alt="more"
/>)
}
}
Related
Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:
import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';
But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.
How do I get it not to bundle the things I'm not using with tree shaking?
I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.
In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.
Since it doesn't have it, you will need import directly.
Before:
import React from 'react'
import SketchPicker from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
After:
import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
React is not resolving my component import into my YouTubeApp.js.
It seems silly, i have other components in my react app that I'm able to import with no issues but this one in particular i can't get it imported.
Github: https://github.com/JAlonsoHdz/React_UnsplashClientApp/tree/master/src/components
Additional context, YouTubeApp.js is currently imported in my index.js with no issues. I'm using react routing imported in the index.js and links and the route links sucessfully to YouTubeApp.js. The problem arise whenver I try to import ANY component into YouTubeApp.js i get the Cannot resolve 'component name' error, without any imports the component YouTubeApp.js works fine.
I have validated the correct path, the name of the component.
YouTubeApp.js
import React from 'react';
import Other from './components/other';
class YouTubeApp extends React.Component {
render() {
return (<p>test</p>
);
}
}
export default YouTubeApp;
And this is my component I'm trying to import:
import React from 'react';
class Other extends React.Component {
render() {
return (
<div clasNames="ui container">test!</div>
);
}
}
export default Other;
I need to nest at least a few levels down more components but this issue blocking.
Looking at your GitHub repository, it appears that YouTubeApp.js and other.js are both in the "components" directory. Therefore when in YouTubeApp.js (or any other component in your "components" directory) your import should be:
import Other from './other';
Trying to address all h1 elements in a child component but the class styling bubbles up to address all h1 elements in entire DOM. How restrict styling to component to which stylesheet is imported?
```
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1>Principles in Areas of Life</h1>;
}
}
```
& Beginning of parent component code:
```
import React, { Component } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";
import "../styles/principles.css";
import PrinciplesInAol from "./principlesInAoL";
export default class Principles extends Component {
render() {
```
Thanks for the help.
Any css you add that defines styles by a tagname will apply to every element in the dom with that tagname, so in your case, adding a class name to the <h1/> is probably the best option.
In the PrinciplesInAoL component
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1 className="principlesInAoL-h1">Principles in Areas of Life</h1>;
}
}
and in principlesInAoL.css, add a definition for that class:
.principlesInAoL-h1{
/* your styles here */
}
ReactJS has no view encapsulation (in contrast to Angular). So in order to make CSS rule much stricter you should use CSS selector with higher specificity.
I am writing jest unit tests for a React Stateless Functional Component (SFC) that is inside a Higher Order Component (HOC). How do I use TestUtils to find a specific class in the SFC?
Specifically, my SFC/HOC looks like:
import React from 'react'
import sizeMe from 'react-sizeme';
const MyClass = ({myText, size}) => {
return (
<div className="MyClassName">{myText}</div>
);
};
export default sizeMe()(MyClass);
Here note that MyClass is a SFC and I am embedding it inside of the HOC sizeMe from the package react-sizeme.
The test I am trying to do is:
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import MyClass from './src/views/MyClass.js'
import Wrap from '../src/views/Wrap'
describe('<MyClass />, () => {
it('can haz my text', () => {
const myClass = TestUtils.renderIntoDocument(
<Wrap>
<MyClass myText={'my text'} />
</Wrap>
);
const myText = TestUtils.findRenderedDOMComponentWithClass(myClass,'MyClassName').innerHTML;
expect(myText).toEqual('myText');
});
});
In this test I am using the utitlity class Wrap that I would normally use to test SFCs:
import React from 'react';
class Wrap extends React.Component {
render() {
return <div>{this.props.children}</div>
}
}
My test fails because TestUtils.findRenderedDOMComponentWithClass cannot find MyClass. I get the message "Did not find exactly one match (found: 0) for class:MyClass"
How can I retrieve MyClass? I would most prefer to use React's TestUtils, but I am open to other approaches if that is not possible.
To get this to work, it is necessary export/import the non-HOCed component. This required 3 changes. First the export keyword should be added to the definition of MyComponent.
export const MyClass = ...
The second change is how MyClass is imported. Since the HOCed MyClass is the default export, exporting the non-HOCed version requires all exports from MyClass.js to be imported as
import * as MC from './src/views/MyClass.js
Finally, the non-HOCed component can now be in the test as
<MC.MyClass myText={'my text'} />
Because the default export was not changed, the HOCed component will still be used in a regular import so no changes to the other parts of the application will be required.
I want to use PureRenderMixin optimize performance through shouldComponentUpdate,
but after npm i react-addons-pure-render-mixin --save, I find that I can't call PureRenderMixin correctly.
I follow react document ES6 step.
import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
}
And always get Unable to resolve module react-addons-pure-render-mixin error.
Is there any possible use PureRenderMixin in react native? If so, how should I fix it?
You may need import reactMixin from 'react-mixin'; The whole solution would be something like:
import React, { Component } from 'react';
import { View } from 'react-native';
import reactMixin from 'react-mixin';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Styles from './styles';
export default class Loading extends Component {
render() {
return (
<View style={Styles.container}>
<Text>Hello world!!!</Text>
</View>
);
}
}
reactMixin(Loading.prototype, PureRenderMixin);