ReactJS Tutorial

UI developers and geeks are struggling to catch the technology stacks nowadays.Big cats including Google and Facebook are   in this race.ReactJS ,a contribution  by Facebook is really a game changer.Good percentage of UI experts are a bit biased towards using ReactJS.We shall begin our discussion with  fundamentals.

Overview of  ReactJS

As we seen earlier,this is one of the pertinent solutions for UI business requirments.Initially developed by Facebook,it started gaining popularity when introduced  to Facebook news feed and Instagram.The initial release of ReactJS was in 2013.

Main Features of ReactJS

Virtual DOM

This is a key feature of ReactJS with which ReactJS creates an in memory data structure cache ,calculates the diffrerences and updates the Document Object Model(DOM)

JSX

ReactJS uses JSX for creating components.JSX is a statically typed object oriented language which is then converting to more efficient JavaScript code to run in browsers.

One way Data Flow

Properties are passed to a component’s renderer as properties in its HTML tag. A component cannot directly modify any properties passed to it.But instead passing callback functions that  modify values.

Sample application with ReactJS

Now it is pretty good if we familiarize ReactJS with a sample application.This application displays a welcome message in the browser window

Steps are below

step 1)If not already installed, Install Node.js and npm
step 2)Install babel transpiler and babel-cli using npm so that we can use es6 and React presets

step 3)Create a project directory sampleApp and go to the directory

step 4)do npm init with defaults(As mentioned here)

step 5)Install webpack bundler

step 6)Replace the test entry in scripts of  package.json

step 7)Install the react and react dom

npm install react-dom –save

step 8)Install the babel presets and tools

step 9)Create the following files in the project directory

SampleApp.jsx

main.js

webpack.config.js

The port we are using  8030
index.html

10)Now run the application

Observe the console for the success message.The output in the browser would be the welcome message .