score:1
Accepted answer
this is working alright. just changed the scripts and all for appropriate versions.
<!doctype html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggoyr0ixcbmqv3xipma34md+dh/1fq784/j6cy/ijtquohcwr7x9jvorxt2mzw1t"
crossorigin="anonymous"
/>
</head>
<body>
<h1>app</h1>
<div id="root"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
></script>
<script type="text/babel">
class app extends react.component {
render() {
return (
<div>
<div classname="jumbotron">
<h1 classname="display-4">
amazing react, bootstrap and webpack
</h1>
<p classname="lead">created with love</p>
<hr classname="my-4" />
<p>
it uses utility classes for typography and spacing to space
content out within the larger container.
</p>
<p classname="lead">
<a classname="btn btn-primary btn-lg" href="#" role="button">
learn more
</a>
</p>
</div>
</div>
);
}
}
reactdom.render(<app />, document.getelementbyid("root"));
</script>
</html>
score:0
you need a react and react-dom version 16.x instead of 15.x because it is not being supported anymore.
here you can find the same issue solved.
hope this helps.
Source: stackoverflow.com
Related Query
- Not able to import bootstrap with reactjs with babel
- ReactJS componentDidMount does not behave as expected with Bootstrap
- Reactjs with fetch for auth and access token, not able to parse response
- I am not able to read authorization headers on server side with reactjs fetch and nodejs as REST apis project
- Require is not defined using ReactJs with babel and webpack
- bootstrap scss with reactjs not adding bootstrap classes
- Not able to resolve issue with api of OpenWeatherApi for fetching weather data of a city using City id using axios in Reactjs
- Bootstrap 4 collapse not working with map in ReactJS
- Not able to import font-awesome in Reactjs project
- Reactjs app - Not able to fetch data with axios
- Bootstrap NavBar do not set up li class="active" with React-Router. ReactJS
- not able to display with reactjs
- Not able to update state with editorState from server in ReactJs for draftJs
- ReactJS Bootstrap Navbar and Routing not working together
- ReactJS component not rendering textarea with state variable
- ReactJS with ES6: this.props is not a function when I communicate two components
- Bootstrap classes do not work in ReactJS component
- import a module from node_modules with babel but failed
- Exporting functions with reactjs and babel
- import syntax not working with webpack
- reactjs, bootstrap and npm import - jQuery is not defined
- How to customize bootstrap 4 in reactjs app with reactstrap dependency?
- Why getDerivedStateFromProps does not allow to re-render with the state update? Not a problem for componentWillReceiveProps - ReactJS
- Why I am not able to render my ReactJS application using PhantomJS 2.1.1?
- Using Jquery and Bootstrap with Es6 Import for React App
- Not able to style nested animations with keyframes with styled-components
- Webpack babel es6 giving me errors with react-router 1.0 "module not found"?
- Not able to import decorate from mobx
- Bootstrap select element not rendered with react-router
- Bootstrap datepicker not working with Webpack
More Query from same tag
- Execute code on parent component based on parent component's state changed in child component
- Clear a field's value on input clear in react-final-form
- Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead
- Moment.js Date Returning Invalid
- How to blur an input field using javascript or react?
- React router open route in new window
- Maintain state of react component at each render
- How to mock event object in React/Typescript with Jest?
- How can my application code know whether the app is being tested with testcafe?
- How to download binary file through axios get method in reactjs?
- npm install with --production option and peer dependencies
- React Action Creator and Action Type Naming Convention?
- How do I integrate localStorage to save data (in an array) for current browser session?
- Is there a way to change selected option with help of function in React?
- React testing with Jest and Enzyme (in Symfony) got "Syntax Error: Unexpected token import"
- Infinite Re-rendering of React Functional Component using Axios and useState/useEffect?
- Request failing when trying to pass in parameters in redux-saga for an api call
- CSS Position 2 buttons inline-block in center of screen, while keeping hover behavior
- Change image according to value of MaterialUI slider
- ReactJS simple hover works critical slow
- Is there a possibility to override the react admin pagination for the List Component to add an input to let the possibility to choose our page?
- useEffect to check for update of useState
- ReactJS map function not working on a lightbox gallery
- Render a react component on a wordpress page
- Gitlab-CI avoid unnecessary rebuilds of react portion of project
- How to listen to external variable changes in React
- How to update state of specific object nested in an array
- React js material-ui textfield endAdornment background
- Why I can't set and change my entire state with dispatcher like that?
- Read Store's Initial State in Redux Reducer