React quick notes:

React Commands:

1. Command to create a react app – npx create-react-app app-name
2. Command to start a react app – npm start

React application Directory structure:

Following directory structure automatically gets created when you run the above command to create react app:

Entry point of the react app:

• Entry point of the react app is index.html.
• Inside the index.html there is a div element with id ‘root’

index.html :

…
…
<div id="root"></div>
….

• The react app’s root component is rendered inside the above div tag with the following code written in index.js file

index.js:

…
…
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

...

Types of react components

 1. Functional components

2. Class Components

React functional component example

export const DemoComp = () => {
 return (
  <div>
     <p>hello world !</p>
 </div>
)
}

Note: React component name must start with uppercase letter

What is JSX

1. React component returns JSX which is basically a react’s extension of javascript. It describes how the UI should look like.
2. JSX returned by a component should contain only one wrapper element
3. Props are immutable in the child component i.e. their value can not be changed in the child component

Difference between JSX and html addtributes:

html         JSX

class ->     className   (for CSS)

for   ->     htmlFor

onclick ->   onClick

tabindex ->  tabIndex

Passing data from parent to child component using react props:

parent.js :

import { ChildComp } from './child'

export const ParentComp = () => {
   return (
      <div>
        <ChildComp name = "Viresh"/>
      </div>
   )
}

child component (child.js)

export const ChildComp = (props) => {
   return(
       <div>
         <p>hello {props.name}</p>
       </div>
   )
}