React – setup and getting started

As per React website, It is a declarative, flexible and efficient JavaScript Library for web user interface development.

In this tutorial we will learn how to get started with this framework and at the end of it we will able to set up, run and test a basic text displayed in the browser.

Tools & Libraries used:

  1. React 16.x
  2. NodeJS 6.x
  3. NPM 5.x

Note: This tutorial tested on a Mac OS V10.13 machine. For developers using windows machine, command syntax will change a bit.

Initial setup

We need NodeJS 6.x and NPM 5.x installed for build pipeline of React project. See reference section to know more about installing these prerequisite.

From scratch

When we are starting a single page web project from scratch, we should use NPM or NPX toolchain to get the skeleton code and run the project in development mode.

$ sudo npm install -g create-react-app
$ create-react-app 01-getting-started

Previous commands create a standard React project structure with required files to build and run the single page application in development phase. Understand, it just provides you a bare minimum structure, we are the one who extend it with best practices to manage our source code in more structure way.

NodeJS single page app project structure

NodeJS single page app project structure

src folder keeps JavaScript files. public folder have HTML file.

Before going ahead, let’s start the local development server to checkout how the default app looks.

$ cd 01-getting-started
$ npm start

It will build the project and start a local web server on port 3000, and it looks like it. We will add more details further.

ReactJS default app landing page

ReactJS default app landing page

An existing project

We don’t need to make much change in the existing project structure to use React in that. Try React in a standalone component first to get started and slowly extend it further.

Using npm to install react dependencies in existing project

npm install --save react react-dom

We can also include react js files in the HTML file directly like it. (We are using CDN hosted js files)

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script><br><script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

ES6 and JSX

We recommended to use React with babel to enable ES6 and JAX support. These improve development efficiency.

Introducing JSX

React provide core JavaScript based syntax to define UI element. Though JSX, a syntax extension to JavaScript, more elegant and effective way to define UI element.

Let say we have to display Hello World text inside a paragraph. See how we can do it in plain JS and JSX.

const pElement = React.createElement('p', null, `Hello World`);
const pElement = <div>Hello World</div>;

Well JSX syntax looks very similar to scripting language syntax, but it is very powerful, which we will see further in React tutorial series.

We recommend JSX to create UI element.

References

  1. Introduction
  2. NPM & Front End Packaging
  3. Webpack module bundle concepts
  4. NodeJS and NPM installation guide
  5. Babel for enabling ES6

Leave a Reply

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