I've been trying to import an image using react and webpack however I haven't been successful yet.. I already installed file-loader and url-loader using npm, I already configured the webpack.config file as I saw it on the docs however I just get an error..
https://drive.google.com/open?id=1vdSpLwgwJgUuBCKjej_QosJazMaiGe7P
thanks for any help!
Instead write like this in your SearchBar component.
import Minor from './minor.png'
class SearchBar extends component{
render(){
return(
<img src={Minor} alt="myLogo" />
)
}
}
Related
I am trying to embed React Components into Angular because I have written some react components only because it's using a React library. However, my main framework is still Angular12+.
I have this .tsx file src/app/my-react-component.tsx
import * as React from 'react';
export default function MyReact() {
return (
<div>
<h1>Hello My React Component!</h1>
</div>
);
}
and I want to import this from src/app/app.component.ts
import MyReact from './my-react-component';
Then, I see this error
Import error, can't find file:
./my-react-component
To try, I added "jsx": "react" to tsconfig.json, but did not work, a solution from https://codebyz.com/embedding-react-components-in-angular-the-easy-way/
This is stackblitz page, which you can see this error.
Anyone who has a victory on importing .tsx into Angular project?
I think you did everything right
specify jsx: react in tsconfig
create a wrapper with React rendering (with standalone directive it becomes much simpler btw)
It's just an error from Stackblitz because they have their own vision of typescript compilation.
Here is a link with the same code from Codesandbox
I'm trying to to currently add an svg to my React-App.
I've got a nginX running that currently only servs one picture (localhost:80/ban.svg is reachable by browser and returns the correct icon).
import React from "react";
export class App extends React.Component{
render(){
return <img src={"localhost:80/ban.svg"}/>
}
}
Above Code doesn't work tho. It just says "Could not load the image" and displays the default browser error picture.
I'm fairly new to React, so sorry if this is something really obvious. Thanks for the help.
import React from "react":
export class App extends React.Component{
render(){
return <img src={"http://localhost:80/ban.svg"}/>
}
}
Try this
I'm following along to a youtube tutorial to learn the MERN stack. Currently i'm trying to import boostrap css in my App.js file. But i keep getting this error.
Error
Here is my App.js file
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import './App.css';
import 'boostrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;
I ran npm install --save boostrap before attempting to include it, ive also restarted the server. All to no avail. Is there a new way to include css from the node_modules folder?
If you are trying to import bootstrap into your react project. You can import the css file into your App.js like this.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
The import statement is not finding the file(s) do to the path passed in.
You have a typo, use this
import 'bootstrap/dist/css/bootstrap.min.css'
I am trying to import a JSON object from a js file in my React project. I am a newbie to React so please go easy :). I keep getting an error no matter what path I change it to (cannot be found). I've attached a screengrab of the directory structure. I am in the scripts/components folder in the home.js file. Thanks. Data is the object in the JSON file imported from the "server" folder.
import React from 'react';
import data from '../server/data';
class Home extends React.Component {
render() {
return (
<section id="home">
<div className="content">
<p>Test...</p>
</div>
</section>
);
}
}
// Export out the React Component
module.exports = Home;
You have to go three directories up.
../ takes you to scripts.
../../ takes you to app.
../../../ takes you to the project root.
thus,
import data from '../../../server/data';
I'm trying to get my hands on writing my first component using bootstrap 4.
import React,{Component} from 'react';
import {Button} from 'react-bootstrap-4';
class TextField extends Component {
constructor(props){
super(props);
}
render() {
return (
<Button bsStyle="primary" bsSize="large">Default</Button>
);
}
}
export default TextField;
In my index.js I call it as follows:
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import TextField from './components/custom/text_field';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
Helo World1
<br/>
<TextField id="test" />
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('.container'));
When I run the app I don't get any errors but the button is not looking like its suppose to
Am I missing something?
You're responsible for including Bootstrap's CSS yourself with react-bootstrap, which react-bootstrap-4 is a (temporary) fork of.
As per its Getting Started guide:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide.
You would need to do the equivalent for Bootstrap 4.
by including Bootstrap 4 via CDN as above you only get css and any JS dependent component will not work. I've been facing this problems with React on Meteor.js.
What I did was to npm install:
"bootstrap": "^4.0.0-alpha.6",
"tether": "^1.4.0" // Tether is required by bootstrap.js
Import the css through the main js file:
import 'bootstrap/dist/css/bootstrap.css'
The only way I got full Bootstrap with JS was to grab a copy of bootstrap.js into my libs folder (any front end folder), modify it to import Tether at the top:
import tether from 'tether'
global.Tether = tether
For some reasons I couldn't find another way to resolve the Tether dependency.
Meteor does its own minification so I was not really bothered with the .min.js, however, you cannot import tether into a minified bootstrap.js.
Like many others I am waiting for a more "final" release of bootstrap 4 and possibly a simple npm i bootstrap --save procedure.