I am learning React, and I want to make my first project using Bootstrap also. I followed this tutorial, but all I get is this error:
./src/App.js
Line 9: 'Jumbotron' is not defined react/jsx-no-undef
This is my Apps.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<Jumbotron>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to My First React project</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</Jumbotron>
);
}
}
export default App;
This is my 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();
And this is my index.html:
<!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">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
I installed all the modules stated in the tutorial and made the imports, but compiler still don't recognize Bootstrap objects, like Jumbotron.
You're referencing a global variable that doesn't exist. you're looking for https://reactstrap.github.io/
In this case, since you are importing the boostrap css file, you need to use the 'jumbotron' as a class in a div.
If you wanna write the bootstrap elements as jsx tags like you did you need to use the library Andy Ray referenced.
Related
I am trying to use React with MS Visual Studio Code. If I ran the program from the terminal, I get following error message: "Cannot use import statement outside a module"
If I run the program without terminal, it takes me to the browser (Firefox) and gives "File not found" error message.
Not sure how the above two are connected. Is this is a problem with node installation, location of my files (where I do the actual programming), or perhaps is has something to do with Firefox debugger.
Kindly ask for help.
Many thanks.
Here is the code:
import React from "react";
import { ReactDOM } from "react-dom";
class App extends React.Component {
render() {
return (
<div>Test div</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("App"));
I am also providing a code to my .html, in case it is relevant:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="/src/Dejan/Kalkulator/calc.css">
</head>
<body>
<h1 id="test">Testing the system</h1>
<script src="/src/Dejan/Kalkulator/calc.js"></script>
</body>
<div id="App"></div>
</html>
Hey Deyan doesn't add into the HTML file, because react will automatically handle that, and also don't use CSS in HTML it will cause weird behavior at the end.
And don't put App div outside of the body tag. Because inside that div your whole react app will be fitted.
import React from "react";
import { ReactDOM } from "react-dom";
import "./Dejan/Kalkulator/calc.css"; // and add css like this I don't know your file path use the correct I put randomly.
class App extends React.Component {
render() {
return (
<div>Test div</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("App"));
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<div id="App"></div>
</body>
When I first launch npm run watch it's directing me to *localhost:3000" which I want to show the homepage or BookList right away. But I am getting 404 Not Found. I don't want to go to localhost:3000/home manually. I want to see the BookList right away when first launched the server.
App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./Header";
import BookList from "./BookList";
import "bootstrap/dist/css/bootstrap.min.css";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path="/home" component={BookList} />
<Route exact path="/" component={BookList} />
</Switch>
</div>
</BrowserRouter>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"
/>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Yaraku Book Store</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
After using the php artisan preset react command my app couldn't render React app components; the page is blank. I started my PHP server using php artisan serve and started Node with npm run dev.
app.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Everything is running without any errors.
EDIT.
I changed Example.js inside assets/js/components to App.js => code:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header/>
</div>
</BrowserRouter>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
I think you need to export the component as export default App;
I'm a project and that project have a "bootstrap" own, and i would want to import it for my render.
I created an archive HTML with the scripts:
<html>
<head>
<script> //1.www.s81c.com/common/v18/css/www.css</script>
<script> //1.www.s81c.com/common/stats/ida_stats.js</script>
<script> //1.www.s81c.com/common/v18/js/www.js</script>
</head>
</html>
and imported in my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
</header>
To get started, edit <code>src/App.js</code> and save to reload.
</div>
);
}
}
export default App;
but given that error:
> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
| <head>
| <script> //1.www.s81c.com/common/v18/css/www.css</script>
Resume:
I want to import scripts for i to use in my App.js
I think the tag for the .css file should be <link>.
There are multiple ways to import external scripts. One way that does work is to move these scripts to the <head> of your public/index.html.
/// public/index.html ///
<html>
<head>
<script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
<link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
<script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///
Those scripts will be downloaded when your page loads and you can access the variables in those scripts on the window object. After linking to these from your public/index.html, restart your React app, then open the console with F12 or Command-Option-i and type window into the console. There you will see all the global functions that are available from within your React app including window.IBMCore, window.Modernizr, etc
Have you tried this?
<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>
and for following can you try a regular <link /> instead of <script>
import those in index.html path is public.index.html. Because your app put in one of div of same html page.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Read this how webpack work.
https://webpack.js.org/configuration/externals/
else other way is save file and import at App.js
import './App.scss';
I'm building a web single-page app with react that connects with my express backend using a socket.io websocket. I checked that the socket.io script is being loaded right in my index.html file. I've also declared a variable named socket in the same place to make the socket accessible from the react component scripts. The intent is to use this variable inside my react components. But jsx compiler says:
9:2 error 'socket' is not defined no-undef
If I check the 'socket' var at chrome console everything looks right. I guess that this var should be defined at compile time, but how?
Here goes the react component code.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
componentDidMount(){
socket.on('hello', function(){
console.log('YAY!');
})
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
</div>
);
}
}
export default App;
Here goes my index.html code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<title>React App</title>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://localhost:3001')
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
first install socket.io like this:
npm install socket.io --save
then you should import socket.io as a module just like you did with react:
import socket from 'socket.io'
Solution here.
Remove all the socket.io scripts on index.html
Import the right module in your component:
import io from 'socket.io-client';
Use it this way:
componentWillMount(){
this.socket = io('http://localhost:3001');
this.socket.on('hello', function(){
console.log('YAY!');
})
}
Full code:
(index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
React Component (App.js)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import io from 'socket.io-client';
class App extends Component {
componentWillMount(){
this.socket = io('http://localhost:3001');
this.socket.on('hello', function(){
console.log('YAY!');
})
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to Riact</h2>
</div>
</div>
);
}
}
export default App;