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:

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.

3. Install Babel CLI

Babel is a transpiler for JavaScript, it can turn JSX into React function calls.
For example:

will be translated into:

To install Babel, run this cmd: npm install -g babel-cli@6.24.1.
Then add Babel to Yarn: yarn global add babel-cli:

react-hello-world-example-yarn-add-babel

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

react-hello-world-example-project-structure

3. Step by Step
3.1 Set up Project folder

Create folder for HelloWorld project, then make subfolders and subfiles like this:
react-hello-world-example-create-folder

3.2 Dependency

Open package.json, write these lines for project information and dependency:

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.

div tag with id="app" for rendering template in the next step.

3.4 app.js

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

react-hello-world-example-add-live-server

– Point cmd to HelloWorld project folder, then run cmd: yarn install:

react-hello-world-example-yarn-install

node_modules folder and yarn.lock file now appear in our project folder:

react-hello-world-example-after-yarn-install

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

– Open new cmd, point to Project folder, run cmd: live-server public
Result in Browser:

react-hello-world-example-live-server-result

III. Source code

ReactHelloWorld

By grokonez | March 26, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*