I started learning React a week ago on my own, mostly because the ‘Roguelike’ project looked like a fun thing to implement. I wanted to learn react without using CodePen, as this would allow each page to stand on its own on my GitHub page.
I got a book on react and starting reading (my first mistake, never buy a book on a rapidly evolving API). I quickly realized I just needed to add a link to react.min.js and react-dom.min.js to my html file to use react. However, getting these files turned into a nightmare. The book mentioned a starter kit, but there is no sign of this on react’s web page. Nothing. I eventually used the CDN links to vomit the contents of these files into my browser, and saved the code to .js files by pasting into my code editor (DON’T use notepad). I didn’t want to use NPM. Why should I install another tool just to get two .js files? No thanks.
So I now had the two files I needed, so I coded the first few examples in the book. They didn’t work. Seems React.DOM no longer exists. Why would they change something so fundamental? Seems irresponsible. My book is now dogfood! Maybe they figured everyone in using JSX? Seems likely.
Ok, so I gota skip ahead and figure out JSX. What do I need to include to use it? I noticed a lot of examples on youtube included a file called browser.min.js. This file contains the Babel library that converts the JSX within the script tag. This is another file that’s hard to find. I searched GitHub for ‘ReactJS-Start-Kit’ and found it, and the react-min files also. I coded a few JSX examples and they worked. The basic ‘hello world’ html file looked like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<script type="text/javascript" src="js/react.min.js"></script>
<script type="text/javascript" src="js/react-dom.min.js"></script>
<script type="text/javascript" src="js/browser.min.js"></script> <!-- Babel core for converting JSX & ES6 to ES5 -->
</head>
<body>
<div id="container"></div>
<script type="text/babel"> // type tells Babel to transform below script.
ReactDOM.render(
<h1>Hello World!</h1>,
//React.createElement('h1', null, 'Hello World'), //Works...but ugly, JSX better?
//React.DOM.h1(null, 'Hello World'), //Dont work...React.DOM depricated?
document.getElementById('container')
);
</script>
</body>
</html>
The three js files are in a ‘js’ subdirectory. I don’t use the CDN links for the react files, since I don’t know how these will change in the future. I don’t want my pages to explode in the future due to unexpected API changes in react (like the React.DOM change).
Anyway, I’d like to know if I’m going about this in the right way. Getting to this point was more difficult then I was expecting. How are react projects developed and deployed in the real world?