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;
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>
I am trying to use altmetrics in one of the my article (PDF) in my website.
I tried to add the altmetric badges (here) to in reacts js but I could not manage.
Here is my trial:
First I tried to create a component and add to the page
class DownloadPDF extends Component {
render() {
return (
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi={"my-doi-number-here"} class="altmetric-embed"> </div>
Download PDF
</div>
);
}
}
The second is I tried to put in the page directly:
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="my-doi-number-here" class="altmetric-embed"> my-crosreff-doi.pdf</div>
{<DownloadPDF />}
</div>
Can someone know how can I put altmetrics badges correctly in reactJS?
Thank you all answers.
For seeing the Altmetrics result in your page first you should add:
altmetrics external javascript file
<script type='text/javascript'src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
2.
You should add your DOI wherever you want to display
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
so this is for adding to html page but when you add in ReactJS web app we have a tiny problem.
Problem is adding external javascript file to in ReactJS page that you want to display the Altmetrics badge
So solution is we need to install an addition library that allows us to implement any external javascript file.
Check the link:
https://github.com/shaneosullivan/ReactDependentScript/
We need to add below code in your ReactJS page
...
render() {
return (
<div>
<ReactDependentScript
loadingComponent={<div></div>}
scripts={['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']}
>
<div></div>
</ReactDependentScript>
...
</div>
);
}
}
then you can add your the Altmetrics badge wherever you want in the page like this
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>
I think all you need to do as described https://api.altmetric.com/embeds.html
that you put the js script in any where in html , but react is virtual dom , so all you need is put in puplic in index.html in <body> under <div id"root"></div>
or like you named. just simple as that
There are two things you are missing
Adding the script to index.html file underpublicdirectory (if you have created your app usingcreate-react-app`)
<!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, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<!-- Here we go with the external script -->
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Change the class attribute to className in dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
// changed class to className
<div className='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
</div>
);
}
}
export default App;
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 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.