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