Hi I have started to learn React JS but when I'm Starting to fetch API I'm getting an error:
parsing failed SyntaxError: Unexpected end of input
This is my source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
body {
background: #538cb5;
}
.app-container {
background: #fff;
max-width: 480px;
margin: 60px auto;
padding: 40px 25px;
}
h3 {
color: #538cb5;
}
input {
margin: 20px 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js' crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <Data />
}
}
class Data extends React.Component {
constructor(props) {
super(props)
this.state = {
data : [
{"play_slot_id":"227","playSlot":"E","date":"2018-10-06","time":"14:00","randValue":"683394","new_randValue":"","createdDate":"2018-10-06 13:26:30","updatedDate":"2018-10-06 13:26:30","status":"active"},{"play_slot_id":"227","playSlot":"E","date":"2018-10-06","time":"14:00","randValue":"683394","new_randValue":"","createdDate":"2018-10-06 13:26:30","updatedDate":"2018-10-06 13:26:30","status":"active"},{"play_slot_id":"227","playSlot":"E","date":"2018-10-06","time":"14:00","randValue":"683394","new_randValue":"","createdDate":"2018-10-06 13:26:30","updatedDate":"2018-10-06 13:26:30","status":"active"}
]
}
}
componentDidMount(){
fetch('http://iqexpert.in/android_login_api/getRand.php',{mode: 'no-cors'})
.then((res) => {
console.log(res)
return res.json()
})
.then((data) => {
console.log('parsed json', data)
this.setState({data : data})
})
.catch(function(ex) {
console.log('parsing failed', ex)
})
}
render(){
if(!this.state.data) return <p>Loading</p>
var elements = this.state.data.map( (item,index) => {
return <li key={item.id}>SLOT: {item.playSlot} | Random: {item.randValue} </li>
})
console.log(elements)
return <ol>{elements}</ol>
}
}
ReactDOM.render(<App />, document.getElementById("root"))
</script>
</body>
</html>
I tried with and without CDN but still getting the same errors in ReactJS. I have made API's for my Android Project. It is consumed properly in Android devices but I am not able to render properly in React JS.
I am not sure how we should implement React components between script tags, but don`t you need to import React as import React from 'react'
<script type=text/babel>
import React from 'react' // <<---- HERE
class App extends React.Component {
Related
I am trying to use my template to build a project in the gatsby js but all the CSS and js aren't working.
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import {Helmet} from 'gatsby'
import Header from "./header"
import "./layout.css"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<Helmet>
<link href="js/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="js/vendor/slick/slick.min.css" rel="stylesheet"/>
<link href="js/vendor/fancybox/jquery.fancybox.min.css" rel="stylesheet"/>
<link href="js/vendor/animate/animate.min.css" rel="stylesheet"/>
<link href="css/style-light.css" rel="stylesheet"/>
<link href="fonts/icomoon/icomoon.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"/>
<script src="js/vendor/jquery/jquery.min.js"></script>
<script src="js/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="js/vendor/slick/slick.min.js"></script>
<script src="js/vendor/scrollLock/jquery-scrollLock.min.js"></script>
<script src="js/vendor/instafeed/instafeed.min.js"></script>
<script src="js/vendor/countdown/jquery.countdown.min.js"></script>
<script src="js/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="js/vendor/ez-plus/jquery.ez-plus.min.js"></script>
<script src="js/vendor/tocca/tocca.min.js"></script>
<script src="js/vendor/bootstrap-tabcollapse/bootstrap-tabcollapse.min.js"></script>
<script src="js/vendor/isotope/jquery.isotope.min.js"></script>
<script src="js/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="js/vendor/cookie/jquery.cookie.min.js"></script>
<script src="js/vendor/bootstrap-select/bootstrap-select.min.js"></script>
<script src="js/vendor/lazysizes/lazysizes.min.js"></script>
<script src="js/vendor/lazysizes/ls.bgset.min.js"></script>
<script src="js/vendor/form/jquery.form.min.js"></script>
<script src="js/vendor/form/validator.min.js"></script>
<script src="js/vendor/slider/slider.js"></script>
<script src="js/app.js"></script>
</Helmet>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<main>{children}</main>
</div>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
But all the files not included any CSS or JS from this example.
Here are all files
Tell me if I am doing something wrong. Any help would be appreciating.
After doing lots of research and #Ferran reply and these post
How to include local javascript on a Gatsby page?
How to use global css style sheet includes with GatsbyJS
I have been completed like this.
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"
import Header from "./header"
import "./layout.css"
import "../../static/js/vendor/bootstrap/bootstrap.min.css"
import "../../static/js/vendor/slick/slick.min.css"
import "../../static/js/vendor/fancybox/jquery.fancybox.min.css"
import "../../static/js/vendor/animate/animate.min.css"
import "../../static/css/style-light.css"
import "../../static/fonts/icomoon/icomoon.css"
// import "https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
// import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<Helmet>
<script src={withPrefix('js/vendor/jquery/jquery.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/slick/slick.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/scrollLock/jquery-scrollLock.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/instafeed/instafeed.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/countdown/jquery.countdown.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/imagesloaded/imagesloaded.pkgd.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/ez-plus/jquery.ez-plus.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/bootstrap-tabcollapse/bootstrap-tabcollapse.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/isotope/jquery.isotope.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/fancybox/jquery.fancybox.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/cookie/jquery.cookie.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/bootstrap-select/bootstrap-select.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/lazysizes/lazysizes.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/lazysizes/ls.bgset.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/form/jquery.form.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/form/validator.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/slider/slider.js')} type="text/javascript" />
<script src={withPrefix('js/app.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/bootstrap/bootstrap.bundle.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/tocca/tocca.min.js')} type="text/javascript" />
{/* <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> */}
</Helmet>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<main>{children}</main>
</div>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
I hope anyone won't waste at the same time as I wasted.
According to Gatsby's docs you need to point your static/external assets using relative paths, such as (extracted from their documentation):
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in the “Importing Assets Directly Into Files” page.
return <img src={'/logo.png'} alt="Logo" />;
}
Without knowing your project folder structure it seems that your issue is related to this. Try to use relative paths in your component. If you have kept the Gatsby default structure, I would suggest something like this:
<link href="../js/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>
And so on...
I've replied your structure on my project and it should work with ../js/your/path/to-file,../css/your/path/to-file, etc.
I want to draw pie chart in react .
when slider range changes the pie chart should change according to value of range slider.
We cant use state in the assignment.
problem is that i am new in react and dont know how to change child attribute (stroke-dasharray in my case) value from parent without using state which should be reflected on pie chart.
any one please help me .
my whole code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Raect Aiignment - PI Chart</title>
<script src="https://unpkg.com/#babel/standalone/babel.min.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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script> -->
<script src="https://unpkg.com/chart.js#2.7.2/dist/Chart.bundle.js"></script>
<!-- chartkick dependency on chart.js -->
<script src="https://unpkg.com/react-chartkick#0.3.0"></script>
<style>
.circle_style
{
fill: #f4fc16;
stroke: #DF5C24;
transition: stroke-dasharray 1s linear infinite
}
.svg_style {
background: #f4fc16;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const svgVars = {
svgWidth: 100,
svgHeight: 100,
defaultRadius: 25,
cX: 50,
cY: 50,
defaultStrokeWidth: 50, // 2*circleRadius = 50
};
const circumferenceWidth = () => Math.PI * 2 * svgVars.defaultRadius;
var dashWidth = (rangeSliderValue = 50) => {
return ( rangeSliderValue * circumferenceWidth() / 100).toFixed(3) ;
};
class Slider extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<form id="slider_form" role="form">
<input type="range" min={0} max={100} defaultValue={25} step={1} onChange={this.props.doAfterSlide} />
</form>
);
}
}
class Head extends React.Component {
render() {
return (
<h1>PI Chart with range slider</h1>
);
}
}
class Chart extends React.Component {
render() {
let cirStyle = {
strokeDasharray: `${ dashWidth() } ${ circumferenceWidth() }`,
strokeWidth: svgVars.defaultStrokeWidth
}
return (
<svg width={ svgVars.svgWidth } height={ svgVars.svgHeight } className="svg_style">
<circle r={ svgVars.defaultRadius } cx={ svgVars.cX } cy={ svgVars.cY } style={ cirStyle } className="circle_style" />
</svg>
);
}
}
class PieChart extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.updatePiechart = this.updatePiechart.bind(this);
}
updatePiechart(e) {
let sliderValue = e.target.value;
let dw = dashWidth(sliderValue);
console.log(dw);
console.log("hello");
}
render() {
return (
<div>
<Head />
<Slider doAfterSlide={this.updatePiechart} />
<Chart />
</div>
);
}
}
/**
* Render
*
*/
ReactDOM.render(
<PieChart />,
document.getElementById('root')
);
</script>
</body>
</html>
You could store the new dashWidth value in a global variable or property of the PieChart class, and pass this value to Chart through props.
Then call this.forceUpdate() to cause the PieChart to re-render when it changes.
Note, I would never do this in real code, instead I would use state, since this is exactly what state is meant to be used for. Not allowing the use of state is a really strange constraint for a assignment using React.
First of all I want to clear this I am using cdn for react and using ajax for fetching the details from the json file.
So,I have a json file reactjs.json which looks like...
[
{
"e64fl7exv74vi4e99244cec26f4de1f":[ "image_1.jpg","image_2.jpg"]
}
]
index.html
<!DOCTYPE html>
<html>
<head>
<title>Image Viewer-Static</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/babel">
class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
images: []
};
}
componentDidMount() {
axios.get('reactjs.json').then(res => {
console.log(res.data);
this.setState({ images: res.data });
});
}
render() {
const { images } = this.state;
return (
<div>
{this.state.images.map((images, index) => (
<PicturesList key={index} apikeys={images.e64fl7exv74vi4e99244cec26f4de1f} />
))}
</div>
);
}
}
class PicturesList extends React.Component {
render() {
return (
<img src={this.props.apikeys} alt={this.props.apikeys}/>
);
}
}
ReactDOM.render(
<FetchDemo/>,
document.getElementById("root")
);
</script>
</body>
</html>
I want to show the image named image_1.jpg,image_2.jpg but this.props.apikeys fetch the value like image_1.jpg,image_2.jpg
images
But I want that it gives two values and show the two image.
I tried a lot to solve this but fails.Any suggestion and help will be welcomed.
Here you are setting the array [ "image_1.jpg","image_2.jpg"] to apiKeys in
<PicturesList key={index} apikeys={images.e64fl7exv74vi4e99244cec26f4de1f} />
So when you try to set the image src here
<img src={this.props.apikeys} alt={this.props.apikeys}/>
what you are setting as this.props.apikeys to src is an array. You have to handle the two images in the array separately to set the source of each image as a String. Try as follows.
{this.props.apikeys.map((image, index) => (
<img src={image} alt={image}/>
))}
since you already have the json file in the file structure you can just import and use it..
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import reactjsJSON from "./reactjs.json";
class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
images: reactjsJSON
};
}
** Edit: **
Your html file
<!DOCTYPE html>
<html>
<head>
<title>Image Viewer-Static</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/babel">
class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
images: []
};
}
componentDidMount() {
axios.get('/reactjs.json').then(res => {
console.log(res.data);
this.setState({ images: res.data });
});
}
render() {
const { images } = this.state;
return (
<div>
{ this.state.images.map(imageObjs =>
Object.keys(imageObjs).map(key =>
imageObjs[key].map((image, index) => (
<PicturesList key={index} apikeys={image} />
))
)
)}
</div>
);
}
}
class PicturesList extends React.Component {
render() {
console.log(this.props)
return (
<img src={this.props.apikeys} alt={this.props.apikeys}/>
);
}
}
ReactDOM.render(
<FetchDemo/>,
document.getElementById("root")
);
</script>
</body>
</html>
Your JSON, tested for all possibilities, replaced with dummy images
[
{
"e64fl7exv74vi4e99244cec26f4de1f": [
"https://picsum.photos/200?image=2",
"https://picsum.photos/200?image=2"
],
"e64fl7exv74vi4e99244cec26f4deop": [
"https://picsum.photos/200?image=2",
"https://picsum.photos/200?image=2"
]
},
{
"e64fl7exv74vi4e99244cec26f4de1g": [
"https://picsum.photos/200?image=2",
"https://picsum.photos/200?image=2"
]
}
]
serve both the files in same http server and check the output.... since both files are served from same server u can add './' path to fetch and get JSON data...
Looks to me like you are receiving this JSON repose & then setting a JSON object into your state. Try looking at
JSON.parse()
. Your also setting the whole JSON object to your images array. You need select a key.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
I write a demo in codesandbox: https://codesandbox.io/s/oorn5o162q, you can check it out.
I use two real image urls in json, and refine your component code.
I wonder if we can add multiple react components into HTML without having the related files usually downloaded with npm, or added to a normal HTML but we add a certain component for a chat app as my attempt here, here is a long example:
<html lang="en">
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.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>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
state={
messages:[
{ }
],
userId:''
}
addMessage=(message)=>{
message.num = Math.random();
message.id=this.state.messages.id;
let messages = [...this.state.messages, message];
this.setState({
messages })
}
addId=(userId)=>{
this.setState({
userId
})
}
render() {
return (
<div className="appContainer">
<User userId={this.addId} />
<TopSection Users={this.state.userId}/>
<Messages userId = {this.state.userId} messages={this.state.messages}/>
<AddMessage addMessage={this.addMessage} />
</div>
);
}
}
}
const Messages = ({messages, userId}) =>{
const messageList= (messages.length)? (messages.slice(1).map(message=>{
return(
<div className="message" key={message.num}>
<span key={userId.num}>{message.content?(userId):(null)}</span>
<p>{message.content}</p>
</div>
)
})) : (null);
return(
<div className="textContainer">
{messageList}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
please let me know if there is away to get this to work.
You mean add components to different dom nodes ?
import {render} from 'reactDOM'
import React from 'react'
import AppOne from './appOne'
import AppTwo from './appTwo'
render(<AppOne />, document.getElementById('appOne'));
render(<AppTwo />, document.getElementById('appTwo'));
React v16 has portals as well for adding componnets to differnt parts of the dom tree
I'm new to Reactjs and I am getting the "unexpected token error" in my first attempt to build a series of components.
My console reports this:
SyntaxError: http://localhost:3004/app.js: Unexpected token (14:11)
class AnnouncementList extends React.Component
{
render() {
^
return (
I got really frustrated when searching the console output on Google it really messes up when we insert code in the search keywords. I have the babel plugin set up.
class AnnouncementsDashboard extends React.Component
{
render() {
return (
<div>
<AnnouncementList/>
<div>
);
}
}
class AnnouncementList extends React.Component
{
render() {
return (
<div>
<Announcement />
</div>
);
}
}
class Announcement extends React.Component
{
render(){
return (
<div></div>
);
}
}
/**
* #jsx React.DOM
*/
ReactDOM.render(<AnnouncementDashboard />, document.getElementById('container'));
updated, html included.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Disable browser cache -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Project Two: Timers</title>
<link rel="stylesheet" href="vendor/semantic-ui/semantic.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="vendor/babel-core-5.8.25.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
<script src="vendor/uuid.js"></script>
<script src="vendor/fetch.js"></script>
</head>
<body>
<div id="main" class="main ui">
<h1 class="ui dividing centered header">Timers</h1>
<div id="container"></div>
</div>
<script type="text/babel" src="./client.js"></script>
<script type="text/babel" src="./helpers.js"></script>
<script type="text/babel" data-plugins="transform-class-properties" src="./app.js"></script>
</body>
</html>
Adding a scenario that works:
/* eslint-disable react/prefer-stateless-function */
/* eslint-disable react/jsx-boolean-value */
class AnnouncementDashboard extends React.Component
{
render() {
return (<div>"I'm am React, when something goes wrong I always say - unexpected token" </div>);
}
}
ReactDOM.render(<AnnouncementDashboard/>, document.getElementById('container'));
the only issue I see is the AnnouncementsDashboard component is missing a closing slash on the container div. Also I would restructure the code to use stateless functions. Unless you plan on adding state to them later on.
const Announcement = () => {
return (
<div></div>
);
}
const AnnouncementList = () => {
return (
<div>
<Announcement />
</div>
);
}
const AnnouncementsDashboard = () => {
return (
<div>
<AnnouncementList/>
</div>
);
}