How to create react app ?

Step1- Install NodeJS

Step2- npx create-react-app app-name

Npx - it's a package runner tool that comes with npm 5.2+. Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want.

Jsx - JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

After creating the project folder run npm start to start the local server

Index.js

Import ReactDOM from 'react-dom/client';

Import App from './App';

Import React from 'react';

Let mainContainer = document.getElementById('root');

Let root = ReactDOM.createRoot(mainContainer);

Root.render(<App/>)

• ReactDOM has a function called createRoot() which takes the root element of the application as parameter , and returns the root container of the

           Application. And in the root container we render the root component of our application.

• React  we need to import in order to execute the JSX code.

Component:

With react we built component tree.

End of the day we can have multiple components but all will be rendered to the single html file.

• Components in react are nothing but a JavaScript function which returns the JSX .
• Naming convention of a component have to start with capital.

function Component_name(){
return (
    <>
       <p>Some_Text</p>
    </>
   )
}

export default Component_name;

function Component_name(){
return (
    <div>
       <p>Some_Text</p>
    </div>
   )
}
export default Component_name;

• React component should return a single root JSX element

     return(<div> <p>Text</p> </div>)

•   It should not return multiple root element (Not allowed)

     return(<div></div> <p>Text</p> </div>)

How can we use one component into another component ?

Create a Test Component.

function Test(){
    return (
        <>
           <p>Text Component</p>
        </>
      );
}
export default Test;

Now we will call this component to the root component of our application.

import Test from "./Test";
function App(p) {
    return (
    <>
     <Test/>
    </>
  );
}
export default App;

This is how we call one component to another

How to add CSS file to a React Component :

import "../App.css";

function Test(){
    return (
        <>
           <p className="test" >Text Component</p>
        </>
      );
}
export default Test;

** Just import the css file to the component file ,in JSX code since it is not HTML so class property has changes to className