Getting started with React

React is a javascript framework for building user interface. It is very common to see React used along with Redux, for complex web application. In the next session I will talk about redux.

Installation

Read complete instruction here.

if you are using Webstorm, make sure to change the settings.

Lets understand the basics.

index.js

This is the main root component that renders the App component.

index.html

App.js

We might observe some changes in the html syntax when it is rendered using react. Note the below example

They follow the camel case syntax, ie the first character of the word is caps.

Terms

state : State is best described as how a component’s data looks at a given point in time.

props : Props are best explained as “a way of passing data from parent to child.”

Our study example

Folder structure:

index.js

FormElement.js

 

We covered almost all the basics of React in this tutorial. Next tutorial will mainly discuss about my webapp Musio, which is build using react and redux.