Scribd
Upload
5 views

Ep4ReactNotes

The document outlines key concepts in React, including the use of npm scripts, the creation of React elements and components, and the importance of JSX for readability. It emphasizes best practices such as destructuring props, using keys in lists, and understanding component composition. Additionally, it distinguishes between class-based and functional components, and explains the use of inline styles in JSX.

Uploaded by

juhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
5 views

Ep4ReactNotes

The document outlines key concepts in React, including the use of npm scripts, the creation of React elements and components, and the importance of JSX for readability. It emphasizes best practices such as destructuring props, using keys in lists, and understanding component composition. Additionally, it distinguishes between class-based and functional components, and explains the use of inline styles in JSX.

Uploaded by

juhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

1. we can write scripts for shortcuts in package.

json
Npm run start and npm start same thing
npm bulid will not work we have to use npm run build becuse npm has reserved the keyword start

2. React Element
React.createElement create react object and when we render into the DOM then it will convert into
an html which we see on the browser

3. React Component
There are 2 ways of creating React component
Class Based component (Old way – uses Javascript classes)
Functional component (New way – use Javascript function)

4. ShortHand function const fun=()=> true


Normal function const fun=()=> { return true}
Both the above function are same

Both are same

5. Component composition
injecting component into other component
6. JSX is making our code more readable. JSX is not react
7. Component is noraml javascript function which is returing some JSX code
8. whenever we have to give inline styles we have to give it as js object in JSX.

Some use to write css like this also.


9. there is concept of using 2 curly braces in JS

1st curly braces tells there is some JS code inside it and 2nd curly braces tells its JS object.

10. props are just like argument to the function


11. Destructing on the fly

both 2 screenshots are


same destructing of arguments, JS concept.

12. Config driven UI


showing different data for different location

13. Best practices is destructure the data then use it instead of using it directly from the props
14. we need to uniqly identify loop items so its recomended to use key attribute in all map function
If we doesn’t add ke react has to render all ites again becuase it doesn’t identify all the items again

You might also like