أساسيات React

سأحاول شرح هذه المصطلحات بإختصار لتبسيط المصطلح 

1. props وتعني ال خصائص وتقوم بتمرير البيانات من المكون الأب إلى المكون الأبن كالتالي

   class ParentComponent extends Component {    
       render() {    
           return (        
               <ChildComponent name="First Child" />//prop هنا هي  name  ال
           );  
       }
   }
   
   const ChildComponent = (props) => {    
       return <p>{props.name}</p>; //يتم استخدامها بهذا الشكل
   };
   //الناتج سيكون كالتالي
   <p>First Child</p>

    

2. state و useState نقوم بوضع البيانات الخاصة بالمكون بها ويقوم react بتتبع القيمة في حالة تغيرها الفرق بينهما أن لكل منهما طريقة استخدام مختلفة  و state تستخدم في ال class-based أما ال useState تستخدم في ال functional

3. useEffect تستخدم لتنفيذ مهمة معينة عن حدوث تغيير في قيمة متغير معين 
4. fetch هي الوسيلة الحديثة لعمل http request مشابه لل ()jQuery.ajax وهي خاصة بال javascript

هذا تبسيط للمصطلحات يمكنك الأن التعمق في هذه المصطلحات حيث بها الكثير من التفاصيل

مثال حول استخدام props :

import React from 'react';

export default function App() {
  return (
    <div>
      <Component data="some data" name="page"></Component>
    </div>
  );
}

function Component(props) {
  const { name, data } = props;
  console.log(name); //page
  console.log(data); // some data
  return <h1>Component</h1>;
}

مثال حول استخدام state:

import React from 'react';

export default function App() {
const [state, setState] = React.useState('some data')
  return (
    <div>
      {state} // somedata
    </div>
  );
}

مثال حول useState :

import React from 'react';

export default function App() {
  const [state, setState] = React.useState('some data');
  const handleClick = () => {
    if (state === 'some data') {
      setState('other data');
    } else {
      setState('some data');
    }
  };
  return (
    <div>
      {state} // some data
      <button onClick={handleClick}>click</button>
    </div>
  );
}

مثال حول useEffect :

import React from 'react';

export default function App() {
  const [state, setState] = React.useState('some data');
  const handleClick = () => {
    if (state === 'some data') {
      setState('other data');
    } else {
      setState('some data');
    }
  };

  React.useEffect(() => {
     console.log("أشتغل مرة واحدة الا اذا أضيف الستايت للقائمة في الاسفل")
  }, [])


  return (
    <div>
      {state} // some data
      <button onClick={handleClick}>click</button>
    </div>
  );
}

و fetch ليس لديها علاقة بمكتبة react فهي فقط أدام من أدوات جافاسكريبت لجلب أو ارسال البيانات