Skip to main content

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 be 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 was tested on a Mac OS V10.13 machine. For developers using windows machines, command syntax will change a bit.

Initial setup

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

From scratch

When we are starting a single-page web project from scratch, we should use NPM or NPX toolchains 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 the development phase. Understand, it just provides you a bare minimum structure, we are the ones who extend it with best practices to manage our source code in a more structured way.

NodeJS single page app project structure

src folder keeps JavaScript files. the public folder has an HTML file.

Before going ahead, let's start the local development server to check out 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

An existing project

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

Using npm to install react dependencies in an 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/react@16/umd/react.development.js"></script>
<br>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

ES6 and JSX

We recommended using 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 is a syntax extension to JavaScript, more elegant and effective way to define UI elements.

Let's 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 the scripting language syntax, but it is very powerful, which we will see further in React tutorial series.

We recommend that JSX create a 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
Labels:

Comments

Post a Comment

Popular posts from this blog

Java Functional Interface

1. What is Functional Interface An interface with only one abstract method is called Functional Interface. Pre Java 8, there was no concept of Functional Interface. However, interfaces like Comparator and Runnable have only one abstract method. Hence they fell into the Functional Interface category in Java 8 unintentionally. 2. Example 2.1 getSellingPrice method snippet from App.Java package org.geekmj.java8; public class App { public static void main(String[] args) { // } private static float getSellingPrice(float cost, float couponDiscount, DiscounterFunctionalInterface discounter) { return cost - couponDiscount - discounter.discount(cost); } } Here, we have a method getSellingPrice , with three arguments cost , couponDiscount and discounter . discounter is of type DiscounterFunctionalInterface . It calculates the selling price for an item. 2.2 DiscounterFunctionalInterface.java package org.geekmj.java8; @FunctionalInterface public interface DiscounterFunctiona...
Post a Comment
Read more

Useful SFTP terminal commands

First Step - Connect to a remote computer sftp -i ~/.ssh/LightsailDefaultKey-ap-south-1.pem ubuntu@52.66.180.155 Similar to ssh command. Output: Connected to 52.66.180.155. sftp> Remote and Local computer commands When we relay basic terminal commands at sftp> like 'pwd , ls , cd , and it is executed at the remote computer. Basic terminal commands above when prefixed with l like lpwd , lls , lcd and etc. it is executed at a local computer. For e.g. List all files in the present working directory at the remote computer: sftp> ls List all files in the present working directory at the local computer: sftp> lls Sending a local computer file to present the working directory of a remote computer sftp> put /Users/mj/Downloads/test.png Output Uploading /Users/mj/Downloads/test.png to /home/ubuntu/test.png /Users/mj/Downloads/tech-mrit-prod.ovpn 100% 13KB 382.9KB/s 00:00 References How To Use SFTP to Securely Transfer Files with a Re...
Post a Comment
Read more

Understanding Type Checking

A few examples of types in the context of programming language can be integer, float, character, string, array, etc.  When a program executes then data flow between instructions and values of specific types are assigned to a variable after some operation. It's important for the system to verify if the correct types are used as operands in operations. For e.g. In a sum operation, the expectation for operands to be of numeric type. The program's execution should fail in the case there is inconsistency. We can classify programming languages into two categories based as per their ability to cater to type safety: Dynamically Typed Language Statically Typed Language
Post a Comment
Read more