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
Related
I've been trying to work with next.js right now and when I imported a navbar component to my _app.tsx and run the project, it would give me an error of saying "Cannot use import statement outside a module." This doesn't occur on vanilla React though.
What I did is I made a Navbar component in components folder.
navbar.tsx
//some imports on react-bootstrap
function NavigationBar(): JSX:Element {
<>
//Navbar code
</>
on my _app.tsx, I imported the Navbar so that it would be accessible to all pages of the app.
_app.tsx
import type { AppProps } from 'next/app'
import NavigationBar from "../components/navbar.tsx"
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<NavigationBar/>
<Component {...pageProps} />
</>
)
}
It didn't highlight any error until I tried to run the project.
The error seems to occur in the bootstrap folder in node_modules though.
Attached is the error log on the console.
Thanks in advance.
Try adding
type: "module"
To your package.json
SOLVED:
I dabbled with the import statement and this works depending on how you import the react-bootstrap component.
//this doesn't work
import Navbar from "react-bootstrap/esm/Navbar"
//this works
import {Navbar} from "react-bootstrap"
//this works
import Navbar from "react-bootstrap/Navbar"
It's my mistake importing it from the esm file directly.
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 completely a newbie in react coming from Angular Typescript background. I chose to learn React with Typescript to make my transition easier compared to learning react with javascript. Could somebody let me know nice fundamental videos on React with Typescript. There is fundamental video on Plural sight but can its demonstrated using javascript.
I have created an app using the create-react-app command which has scaffold of react project.
I have noticed that file has following declaration of const while the examples that i see on the videos shows a class declaration with a render method. Could somebody explain ?
Scafolded output
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
return (
<div className="App">
</div>
);
}
export default App;
Example
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
In React there are 2 ways to define a component: with a function (Functional Component) or with a class (Class Component), you could check the exact differences here. This post from Dan Abramov attack that topic also (And give and inside on good practices).
But basically, both definitions are ok, but you have to be sure how you would want to use a component for, in order to decide between Funcional or Class components. Another good resource here.
Also for react training courses, you could check these resources:
React External Resources
React with Typescript
How to Use Typescript with React and Redux
Official Typescript with React tutorial
Also some Youtube options
Good Pluralsight tutorial
Anyone have suggestions about how to overcome the problem of styling and bootstrapjs and css files not working in react app and how to import bootstrapjs file in react component.
I have created a toggler navbar with bootstrap and using popover and bootstrap files not working
import React from 'react';
import SwiperDiv from './swiper';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<SwiperDiv/>
</div>
);
}
export default App;
index.js:1375 Warning: React does not recognize the classNmae prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase classnmae instead. If you accidentally passed it from a parent component, remove it from the DOM element.
You may have a typo on your DOM element
classNmae
try className
From your error message I'm guessing somewhere in your code (probably ./swiper) you wrote classNmae instead of className and that's what is causing your issue.
Also, in the code you posted you're closing a div tag inside the return statement without its opening tag present, so it's definitely going to throw an error. You should probably do:
return (
<div>
<SwiperDiv/>
</div>
)
add bootstrap's
link and scripts
inside root "public/index.html" directory if you've created react APP using create-react-app
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.