Skip to main content

Posts

Fragment in React JS

The fragment is the replacement of the root element of the component. in some cases, design can be different when we use the <div> tag that's why React. Fragment implemented to remove designing Fragment provides better performance as compare to div tag under render() hence we should always use Fragment in place of <div>. Why we use Fragments? The main reason to use the Fragments tag is: It makes the execution of code faster as compared to the div tag. It takes less memory. Syntax <React.Fragment>         <h2> child1 </h2>        <p> child2 </p>          .. ..... .... ...   </React.Fragment>   Example // Rendering with fragments tag   class App extends React.Component {        render() {         return (           <React.Fragment>        ...

Create Marksheet Program in React JS, REACT JS Marksheet Program using controlled component

 Create Marksheet Program in React JS, REACT JS Marksheet Program using the controlled component. WAP to create a mark sheet using five different subjects with the following conditions? 1)  all subject marks should be 0 to 100? 2)  If only one subject mark is <33 then the student will supply. 3)  If all subject marks are>33 then the student pass and displays division with percentage? 4)  if the minimum of two subject marks is <33 then the student will fail. 5)  if the student is suppl and the mark is >28 then five bonus marks will be added then the student will pass by grace and grace subject name. 6) display distinction subject name 7) display suppl subject name Solution of Marksheet Program in React:- Code of MarkSheet.js  import   React   from   "react" ; export   class   Marksheet   extends   React . Component {          constructor ()    {   ...

Create Test Case for following Test Scenerio of Live Project

I am creating a Test Scenario to implement the Integration Testing of the EroomRent application. Test Scenario for Component Testing:- 1)  Test header component of EroomRent.in Guest 2)  Test footer component of EroomRent. as a Guest 3)  Test Search component of EroomRent.in 4)  Test Registration and login of Tenant 5)  Test Registration and login of Owner 6)  Test Contact us page of EroomRent 7)  Test Owner Dashboard Section 8) Test Add room and View Room  option of Owner Dashboard  9)  Test Tenant Login ----> Search(Recently added room)  --- Listing ---> Booking --->Logout--> Owner Login ---> View Booking  (Test only valid data) 10)  Test Tenant Dashboard 11)  Test Booking Options of Tenant Dashboard 13)  Test Registration and login of Broker 14)  Test Add Room and View Room Options to Broker 15)  Test View Booking Options to Broker 16)  Test Edit Room options to Broker Integration...

How to manage session in React JS Application

  Session is provide global object that store data from one component to another, it is called persistent variable in React JS application. When we create Login and Logout option in any web application then session implementation is mandatory. Without session, we can not provide internal page security,  Syntax to create Session Object in React js application. sessionStorage . setItem ( "key" , value ) Syntax to get Session Object in React js application. var s = sessionStorage . getItem ( "key" ) Syntax to remove Session Object in React js application. sessionStorage . removeItem ( "key" )