Can I simply add the react library to my html page using a script tag?
Where can I add the following code so it will be executed?
ReactDOM.render(
<h1>Hello, worl151d!</h1>,
document.getElementById('root')
);
-
1Stack overflow has a Documentation section for things just like this. stackoverflow.com/documentation/reactjs/797/…John Ruddell– John Ruddell2017-04-06 18:51:57 +00:00Commented Apr 6, 2017 at 18:51
Add a comment
|
2 Answers
Yes you can, For that you need to add the reference of react, react-dom and babel in html page, and then directly put the ReactJs part inside script tag, with type of the script as text/jsx.
Use these reference for react, react-dom and babel:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
Don't forgot to add the reference of babel, that is required to transpile JSX code to javascript.
Mention the type of the script as text/jsx, otherwise babel will no transpile that part.
Check the working example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id='root'/>
<script type='text/jsx'>
ReactDOM.render(
<h1>Hello, worl151d!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>Check these for details:
Comments
Yes, you can. Check out the docs here
It basically says you can add the following script tags to your <head>:
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
Please note that in order to use JSX, ES6, you'll have to include the CDN scripts for a transpiler like Babel too:
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
When you gain some momentum that same page offers some simple advice on using a package manager like npm or yarn to set up your projects
1 Comment
Chaitanya
I installed npm . Please tell me how its helping me for projects. where do I write my code ?