React Basics Part -1

How To install :

before install you should have node & npm installed in the system.

 

npx create-react-app food-order

cd food-order

npm start

 

 

Props : We use to pass the values from one component to another.

For exam,

<Expenses items={expenses} /> //in app.js

• React component names must always start with a capital letter, while HTML tags must be lowercase.like <Expense items>
• Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent

Import Notes:

1. For creating new component & files

• component folder name would be pascal case (Fisrt letter caps & every starting word as caps) , like AddUserData
• same as component js file pascal case
• CSS modules file name : COMPONENTNAME.module.css
• Custom component tags should start with capital letters while core component as small letters. like <Button> my custom component while <button> is core html attributes.
• component attributes name should be in camel case like,
  
  <AddUser onAddUser={onAdduserHandler}></AddUser>

for adding a class either using CSS modules or normally we can use

<Card className={classes.users}>

 

 JSX Limitations:

useeffect() :- its a hook like usestate(),

• it runs everytime when the component loads.
• if component state update with in the component then the useeffect will run again,
•  useeffect can accept the argument as a second argument, we can pass any value function etc, it means whenever that value will change then that will run again, it works as a dependencies.

ReactContext :-

const MyContext = React.createContext(defaultValue);

<MyContext.Provider value={/* some value */}>

and lastly we can cosume the data in any component 

 useref() :-

useRef() only returns one item. It returns an Object called current.

When we initialize useRef we set the initial value: useRef(0).