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

Comments

Popular posts from this blog

Working with request header in Jersey (JAX-RS) guide

In the  previous post , we talked about, how to get parameters and their values from the request query string. In this guide learn how to get request header values in Jersey (JAX-RS) based application. We had tested or used the following tools and technologies in this project: Jersey (v 2.21) Gradle Build System (v 2.9) Spring Boot (v 1.3) Java (v 1.8) Eclipse IDE This is a part of  Jersey (JAX-RS) Restful Web Services Development Guides series. Please read Jersey + Spring Boot getting started guide . Gradle Build File We are using Gradle for our build and dependency management (Using Maven rather than Gradle is a very trivial task). File: build.gradle buildscript { ext { springBootVersion = '1.3.0.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") } } apply plugin: 'java' apply plugin: 'eclipse' a

Ajax Cross Domain Resource Access Using jQuery

Some time back in our project we faced a problem while making an Ajax call using jQuery. Chrome Browser console had given some weird error message like below when we try to access one of our web pages: When we try to access the same web page in the Firefox browser, it doesn't give any error in the console but some parsing error occurred. In our case, we were accessing XML as an Ajax request resource. I was curious to check if the non-XML cross-domain resource was successfully loading or not. But finally, I realized that it is not going through. jersey-spring-boot-quick-starter-guide In our Ajax call, requesting domain was not the same as the requested URL domain. $.ajax({ url: "https://10.11.2.171:81/xxxxxx/xxxxxxx.xml" , type : "get" , success: function (response) { alert( "Load was performed." ); }, error : function (xhr, status) {

FastAPI first shot

Setup on my Mac (Macbook Pro 15 inch Retina, Mid 2014) Prerequisite Python 3.6+ (I used 3.7.x. I recently reinstalled OS after cleaning up disk, where stock Python 2.7 was available. I installed Pyenv and then used it to install 3.7.x). I already had a git repo initialized at Github for this project. I checked that out. I use this approach to keep all the source code safe or at a specific place 😀. I set the Python version in .python-version file. I also initialize the virtual environment using pyenv in venv folder. I started the virtual environment. FastAPI specific dependencies setup Now I started with basic pip commands to install dependency for the project. I saved dependencies in requirements.txt  the file. Minimal viable code to spin an API Server FastAPI is as cool as NodeJS or Go Lang (?) to demonstrate the ability to spin an API endpoint up and running in no time. I had the same feeling for the Flask too, which was also super cool. app/main.py: from typing i