Scribd
Upload
14 views24 pages

Day22 ReactJS Events State Styles Slides

Uploaded by

Warstilide49
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views24 pages

Day22 ReactJS Events State Styles Slides

Uploaded by

Warstilide49
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Narasimha

Sr. Corporate Trainer, Mentor


Narasimha
Sr. Corporate Trainer, Mentor
Week5 – React JS
Day21 : Introduction, Components
Day22 : State, Events, Apply Styles
Day23 : Remote Server Calls, Debugging
Day24 : Redux, SPA with Routing
Day25 : Testing
Narasimha
Sr. IT Trainer/Consultant
Index – Day21
1. Events
a. Handling Events
b. Reading data from textboxes
c. onChange , onClick etc…
2. State
a. Working with "State“, Multiple state items
b. Form Inputs , Data Entry Forms
c. Setup two-way communication
3. Debugging React Application
Narasimha
Sr. IT Trainer/Consultant
Event Handling in React

• Events are actions that we perform on UI elements


• Similar to JavaScript React also supports events.
• Event attributes follows camel casing
– onClick, onChange, onMouseOver, etc…
• Steps:
a. Declare a function inside the Component function.
b. Invoke the function in button click
Event Handling in React
function App() {
function loginClick() { ……….. }

return ( <div>
<button onClick={loginClick}>Hello</button>
</div> );
}

export default App;


Event Handling in React – Function declarations
function loginClick() { ……….. }

let loginClick = function() { ……. };

let loginClick = () => { ……. };


Narasimha
Sr. IT Trainer/Consultant
Working with State in React

• By default component data changes in events does not


reflect on the UI.
• In order to preserve the changes to UI, react uses a
concept called “State”.
• State is a concept of tracking the component data
changes and re-render the UI.
Using useState()
• The useState() is a function that allows you to create state
variables in functional components.
• So basically useState is the ability to maintain local state in a
functional component.
• The useState hook is a special function that takes the initial
state as an argument and returns an array of two entries.
• UseState encapsulate only singular value from the state, for
multiple state need to have useState calls.
Using useState()
import { useState } from "react";

const [state, setState] = useState(initialstate)

const [uid, setUid] = useState("");


const [count, setCount] = useState(0);
Hands-On Implementation
Narasimha
Sr. IT Trainer/Consultant
React Dev Tools Extension
• React Developer Tools is a Chrome DevTools extension for the
open-source React JavaScript library.
• It allows you to inspect the React component hierarchies in
the Chrome Developer Tools.
• The Components tab shows you the root React components
that were rendered on the page, as well as the
subcomponents that they ended up rendering.
Narasimha
Sr. IT Trainer/Consultant
Styles in React
1. Tag Level - Inline styles
<p style={ { color : "blue", textAlign : "center" } }> ….</p>

2. Component Level : Define styles in separate *.css


import './Demo.css’;
…….
<div className="c1"> Hello World </div>

3. Project Level Define the css styles in separate *.css (project level):
provide styles information in index.css / app.css which will applicable to all
components
Bootstrap Styles in React

1. Import bottstrap.min.css in index.html


2. Apply styles to your component ui logic
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />

<button className="btn btn-primary" onClick={button1_click}>Hello</button>


Practice Hands-Ons

You might also like