In this tutorial, we’re gonna look at how to create a simple React Hello World Application in NodeJs runtime, Yarn dependency management and Babel transpiler.
Contents
I. Set up Environment
1. Install Node.js
Go to NodeJs website, download and install it on your PC.
You can check if the process finished with cmd:
|
1 2 |
> node -v v6.11.2 |
2. Install Yarn
Yarn is a package management in your web projects. It is fully backward compatible with the npm package manager structure (package.json and node_modules).
To install Yarn, run this cmd: npm install -g yarn
Then check Yarn version to determine that the installation is successful.
|
1 2 |
> yarn -v 1.5.1 |
3. Install Babel CLI
Babel is a transpiler for JavaScript, it can turn JSX into React function calls.
For example:
|
1 |
var template = <p id='tempId'>Java Technology - Spring Framework</p>; |
will be translated into:
|
1 2 3 4 5 |
var template = React.createElement( 'p', { id: 'tempId' }, 'Java Technology - Spring Framework' ); |
To install Babel, run this cmd: npm install -g babel-cli@6.24.1.
Then add Babel to Yarn: yarn global add babel-cli:
II. React Hello World Example
1. Technologies
– React 16
– NodeJs 6.11.2
– NPM 3.10.10
– Yarn 1.5.1
– Babel 6.24.1
2. Project Structure
3. Step by Step
3.1 Set up Project folder
Create folder for HelloWorld project, then make subfolders and subfiles like this:
3.2 Dependency
Open package.json, write these lines for project information and dependency:
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "HelloWorld", "version": "1.0.0", "main": "index.js", "author": "JavaSampleApproach", "license": "MIT", "dependencies": { "babel-preset-env": "1.5.2", "babel-preset-react": "6.24.1" } } |
3.3 index.html
This is the default HTML file that appears in the browser when we invokes our application.
We also use this HTML file to embed React files and reference to our javascript app.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSA React Demo</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="./scripts/app.js"></script> </body> </html> |
div tag with id="app" for rendering template in the next step.
3.4 app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
console.log('javasampleapproach.com'); // JSX const site = { title: 'Java Sample Approach', description: 'Java/Javascript Technology - Spring Framework' }; function getContent(content) { if (content) { return <p>{content}</p> } else { return <p>[Under Construction...]</p> } } const template = ( <div> <h2>{site.title}</h2> <p>{site.description}</p> {getContent(site.content)} </div> ); const appRoot = document.getElementById('app'); ReactDOM.render(template, appRoot); |
We use ReactDOM.render method which has two arguments:
– the first is template for UI element.
– the second is HTML DOM element where React will place that UI element (with id="app").
3.5 Run & Check result
– Add LiveServer to Yarn by running 2 cmd:
+ npm install -g live-server
+ yarn global add live-server
– Point cmd to HelloWorld project folder, then run cmd: yarn install:
node_modules folder and yarn.lock file now appear in our project folder:
– Run cmd: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
Now, a new app.js file appear in public/scripts folder, code insides this file was generated automatically (and also update automatically whenever we modify and save src/app.js):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
'use strict'; console.log('javasampleapproach.com'); // JSX var site = { title: 'Java Sample Approach', description: 'Java/Javascript Technology - Spring Framework' }; function getContent(content) { if (content) { return React.createElement( 'p', null, content ); } else { return React.createElement( 'p', null, '[Under Construction...]' ); } } var template = React.createElement( 'div', null, React.createElement( 'h2', null, site.title ), React.createElement( 'p', null, site.description ), getContent(site.content) ); var appRoot = document.getElementById('app'); ReactDOM.render(template, appRoot); |
– Open new cmd, point to Project folder, run cmd: live-server public
Result in Browser:
