I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
Related
I am currently taking a React for Beginners course and following along using the course files provided. In the first chapter, they teach us how to create a simple Hello World example and in this example(both in the sample files and in the video) there is an extra closing script tag in the file. Just wondering if this has something to do with React or if the instructor made a mistake:
<!DOCTYPE html>
<html>
<title>Hello World Example</title>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- React -->
<script src="https://unpkg.com/react#0.14.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#0.14.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react#0.13.3/dist/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
</script>
</body>
</script> <!-- Extra closing tag -->
</html>
I am learning ReactJS. I visited this in order to have some basic lessons. After going through first lesson, I could write following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world with date time in ReactJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>
But to my surprise, it is working here but not on my computer or at my fiddle here. Can you please show me why my code is not working? Thanks.
Change text/jsx to text/babel . It works.
The problem is that you don't have JSX processing enabled.
If you're using jsFiddle you can move your JS code to JavaScript edit section and click on settings button in top-right corner of this section and then select Babel + JSX from language select.
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code
I setup a standard HTML page and imported react and babel .js files in order to learn how to use the React framework. Unfortunately, I am unable to get the following example to work. I am not using grunt or another runner to compile the JSX code, so I imported the broswer.min.js file.
Can you see what I am doing wrong? I am not worried about performance and I just want to use this app for learning purposes, so I would prefer not to have local runners to compile the JSX code which will add setup complications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Test!</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
React Test...
<hr>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, it works!</h1>, document.getElementById('example'));
</script>
</body>
</html>
I am building an webapp using react native. I am very new to react native. I started to build an simple page but its give an error. I don't know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
<script src="scripts/header.js"></script>
</body>
</html>
The above screenshot is of header.js. Where I did wrong could not understand. Help me out for any silly mistake.
Thanks
Your file header.js contains JSX, which the browser doesn't understand.
You need to transform your JSX file into JS before attempting to load it in the browser.
One way to do this is to include browser.js (from Babel) and add the attribute type="text/babel" to your JSX script.
Other options include using a tool such as Webpack with a loader that can pre-process your JSX before sending it to the client.