Create the react element with JSX and Implement Click event in React App

-

 In previous article we discussed how to create react app from scratch and we also discussed about the project structure of the react app.In this article i will be discussing about the how to create the react element with JSX and how to implement Click event in React App.

 


 

 

Create the react element with JSX:

 In app.js file i will remove the default code returned in the App() method and add the following code.

App.Js

 

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  return (    
    <span>Hello world!</span>     
  )  
 }  
 export default App;

 then run the below command:

 npm start

 You will get the below output in browser.

hello world output

 now i try to add another span then the below error will be shown in VS Code:

child element

 this error is because in react you should have one parent element and under that you can have unlimited child elements. So you need to add the parent div element under that you can add both the span like below example

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  return (    
    <div>  
    <span>Hello world!</span>  
    <span>Hello world!</span>  
    </div>    
  )  
 }  
 export default App;

 Following will be the output of the above code change:

parent child

Now I will be adding some css classes to the app.css file and apply it to app.js file html elements as follows.

App.css:

 .App {  
  text-align: center;  
 }  
 .App-logo {  
  height: 40vmin;  
  pointer-events: none;  
 }  
 @media (prefers-reduced-motion: no-preference) {  
  .App-logo {  
   animation: App-logo-spin infinite 20s linear;  
  }  
 }  
 .App-header {  
  background-color: #282c34;  
  min-height: 100vh;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  font-size: calc(10px + 2vmin);  
  color: white;  
 }  
 .App-link {  
  color: #61dafb;  
 }  
 @keyframes App-logo-spin {  
  from {  
   transform: rotate(0deg);  
  }  
  to {  
   transform: rotate(360deg);  
  }  
 }  
 .Center {  
  display: flex;  
  align-items: center;  
  flex-direction: column;  
 }  
 .spanBold {  
  font-size: 30px;  
  font-weight: bold;  
 }

App.js :

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  return (    
    <div class="Center">  
    <span class="spanBold">Hello world!</span>  
    <span class="spanBold">Hello world!</span>  
    </div>    
  )  
 }  
 export default App;

Following will be the output of the above code changes.

child with css

the output is showing as per the css class applied. But you also noticed the we have repeated the css class in two of span and code is not centralized now we can use the JSX template to make it centralized and mantain the code in better way for that we need to add folloing code in app.js file.

App.js : 

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  const bolder = "spanBold";  
  return (    
    <div class="Center">  
    <span class={bolder}>Hello world!</span>  
    <span class={bolder}>Hello world!</span>  
    </div>    
  )  
 }  
 export default App;

 In above code you can see that i have declared one const variable and assigned the "spanBold" and i have assigned the variable to class attribute of span element in the curly bracket and you will get the same output and html output will be same as per below screenshot.

span elements

 Now we will add anchor buttons to the app.js file and add some css class to the app.css file.

 App.js:

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  const bolder = "spanBold";  
  return (    
    <div class="Center">  
    <span class={bolder}>Hello world!</span>  
    <span class={bolder}>Hello world!</span>  
    <ul>       
      <li>  
      <a href='#' id="Heart">❤</a>  
      </li>  
       <li>  
      <a href='#' id="Party">🎉</a>  
      </li>  
    </ul>  
    </div>    
  )  
 }  
 export default App;

 App.css: 

 .App {  
  text-align: center;  
 }  
 .App-logo {  
  height: 40vmin;  
  pointer-events: none;  
 }  
 @media (prefers-reduced-motion: no-preference) {  
  .App-logo {  
   animation: App-logo-spin infinite 20s linear;  
  }  
 }  
 .App-header {  
  background-color: #282c34;  
  min-height: 100vh;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  font-size: calc(10px + 2vmin);  
  color: white;  
 }  
 .App-link {  
  color: #61dafb;  
 }  
 @keyframes App-logo-spin {  
  from {  
   transform: rotate(0deg);  
  }  
  to {  
   transform: rotate(360deg);  
  }  
 }  
 .Center {  
  display: flex;  
  align-items: center;  
  flex-direction: column;  
 }  
 .spanBold {  
  font-size: 30px;  
  font-weight: bold;  
 }  
 ul {  
  display: flex;  
 }  
 li {  
  list-style: none;  
  padding: 0px;  
  margin: 10px;  
 }  
 li a {  
  text-decoration: none;  
  font-size: 40px;  
 }

 After executing above code following will be the output:

buttons anchor

 Now you can see the two button is showing in the output. In above code the li element is static and repeated now we can remove this repetition by binding li element dynamically using JSX template as per below code.

 App.js

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  const bolder = "spanBold";  
  const buttons = [  
   {  
    Text: "🎉",  
    Id: "Party"  
   },  
   {  
    Text: "❤",  
    Id: "Heart"  
   },  
  ]  
  return (  
   <div class="Center">  
    <span class={bolder}>Hello world!</span>  
    <span class={bolder}>Hello world!</span>  
    <ul>  
     {  
      buttons.map(  
       button => (  
        <li>  
         <a href='#' id={button.Id}>{button.Text}</a>  
        </li>  
       )  
      )  
     }  
    </ul>  
   </div>  
  )  
 }  
 export default App;

 in above code we have defined one const variable which holds the JSON array data and using that const we have used map method to bind the data dynamically to li element and the output will be same as per below image where you can see that the html generated after code change is same.

 

jsx template

 

Implement Click event in react app:

We can implement click event as per below code:

 

 import logo from './logo.svg';  
 import './App.css';  
 function App() {  
  const bolder = "spanBold";  
  const buttons = [  
   {  
    Text: "🎉",  
    Id: "Party"  
   },  
   {  
    Text: "❤",  
    Id: "Heart"  
   },  
  ]  
  const clickevent = event => alert(event.target.id);  
  return (  
   <div class="Center">  
    <span class={bolder}>Hello world!</span>  
    <span class={bolder}>Hello world!</span>  
    <ul>  
     {  
      buttons.map(  
       button => (  
        <li>  
         <a href='#' onClick={clickevent} id={button.Id}>{button.Text}</a>  
        </li>  
       )  
      )  
     }  
    </ul>  
   </div>  
  )  
 }  
 export default App;

Following will be output of the above code:

click event

on click of the emoji button you will get alert message which prints the id of the anchor element.

So this way you can work with JSX and click events in react app.


Comments

Post a Comment

Popular posts from this blog

Implement Logging in CSV file using Nlog in .net core MVC application- part 2

-
Image
In previous article " Implement Nlog in .Net core MVC application part 1 "  I have demonstrated how we can implement basic setup of NLog in .core mvc application. In previous article we have logged the exceptions in flat file system. In this article I will show you how you can write the exception and custom logs in csv file. Writing logs in csv file can enable us better readability of logs in tabular form.       Lets start the implementation of it, I going to use the same example project used in previous demonstration. Modify the Nlog.config file as follows, added new target and rule for logging logs in csv file. <?xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd" autoReload="true" throwExceptions="fal
Read more

Implement Nlog in .Net core MVC application part 1

-
Image
Logging is a very important part of the enterprise application/web application. Setting up the logging correctly not only beneficial for long term maintenance of the application but also it is useful tool to find out the RCA in case of mission critical bug arises. Therefor we will going to discuss the various logging technique implementation using Nlog library package. In this article we will going to use .net core application for demonstration but you can implement it in .net framework application also. So lets start the implementation of Nlog in .net core MVC application. Open visual studio 2019/17 and create the new project as shown below.     Select Asp.net core Web App (Model-View-Controller) and provide the project name in project name text box.   Now on next screen click on create button this will create MVC app with .net core Now go to solution explorer and right click on project and click on Manage Nuget Package. Now in Nuget package manager install below listed Nlog packages.
Read more

Angular User Session Timeout example step by step

-
Image
This functionality let the user know that their session is about to expire and that they would be logged out if they didn’t take action. I have written this functionality in Angular for my latest application.  If you are new to Angular 6 then read my article about Setting up Angular 6 step by step before jump to this article to get handy in Angular 6. Dealing with timers in Angular can be significantly different when using React components and subscriptions. The basic premises remains the same, though. We’ll have a service with a timer that will provide a Subject to which consumers of the service can subscribe. A React Subject provides an easy mechanism to trigger a “next” subscription to alert consumers that the timer has expired.   import { Injectable } from '@angular/core'; import { Observable, Subject, Subscription, BehaviorSubject} from 'rxjs/Rx'; @Injectable() export class IdleTimeoutService { private _count: number = 0;
Read more

Restore the lost focus of Auto post back controls in asp.net update Panel control

-
Problem: We put  autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details  the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times. Solution: Step 1: Save following in js file give any name to it (like MyUpdatePanelFocus.js ) var lastFocusedControlId = ""; function focusHandler(e) { document.activeElement = e.originalTarget; } function appInit() { if (typeof (window.addEventListener) !== "undefined") { window.addEventListener("focus", focusHandler, true); } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); } function pageLoadingHandler(sender, args) { lastFocusedControlId = typeof (document.acti
Read more

Devexpress Datebox date formatting in angular 6 with example

-
The Devexpress DateBox in Angular is a widget that displays the date and time in one of DevExtreme predefined formats or a format defined in an external localization library, or a type in the required date/time value. In this article, the i will provide you different date-format which we can set on DateBox to show date and time to user. Following is the code snippet to add Datebox in your Angular form if the you want to capture only date      <dx-date-box [value]="now" displayFormat="EEEE, MMM dd" type="date" > </dx-date-box> Following is the custom formats we can set and depending upon its converted values will be shown. "dd-MM-yyyy" => 28-10-2018 "EEEE, MMM dd" => Sunday, Oct 28 "dd MMM yyyy EEEE" => 28 Oct 2018 Sunday "dd-MM-yyyy EEEE" => 28-10-2018 Sunday alternatively you can change the format as way you want Following is
Read more