REACT

 REACT IS A JS LIBRARY THAT IS USED TO BUILD UI (USER INTERFACE)

IT LETS YOU BUILD USER INTERFACES OUT OF INDIVIDUAL PIECES CALLED COMPONENTS.

COMPONENTS ARE SIMILAR TO FUNCTIONS.JUST LIKE A FUNCTION IS CALLED(INVOKED) WHENEVER IT IS NEEDED, A COMPONENT CAN ALSO BE RENDERED (TO DISPLAY) .

IF WE WANT TO DISPLAY A CARD ON A PAGE MULTIPLE PAGES INSTEAD OF CREATING MULTIPLE CARDS , WE CAN CREATE A CARD COMPONENT AND USE IT WHENEVER NEEDED.

BASICALLY, REACT IS ABOUT CREATING A COMPONENT ONCE, AND RE-USING IT,WHENEVER WE NEED.

A COMPONENT IS A PIECE OF UI THAT HAS IT'S OWN LOGIC AND APPERANCE .

A COMPONENT CAN BE AS SMALL AS A BUTTON OR AS LARGE AS AN ENTIRE PAGE.

WE USE COMPONENT HIERARCHY TO BUILD UI.

A COMPONENT IS ASSOCIATED WITH HTML,CSS AND JS.

TILL NOW WE MADE THE STRUCTURE AS A HTML FILE,STYLING AS CSS, LOGIC AS JS FILE SEPERATELY.

BUT REACT DIVIDES THE ENTIRE PAGE INTO COMPONENTS, EACH COMPONENT CONSISTS OF DIFFERENT HTML,CSS AND JS.

REACT IS NEITHER HTML NOR JS PURELY, IT IS WRITTEN IN JSX.

JSX IS A WAY OF WRITING HTML INSIDE JS.

Comments

Post a Comment

Popular posts from this blog

DEPENDENCIES IN useEffect()

Image
 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...
Read more

ACTIVITY1

Image
 SHOW A HELLO MESSAGE  ALONG WITH THE USERNAME WITH THE GIVEN TEXT COLOR. TWO PROPS ARE GIVEN, USERNAME AND TEXTCOLOR. ACTIVITY1.JSX function Activity1 ({ userName , textColor }) {   let styles = { color : textColor };   return < h3 style = { styles } > Hello! { userName } </ h3 > ; } export default Activity1 ; APP.JSX import Activity1 from "./Activity1.jsx" ; function App () {   // let name = "abhi";   // return <ProductTab />;   return (     <>     < Activity1 userName = "abhii" textColor = "yellow" />     < Activity1 userName = "ashwith" textColor = "orange" />     < Activity1 userName = "bharath" textColor = "red" />     < Activity1 userName = "vinay" textColor = "red" />     </>   ) }
Read more

CONDITIONALS

Image
 CONDITIONAL STATEMENTS (IF) CAN BE PASSED AS TERNARY OPERATORS OR EVEN BY USING(  &&) LOGICAL AND OPERATOR. import "./Product.css" ; function Product ({ title , price , features }) {   return (     < div className = "Product" >       < h4 > { title } </ h4 >       < h5 > price: { price } </ h5 >       { price > 15000 ? < p > Discount of 5% </ p > : null }       { /* <p>{features.map((feature) => <li>{feature}</li>)}</p> */ }     </ div >   ); } export default Product ; LOGICAL AND OPERATOR.       { price > 15000 && < p > Discount of 5% </ p > }
Read more