I am trying to use react-bootstrap in react and installed it by using command
npm install react-bootstrap --save
but it's not working, also tried to add external react-bootstrap.js but still getting an error
error 'ReactBootstrap' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
what am I doing wrong in this code. This is HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is JSX file.
import React, { Component } from 'react';
import logo from './logo.svg';
class Hello extends Component{
render()
{
let { Button} = ReactBootstrap.Button;
return(
<div>
<img src={logo} className="App-logo" alt="react-logo"/>
<h1> Trying react</h1>
<Button>Noob</Button>
</div>
);
}
}
export default Hello;
and here the rendering code in other file.
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import './index.css';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
the same code is working fine , If I remove
let { Button} = ReactBootstrap.Button;
and
<Button>Noob</Button>
from JSX file.
You will need to import that component from react-bootstrap like - var Alert = require('react-bootstrap').Alert;
For more information please take a look at this - https://react-bootstrap.github.io/getting-started.html
Related
I would like to embed this code on my Gatsby site, what would be the best practice? I'm still learning and any help would be much appreciated.
Thanks
<script
id="nc-booking-widget-script"
src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5"
data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc"
data-nc-root="https://www.neatcal.com/app"
data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"></script>
The easiest and native approach, not only in Gatsby, but generally in React is using the Helmet component. Basically, whatever is wrapped inside this component is outputted in the <head> tag, no matter the original component.
To use it, just install (via yarn add react-helmet or npm install --save react-helmet) it and use like:
import React from "react";
import {Helmet} from "react-helmet";
const HomePage = (props)=> {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://someSite.net/example" />
<script id="nc-booking-widget-script" src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5" data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc" data-nc-root="https://www.neatcal.com/app" data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"/>
</Helmet>
...
</div>
);
};
In Gatsby, in addition, you can customize the resultant HTML (created once build) by:
cp .cache/default-html.js src/html.js
This will copy the default-html.js file from .cache to src/html.js. There, you can embed your script like:
import React from "react"
import PropTypes from "prop-types"
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
id="nc-booking-widget-script"
src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5"
data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc"
data-nc-root="https://www.neatcal.com/app"
data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"></script>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Both are valid and cleanest approaches.
I am learning react.js by myself, so you may find this question a silly one. But, I want to learn concepts.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
ReactDOM.render(<AppStyle />, document.getElementById('style'));
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
<div id="style"></div>
</body>
</html>
In my index.html, I have placed two divs, which are calling two different components, but the only first component is loaded on the page. Is there any way to call both of them? And if not then why?
Here is the pattern.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<>
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
<Home />
</>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App; // not necessary since you are rendering already...
you can also create a seperate component for the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Nothing is importing and rendering Home. If you really wanted to render into two separate elements on the same page, then import Home into index.js and then you can render both.
import React from 'react';
import ReactDOM from 'react-dom';
import AppStyle from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<AppStyle />, document.getElementById('style'));
As others have pointed out though, the normal pattern is to only render a single react application per page.
I am learning reactjs I have made components from a html template, when I am calling them I am receiving this error:
class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
Please any one let me know why this is occurring
**App.js**
import React from 'react';
import Component from './components';
import logo from './logo.svg';
import './App.css';
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';
class App extends Component {
render() {
return (
<div id="colorlib-page">
<div id="container-wrap">
<Menus></Menus>
<Welcome></Welcome>
<Welcome></Welcome>
<Services></Services>
<Reasearch></Reasearch>
<Projects></Projects>
<About></About>
<Testimonials></Testimonials>
<Blog></Blog>
<Contact></Contact>
<Footer></Footer>
</div>
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arvind Pundir - A Fullstack Web & App Developer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900"
rel="stylesheet">
<link rel="stylesheet" href="%PUBLIC_URL%/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.carousel.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.theme.default.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/aos.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/icomoon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/>
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#F96D00"/></svg></div>
<script src="%PUBLIC_URL%/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery-migrate-3.0.1.min.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.easing.1.3.js"></script>
<script src="%PUBLIC_URL%/js/jquery.waypoints.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.stellar.min.js"></script>
<script src="%PUBLIC_URL%/js/owl.carousel.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.magnific-popup.min.js"></script>
<script src="%PUBLIC_URL%/js/aos.js"></script>
<script src="%PUBLIC_URL%/js/jquery.animateNumber.min.js"></script>
<script src="%PUBLIC_URL%/js/scrollax.min.js"></script>
<script src="%PUBLIC_URL%/js/main.js"></script>
</body>
The issue is with this line of code:
import Component from './components';
Notice that this is a directory for most of your other component imports:
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';
If you don't give an exact path to a component within your ./components directory there needs to be an index.js file within your ./components directory for the import Component from './components'; to work correctly. You can see this from your error message:
class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
This is telling you it can't find the ./components module associate with the import Component from './components'; import. Either add an index.js file within your ./components directory containing the necessary code for said component or double check that your path is correct for said import, i.e.:
import Component from './components'<COMPONENT>;
where <COMPONENT> is the name of the component you meant to import.
Hopefully that helps!
From this question (Is it OK to use React.render() multiple times in the DOM?) it seem like we can call React.render() multiple times in a page. However when I tried following code I got " _registerComponent(...): Target container is not a DOM element." error on the second component.
import React, {Component} from 'react';
import {render} from 'react-dom';
import {Button} from 'office-ui-fabric-react/lib/components/Button'
class App extends Component {
render () {
</div>;
return(
<div><Button>I am a button.</Button></div>
)
}
}
render(<App/>, document.getElementById('app'));
render(<App/>, document.getElementById('app2'));
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<div id="app2" />
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
You have a closing div above the return statement in you render function,apart from that as stated in the docs of office-ui-fabric-react Button is being import from lib and not lib/components
Import it like
import { Button } from 'office-ui-fabric-react/lib/Button';
class App extends React.Component {
render () {
return(
<div>I am a button</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
ReactDOM.render(<App/>, document.getElementById('app2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<div id="app2"></div>
I am trying to use http://www.material-ui.com/ for front end design. I am trying to execute the first example within the getting started tutorial. I have following html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script>
</body>
</html>
and following App.js and MyAwesomeReactComponent.js files as defined in ( http://www.material-ui.com/#/get-started/usage )
App.js :
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
MyAwesomeReactComponent.js:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;
But when I run the index file, I can't see any output.
The problem is here since you are implementing ES6 code, you need to use a javascript compiler like babel to transform your ES6 code to ES5 which is current javascript standard that is supported by browsers.
It would be a good practice to use babel with webpack as a loader.
Following React's get started page's instruction is a good starting point. I'd suggest reading the instructions carefully.
Finally, if you want to use pure ES6 without transforming, the compatibility table is available here: https://kangax.github.io/compat-table/es6/