React Native માં components અને JSX કેવી રીતે કામ કરે છે?

Question

Accepted Answer

React Native **React's component model અને JSX** નો ઉપયોગ કરે છે — UI બાંધવા માટે પુનઃવપરાય યોગ્ય **components** થી જે JSX પરત કરે છે। જો તમે web માટે React જાણતા હો, તો આ સીધું સ્થાનાંતરિત થાય છે; મુખ્ય તફાવત HTML elements ની જગાએ native components નો ઉપયોગ કરવો છે। ## Components અને JSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` Components પુનઃવપરાય યોગ્ય UI તુકડા છે (JSX પરત કરતા functions); તેઓ **props** (inputs) લે છે અને trees માં રચના કરે છે — બરાબર React for web જેવું, પણ native components સાથે। ## Props અને state (React concepts) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` **Props** components માં ડેટા પાસ કરે છે; **state** (`useState` દ્વારા) બદલાતો ડેટા રાખે છે જે re-renders ને ટ્રિગર કરે છે — web પર React જેટલું જ model છે। ## React knowledge transfers ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## શા માટે તે મહત્વનું છે React Native માં components અને JSX કેવી રીતે કામ કરે છે તે સમજવું મૂળભૂત છે કારણ કે **React Native React's component model પર બનેલું છે**, તેથી તેને સમજવું આવશ્યક છે, અને એક મોટો લાભ એ છે કે **React knowledge સીધું સ્થાનાંતરિત થાય છે**। Components (પુનઃવપરાય યોગ્ય UI તુકડા જે JSX પરત કરે છે, props નીચે inputs લે છે, અને trees માં રચના કરે છે) અને JSX (UI વર્ણન કરતો syntax embedded expressions સાથે) React Native development નું આધાર છે — web માટે React જેવું જ। **Props** (components માં ડેટા પાસ કરવું) અને **state** (`useState` hook દ્વારા, બદલાતો ડેટા રાખવો જે re-renders ને ટ્રિગર કરે છે) સમજવું આવશ્યક છે કારણ કે આ React concepts એ છે કે કેવી રીતે React Native components ડેટા મેળવે છે અને change પરિચાલન કરે છે — web React ની સમાન। મુખ્ય insight એ છે કે **React knowledge transfers**: components, JSX, props, state, hooks (useState, useEffect, વગેરે), composition, અને keys બધું web React જેટલું જ કાર્ય કરે છે, મુખ્ય તફાવત native components (View, Text) ના ઉપયોગ સાથે HTML ની જગાએ અને અલગ styling છે। યો transferability એ એક મોટું કારણ છે કે React Native આકર્ષણીય છે — React/web developers નો મોટો પુલ તેમના મોટાભાગના હાલના knowledge ને સીધું native mobile apps બાંધવા માટે લાગુ કરી શકે છે, relatively નાના learning curve સાથે native components અને platform specifics પર ધ્યાન કેન્દ્રિત છે। কারણ React Native મૂળતઃ React છે (components, JSX, props, state, hooks) native UI પર લાગુ કર્યું, અને આ model સમજવું React Native apps બાંધવા માટે આવશ્યક છે જ્યારે આ સમજો કે React knowledge સીધું સ્થાનાંતરિત થાય છે (મુખ્ય લાભ), React Native માં components અને JSX સમજવું આવશ્યક, મૂળભૂત knowledge છે — React Native નું મુખ્ય programming model, apps બાંધવા માટે જરૂરી, અને ખાસ કર મૂલ્યવાન કે કેવી રીતે direct રીતે React/web skills React Native mobile development માટે લાગુ થાય છે તેમ દર્શાવવા માટે।