React Hello World example

https://grokonez.com/frontend/react/react-helloworld-example

React Hello World example

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.

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:

> 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.

> 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:

var template = <p id='tempId'>Java Technology - Spring Framework</p>;

will be translated into:

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

More at:

https://grokonez.com/frontend/react/react-helloworld-example

React Hello World example