React Basics : Components

Components

• React components are built by combining components.
• React Component = HTML + CSS + JS 
• Advantages
•  Reusable building components
• Related code (html, css, js) lives together 
• separation of concerns : different components handle diff data & logic  (simplifies testing and building complex apps) 
•  Local 
• npm install : intall packages from package.json 
• npm run dev : run code locally 
•  index.html file
• simple points to index.jsx

 \

the root element is rendered with App. 

 

App is a component that is exported, and App.js has actual code

Generally you do not render an <App> component like above (using legacy code) : above is only exception. Actually the "ReactDom" library does the rendering part. 

 

•  JSX
•  is used to describe and create HTML elements in JS
• is not understood by browsers 
•  React code needs to go through a build process that transforms JSX code (behind the scene) to code that does work in browsers
•  Component functions much follow two rules
• name starts with upper case 
• Use "PascalCase"
• function must return a value that can be rendered by React (typically HTML)
•  React components are JS functions

 

•  React Component Tree : if you right click you find something like this

 

if you see this file , you will see React code you wrote.

 

Hierarchy : https://medium.com/tech-lead-hub/best-practices-for-react-component-design-f0903c4c7204 

 

How React Differentiates between Custom Component and Native Component ?

React uses a specific convention to differentiate between custom components and native HTML elements (also referred to as built-in components) when you write JSX code. 

The key distinction lies in the capitalization of the first letter: 

• Capitalized Names for Custom Components: When you create your own component in React, you should always start the name of the component with a capital letter. For example, Profile or MyComponent. This capitalization signals to React's transpilation process (often handled by Babel) that you are using a React component. Babel then converts this capitalized name into a React Fiber object, which is essential for React's internal rendering system.
• Lowercase Names for HTML Elements: When you use standard HTML elements like <div>, <span>, or <h1>, you use lowercase names. React recognizes these lowercase names and treats them as standard HTML elements. If you were to name your component with a lowercase letter, React would mistakenly interpret it as a regular HTML element instead of a custom one

 

 

React Props

https://www.w3schools.com/react/react_props.asp

USE Image name as variables (for better builds) : CSS can be done in similar way

https://stackoverflow.com/questions/75669615/how-to-use-a-dynamic-name-for-an-imported-image-in-react

Named Exports

https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules

 

 Object de-structuring https://www.w3schools.com/js/js_destructuring.asp 

props.children

https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891

children is the components that you receive withing your tags

example

 

 

Important

• * in react you can only call a component once
• * if you need to call it more than once then use STATE
• function that tell react data changes, cause re-rendering  
•  two important HOOKs rule
• only call Hooks inside of component functions
• only call Hooks at top level
•