Menu
I’m trying to build a simple React application and am wondering why I need the browser.min.js file.
I have included both react and react-dom.js, but nothing is displayed unless browser.min.js is also included.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
629
CDN (Content Delivery Network) is a wiser choice when you are just starting with React or have a pre-built website and need to include React Components. As you know, CDNs are handy, and they require minimal setup. They help you get your work started in fewer lines of code.
Yes! With React Native for Web, developers can write a single React Native application that can run natively on Android and iOS, as well as on a web browser using standard web technologies.
JavaScript is one of the primary skills required for ReactJS developers. As such, you will have to test their knowledge of JavaScript concepts surrounding code structure, variables, data types, operators, functions, loops, switch statements, objects, primitives, boolean, arrays, and more.
React uses ES6, and you should be familiar with some of the new features like: Classes. Arrow Functions. Variables (let, const, var)
As you can see in your snippet, the script tag is of type "text/babel", and that's because you are coding using JSX (Javascript with XML on it) inside it.
JSX is coding sugar created to make it more "intuitive" to build XML (HTML in this case) components in javascript code (not only React elements, though). React makes use of it as an abstraction layer over the composition methods used to create/define UI elements. But JSX is not a globally accepted standard, so it isn't supported by all browsers. This is the reason that you need a third party "compiler" library to transform the JSX to vanilla JS, and this is where BABEL comes through.
BABEL is a javascript compiler, and importing its "browser.min.js" file, you are enabling it to "compile" the code inside "text/babel" script tags and execute it as vanilla javascript.
So, in your example, you have the next code:
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
And "browser.min.js" will process it when the page has loaded and the javascript code that will be executed should be something like this:
ReactDOM.render(
React.createElement('H1', null, 'Hello world!'),
document.getElementById('example'));
The main alternatives you have if you don't want to load this "browser.min.js" are:
Have your React code in separate files and compile them whenever you make a change (all of this is server-side). Your html code should reference the compiled files (which should have only vanilla JS code) instead of your original JSX ones. There are several ways to do this depending on your coding tools.
Use only vanilla JS to create and define your React "Html" hierarchy (React.createElement(...)).
Explaining in more detail these methods should be covered in other questions.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
