The Complete React Web Developer Course (2nd Edition)
03 Hello React
007 Setting up a Web Server
# npm install -g live-server
# su ${username}
$ cd /project/
$ mkdir -p INDECISION-APP/public
$ vi INDECISION-APP/public/index.html
<html>
<head>
<meta charset="UTF-8">
<title>Indecision App</title>
</head>
<body>
This is my HTML file!
</body>
</html>
# live-server INDECISION-APP/public
host:
http://localhost/
All ok
008 Hello React
$ vi INDECISION-APP/public/index.html
<html>
<head>
<meta charset="UTF-8">
<title>Indecision App</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
$ vi INDECISION-APP/public/scripts/app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
console.log('App.js is running!');
// JSX - JavaScript XML
var template = React.createElement(
"h1",
{id: "someid"},
"This is JSX from app.js"
);
var appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);
009 Setting up Babel
http://babeljs.io/docs/plugins/preset-react/
# npm install -g babel-cli
$ cd INDECISION-APP/
$ vi src/app.js
1
2
3
4
5
6
7
8
9
console.log('App.js is running!');
// JSX - JavaScript XML
var template = <h1>This is JSX from app.js</h1>;
var appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);
$ npm init -y
$ npm install --save-dev babel-preset-react babel-preset-env
$ babel src/app.js --out-file=public/scripts/app.js --presets=env,react
$ babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch