Posts

Showing posts with the label React

React Hook

Image
This writing provides an overview and introduction of React Hook. 1. What is a Hook? Hooks allow function components to access React state and lifecycle features. Rules for using hooks: Only call hooks at the top level of your component. Only call hooks within React function components or custom hooks. import React, { useState, useEffect } from 'react' ; function TitleCount() { const [count, setCount] = useState( 0 ); useEffect(() => { document . title = ` You clicked ${count} times ` ; }, [count]); return < button onClick = {(prev) => setCount(prev + 1 )} >+</ button > ; } 2. useState() Hook The useState hook allows adding state to function components. It should be called at the top level of a component to manage its state. When useState is called, it returns an array with two values: currentState : The current state value. stateSetter : A function to update the state. initialState : Initial value. true, fa...

React introduction (JSX, Component, props)

Image
This writing provides an overview of React basics such as component, props. 1. React React is a JavaScript library used for building single-page applications and mobile applications, primarily focusing on web frontend development and component-based UI development. 2. JSX JSX is an extension of JavaScript that allows developers to write HTML-like syntax within JavaScript code. It is mainly associated with React but can also be used in other frameworks. JSX makes it easier to write and add HTML in React. Example: const myTeam = { center: < li > Benzo Walli </ li > , powerForward: < li > Rasha Loa </ li > , smallForward: < li > Tayshaun Dasmoto </ li > , shootingGuard: < li > Colmar Cumberbatch </ li > , pointGuard: < li > Femi Billon </ li > }; * Library vs Framework Library : A collection of pre-written code that can be called upon when building your code. Framework : A supporting structure where your co...