I'm pretty new to this react/nodejs/bootstrap affair. I'm trying to make use of the reactjs-adminlte theme for bootstrap. I can get bootstrap widgets to work fine, such as buttons, but having trouble with this theme. The error I get is
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
My code is as follows
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.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">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<title>React App</title>
</head>
<body class="skin-blue sidebar-mini ">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import './App.css';
import Sidebar from 'adminlte-reactjs';
class App extends Component {
render() {
return (
<div className="App">
<Sidebar>
</Sidebar>
</div>
);
}
}
export default App;
Would love to know why i cant get the Sidebar to display. Its probably something simple that im missing.
Thanks
maybe you should change:
import Sidebar from 'adminlte-reactjs';
to
import {Sidebar} from 'adminlte-reactjs';
or:
import adminlteReactjs from 'adminlte-reactjs';
let Sidebar = adminlteReactjs.Sidebar;
<Sidebar>
</Sidebar>
Related
New to react js and firebase
I have a firebase project, I did the init and deploy, but the index.html was a generic file.
I copied the index.html from the public directory in the build directory (which is the folder specified in hosting firebase.json)
when I start the app the page is empty.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
that "root" bit might be the problem.
this is the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
when I access the link it's just an empty page
I'm starting to learn reactjs at the moment. I'm wondering how to add normal HTML-Tags in a react-app. Is i just possible to add them by using the render function or can I also just write normal HTML-Tags in my index.html file?
Cause when I'm doing so they're not displayed.
Just like:
const myelement = (<h1>some element</h1>);
ReactDOM.render(myelement, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
<div id="root"></div>
<div>just normal html</div>
</div>
Well, it works just fine here.. so there must be something wrong with my build..
If you're starting out, I recommend you bootstrap your apps using npx create-react-app. It'll give you a good sense of what a React app could look like, and some pointers for file structure.
Most React apps have an index.html file, which you can use like any normal HTML file. But, for the majority of your app, it's recommended to write your content in JSX (otherwise, you aren't getting the benefits of using React in the first place).
JSX
JSX looks very similar to regular HTML, with a handful of key differences:
Tag attributes tend to be in lowerCamelCase (onChange rather than onchange)
Instead of class (which is a reserved keyword in JavaScript), you need to use className
An Example Component
I've borrowed this sample code from React's official tutorial, which you should definitely check out if you haven't already.
This is a class Component, and your JSX goes inside of the render method:
import React from 'react';
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
What goes in index.html?
The only essential part of index.html is a <div id="root"></div>, which React will use to append the rest of the JSX.
This is also the place to add the usual metadata and icons.
As an example, here's the index.html file that comes with create-react-app. For most of my projects, I leave this pretty-much as-is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
In any given React component, there can only be one parent/top layer html element. You can get around this by using <React.Fragment> ...the rest of your html ... </React.Fragment> (or <>...</> depending on your version) or simply add a wrapping <div> around everything. JSX doesn't distinguish between "normal" html and "React" html, it just turns the React stuff into normal html (over simplification, but close enough for this question). Try it again and let me know if you encounter any problems.
const reactElement = (
<div>
React stuff
</div>
);
ReactDOM.render(
reactElement,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
<div id="root">
</div>
<div>
just normal html
</div>
</div>
Install bootstrap using this command (npm install bootstrap#4.0.0-alpha.6)
and my index.html file is:
According issue I can add the css from other front framework (https://maxcdn.bootstrapcdn.com/), and make it work. I d
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta name="mobile-web-app-capable" content="yes">
<title>Super Tax</title>
<script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-4.0.0-min.gz.js"
;r.onload=function(){if(e.amplitude.runQueuedFunctions){
e.amplitude.runQueuedFunctions()}else{
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","logEventWithTimestamp","logEventWithGroups","setSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("AMPLITUDE_KEY");
</script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>,
please <strong>enable JS</strong> to make this app work.
</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<div id="message-container" style="display: none;" class="st-alert"></div>
<div id="connection-status" style="display: none;">
<div>
<span class="fa fa-circle margin-right-16" style="color: red;"></span>
<span>You are offline</span>
</div>
</div>
<div id="progress-bar-container">
<div id="progress-bar"></div>
</div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
To install bootstrap use the following npm command, in your react app.
npm install --save bootstrap
or
npm install --save bootstrap#latest
Once the bootstrap installation is complete. Then add the following import statement to index.js file.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
or
import 'bootstrap/dist/css/bootstrap.min.css';
For font awesome please refer How to include a Font Awesome icon in React's render(). Someone has posted in stackoverflow.
If you installed Bootstrap using npm install:
Remove <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> from your index.html file.
Then, import the Bootstrap CSS file from node_modules into the root index.js file of your React app:
import 'node_modules/bootstrap/dist/css/bootstrap.min.css';
I am rendering this component from the main component. I am facing issues with Modal in react-bootstrap. My modal is not showing up properly. i have attached the screenshot of how my modal looks. Please if anyone could help?
This is how my model shows up
https://i.stack.imgur.com/wvnmU.png
import React, { Component } from 'react';
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
class Add_Recipe extends Component {
constructor(){
super();
this.state={
showAdd: false
};
}
handleAddRecipe(e){
this.setState({showAdd: true});
}
close() {
this.setState({ showAdd: false });
}
render() {
return(
<div className="Add_Recipe">
<Button onClick ={this.handleAddRecipe.bind(this)} bsStyle="primary" bsSize="large"> Add Recipe </Button>
<Modal show={this.state.showAdd} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title id="modalTitle">Add a Recipe</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Hello i am Modal..!!
</p>
</Modal.Body>
<Modal.Footer>
<p>
Hello I am Footer
</p>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default Add_Recipe;
This is my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
This is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I'm trying to render a small search bar onto my website, but what I see is that it is still existing in the website, but its size becomes 0x0, and I can't find anything wrong with my ES6 code. Can someone debug for me please?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>React-Redux-Learning</title>
</head>
<body>
<div id="container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
<script src="/bundle.js"></script>
</html>
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import searchBar from './components/searchBar'
const youtubeAPIKey = '...'
const App = () => {
return (
<div>
<searchBar />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('container'))
searchBar.js:
import React, { Component } from 'react'
class searchBar extends Component {
constructor(props) {
super(props)
this.state = {term: ''}
}
render() {
return <input onChange={event => console.log(event.target.value)}/>
}
}
export default searchBar
First of, you have defined your component as <searchBar\>. I guess React is not able to see it as JSX Component and is embedding it as a plain html tag instead, as evidenced by the <searchbar\> tag seen in Elements tab of chrome.
I think what you need is, to figure out why react is not able see searchBar as a JSX component. I hope this leads you to the right direction.
OK my boss actually found it out, it's the problem about CAPITALIZING the variable names. After I cap the first letter of the variable names things are working again...
Your search bar code works fine. Check your CSS to make sure that your body has a size.