React Basics

React Basics

·

2 min read

React is a JavaScript library created by Facebook (now Meta).It is popular because it makes building interactive UIs easier, faster, and more scalable.Now we will talk about props,event handling,state components and conditonal rendering.

PROPS

Props called as properties of react and it is an object at which it sends data from parent to child components.

The parent component defines the data and passes it to the child as attributes.The child component accesses the data using the props object.

STATE COMPONENTS

It is a built-in object used to store data that can change over time.It is managed with useState hook.When state changes, React automatically re-renders the component to update the UI.

useState hook

It used to create and manage state in a component.

[current state,function to change current state]=useState(initial state)

EVENT HANDLING

In React, events like clicks, typing and other user interactions can be handled using event handler functions.React uses camelCase for event names (like onClick,onChange etc)Event handlers in React are passed as functions not strings.

CONDITIONAL RENDERING

It shows or hides the UI based on the conditions ike if it is true then show this if that is flase then show that.

function Test()
{
let condition===true;
return (
<div>
<h1>demo of conditional rendering</h1>
{condition===true && <h2>hello</h2>
</div>
);
}
export default Test;

The above example is of true statement then we get hello as output.