Uncategorized

React JS App

Problem#

The problem which we are solving here is to create a dynamic UI component as displayed in the diagram using React JS  below with the following features:-

  1. Input Form# Will have a text input field and a add button. Whenever user adds a text the text is appended in the outputform.
  2. OutputForm# Will display all the text added by user and also when user clicks a text it will be deleted from output form.

Implementation#

  • Install NodeJS
  • Install create-react-app using the following command

npm install –g create-react-app

  • Create and start react app. Create a folder inside which you want to initialize your app and run the following command.

create-react-app  first-app

npm start

  • Now we need bootstarp to give look and feel to our application. You can now add bootstrap to project

npm install bootstrap –save

React Components#

We are dividing the applications into three react components

App.js – Represents the parent component

This component of react maintains the state and events that will be trigered. This component will render both the input and output forms.

Components/CustomForms.js – Represents the Input Form. This component  will update the state of App component when the text field is changed on the inputform or Add button is clicked. When input text is changed we will update the state to capture the text on input field. When Add button is pressed we will update the state to append the latest typed value on input field.


Components/ ListControl.js – Represents the outputForms. This component will render the names input by the user from the state on the UI and also will update the state to remove the selected name whenever name is clicked.

GitHubURL#

https://github.com/gotechmind/ReactJS/tree/master/first-app

Leave a Reply

Your email address will not be published. Required fields are marked *