score:38
edit: oddly, after our comments above, i checked to see if it was indeed the babel core version, i am using this one in my fiddle:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
the second i switch to your version above i get this:
uncaught typeerror: cannot read property 'keys' of undefined
use react.createclass
not reactdom.createclass
and wrap multiple lines of html in parenthesis like so:
working example: https://jsfiddle.net/69z2wepo/38998/
var hello = react.createclass({
render: function() {
return (
<div>
<h1>hello world</h1>
<p>this is some text</p>
</div>
)
}
});
reactdom.render(
<hello name="world" />,
document.getelementbyid('container')
);
score:-3
i haven't worked with react before, but there are a few things that i see that may be causing your issues. first, react.createclass
instead of reactdom.createclass
. second, you need to wrap your html in parentheses:
var helloworld = react.createclass({
render: function() {
return (
<div>
<h1>hello world</h1>
<p>this is some text></p>
</div>
);
}
});
this should get it working
score:0
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
this is the version of babel-core which isn't giving me the error as shown below:
if you want to use the latest version, you can use the latest standalone version. (as per 22-nov-2018)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
but this gives the following warning :
"you are using the in-browser babel transformer. be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"
score:3
today is my first day with react, and i've faced this issue when i tried to use babel to transpile the jsx!
the issue is the version you are trying to use, please use this one instead:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
don't forget to write type="text/babel"
in the <script>
tag which you will write the jsx in to let babel transpile it for you, if you don't, you will find this error (as i have faced it too! :d):
uncaught syntaxerror: unexpected token <
score:10
just to be clear, as the other answers are a bit convoluted. the problem was using "babel-core" instead of "babel-standalone". just look up for a cdn for babel-standalone instead.
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js
Source: stackoverflow.com
Related Query
- reactjs Cannot read property 'keys' of undefined
- Axios ReactJS - Cannot read property 'setState' of undefined
- Uncaught TypeError: Cannot read property 'bool' of undefined after upgrade reactjs
- ReactJS - Cannot read property 'preventDefault' of undefined
- TypeError: Cannot read property 'presetToOptions' of undefined in webpack-cli with ReactJs
- Reactjs : TypeError: Cannot read property 'propTypes' of undefined
- Uncaught TypeError: Cannot read property 'func' of undefined in reactjs
- TypeError: Cannot read property 'data' of undefined - can't access Object "props" beyond certain level in Reactjs
- ReactJS Cannot read property setState of undefined
- ReactJs - Uncaught TypeError: Cannot read property 'string' of undefined
- ReactJs browser Cannot read property 'keys' of undefined
- TypeError: Cannot read property 'map' of undefined using ReactJs
- Cannot read property 'map' of undefined with REACTJS
- ReactJS - TypeError: Cannot read property '0' of undefined
- ReactJS ES6 function binding - Uncaught TypeError: Cannot read property 'update' of undefined
- ReactJS Cannot read property 'bind' of undefined
- ReactJS -- TypeError: Cannot read property 'name' of undefined
- ReactJS - Cannot read property 'location' of undefined at new Router
- Cannot read property '0' of undefined - stuck with reactjs tutorial
- ReactJS Uncaught TypeError: Cannot read property 'target' of undefined
- Reactjs TypeError: Cannot read property 'style' of undefined
- Cannot read property 'parentNode' of undefined error in ReactJS Redux form
- Apexcharts - ReactJs - real time - Cannot read property 'filter' of undefined
- Cannot read property of undefined in Reactjs
- Cannot read property 'enqueueSetState' of undefined in ReactJS
- TypeError: Cannot read property 'token' of undefined error in reactjs login page
- Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS
- Uncaught TypeError: Cannot read property 'props' of undefined in reactJS
- TypeError: Cannot read property 'focus' of undefined in ReactJS
- reactjs - Uncaught TypeError: Cannot read property 'map' of undefined
More Query from same tag
- Sharing context with a nested component, getting UserContext is not defined
- Animation CSSTransition React
- react-leaflet geojson style adapted per feature
- How to set a type of a function's prop after destructuring?
- React - Calling API after onclick
- Redux reducers -- changing deeply-nested state
- How to access name from Chakra-ui NumberInput component?
- scrollIntoView() scroll only in div in React
- Enzyme simulate change input don't change value on React Hooks
- Cannot read property 'originalHref' of undefined error. Ionic react IonTabBar issue
- Clickable row in Table
- how to change icon size in googleMap ,react integration
- React useContext - wait for api to finish
- How to wait for event request of Rudderstack JavaScript SDK?
- Delete a Row using Fetch API Use Effect - ReactJS
- How to use MgtTeamsChannelPicker in React?
- React import html - Module parse failed: You may need an appropriate loader to handle this file type
- React `useState` hooks - set the state and use it immediately
- data loss in local Storage on page reload
- react-select does not "fire" the `onChange` handler
- Persisting Stateful React Components
- Add g tag into svg tag without jquery
- Erasing a character produces a bug
- How to recursively render Posts in React
- React update array index before function execution
- How to efficiently design components / configure store when using react-redux
- REACTJS pass a variable into props
- How should I unit test mapDispatchToProps in Redux?
- jQuery wrap equivalent in ReactJS
- How to change a svg image along with text with hover in CSS