How To Build Your First React JS Application

Introduction

React is a JavaScript library that is used to build interactive User Interface (UI). The JavaScript library can build complex UI using components with state that will help in updating the views in an efficient way. 

Benefits of using React Js

• Virtual DOM: It is virtual representation of the DOM. When there is a data update or when a user performs an action then on every such change virtual DOM is re-built and is compared to earlier virtual DOM (object comparison). Once this difference is obtained, it is updated on view, which, in turn, provides better performance
• Server Side Rendering: Rendering part can be moved to node server, sending request to server and getting a response as HTML to show up on browser
• Reusable Components: As complex UIs are built by using smaller components, there are chances of reusing components accepting different props (data) as attributes, but behave in similar way

Setting Up React Project:

1. Install globally create react app hit this command in command line after installing node:

   npm install -g create-react-app

2. Go to the directory where you want to create the project and hit:

   create-react-app <appname>

3. To run a webserver and serve the new application:

   yarn start

4. To minify and bundle the JS code for optimization:

   yarn run build

5. Start the test runner. Unit tests can be written using JEST

   yarn test

6. Pull out configurations and build dependency files to project directory irreversible step, only if we want to manage configuration on our own:

   yarn run eject

Creating a Component:

React means component-based development. We have to visualize the whole app as an integration of many small components. Let’s take the example of Billing Application:

1. Display products
2. Filter products by search field text
3. User can add new product
4. Display total bill amount

Application can be built in 3 broad steps:

Step 1: Before getting into coding, we have to think of the possible component. Single responsibility principle design pattern is very helpful in this step and it says: Component should only perform single responsibility. If you notice it is doing more than one, decompose them into multiple component and we can think of our application having 7 main components. And, they are:

1. Application header
2. Add a new product
3. Filter bill (Search)
4. Product List
5. Title bar of product list (part of component 4)
6. Single bill row of product list (part of component 4)
7. Total Bill Amount

Step 2: Create all the component listed above as static components that takes props as data (attributes) and display it in a way that we are not worried of data flow but are concentrating on view and rendering. We need to keep in mind the fact that Single Product Row component will be reusable and will be called inside a loop. Based on the available data, each iteration bill details will be shown.

Step 3: Define data flow and state. State should be non-redundant, with minimal set of data. If we want total bill amount, we should not have total as separate attribute as it will be computed based as sum of all the individual product total. This avoids the problem of updating separate total variable when a new bill is added or deleted, as it’s calculated on the fly and we are sure it is always consistent with the bill list.

There are different ways of inter component communication that one comes across during a complex project. They are as follows:

1. Parent to child

   1. Props: Are the easiest way where we pass values as attribute from parent to child. In the below mentioned example, we loop through all the products and pass the product to ProductDetailsRow component that renders single row.

      { this.props.products.map((product,i)=>{

      return (

      <ProductDetailsRow detail={product}></ProductDetailsRow>

      )
      })
      }

   2. Refs: Ref is a special attribute to component that accepts a callback function as soon as the component is mounted with parameter as reference to component being mounted. Later, we can access the child component functions using Ref. Let’s take a scenario where an application loads by default. In that case, we would like to focus on the search bar for filtering product. Considering <App> component is parent and <SearchInputBar> is Filter Component 3 input box we can do as follows:

      <SerachInputBar ref={(cRef)=>{this.searchRef=cRef}}></SerachInputBar>
      In componentDidMount of <App> we can write:
      this.searchRef.focus()

      In this case, we have access to child and hence can pass the data by setting the value property of serach Ref and passing data from parent App component to child SearhInputBar component.

2. Child to Parent

   1. Callback: We can pass a function to child from parent as props, which accepts the data as parameter. When child calls, the props function will, in turn, call the parent function with data.

      <AddProduct onAdd={(prodDetail)=>{this.addProductToBill(prodDetail)}}></AddProduct>
      In AddProduct we can do this.props.onAdd({desc:'ABC',cost:50,qty:3})
      This will call addProductToBill with new product object that can be pushed to products array

   2. Event bubbling: Add a click or keypress or any event to parent as per native JS concept. If such an event happens on any child component, it will trigger handler in parent as per event bubbling concept and data can be received using the event attribute.

3. Siblings

   1. If we want to communicate between two siblings, then the common data that is shared needs to reside in common parent of both the component and passed to both the children as props. If one child updates, it will update the parent state. This will, in turn, change props sent to children and the siblings can communicate with each other. In our application, filter component has the filter keyword and we have to pass it to Product list component to filter and view only filtered products. Common parent to both is App component.
      

      App component has state as:
      this.state = {
      products: [
      {desc:"Monitor",cost:3000,qty:2},
      {desc:"Keyboard",cost:500,qty:2}
      ],
      filterBy: ""
      }
      <SerachInputBar onChange={(e)=>{this.state.filterBy=e.target.value}}></SerachInputBar>
      We pass this.state.filterBy to Product List Component 4 as props and use it to filter the list
      <ProductList
      filterTxt={this.state.filterBy} products={this.state.products}>
      </ProductList>
      ProductList component has below code:
      { this.props.products.map((product,i)=>{
      if(this.props.filterTxt && !bill.description.includes(this.props.filterTxt)) return;
      return (
      <ProductDetailsRow detail={product}></ProductDetailsRow>
      )
      })
      }

      In above code we see the common state of parent is shared between two siblings search and list and if the filter text is defined it checks whether current product row has filter text else return nothing. 

4. Component not linked to each other

   1. Global variable using window. This can be used anywhere in application
   2. Context: React warns this to be in experimental phase and avoid using it. The concept is to set the context and whole subtree can use the context
   3. Using Observable/Subscriber libraries where we actively listen to changes from one component and push changes from another

With the growing demand for better UI performance and scalable application, React JS provides a perfect solution for projects that deal with intense DOM manipulation. In this process, we might require custom solutions or could forecast the application not just to the web but also be extended to native application using React-native. 

Stay tuned for our next redux blog that talks more on redux as predictable state mutations.

Innominds is a trusted innovation acceleration partner focused on designing, developing and delivering technology solution in specialized practices in Big Data & Analytics, Connected Devices, and Security, helping enterprises with their digital transformation initiatives. We build these digital practices on top of our foundational services of UX/UI, application development and testing for technology companies. From ideas to commercialization, Innominds provides great ideas, engineering talent and proven technology solutions that help our clients succeed in today’s highly competitive market.

Interested! For any demos or POCs, please write to us at marketing@innominds.com and know more about our offerings.