MERN stack beginners guide

REACT

INSTALLATION & SETUP

Install Node.js

Create a folder named REACT in the drive

CMD-> open the folder created(REACT)
npx create-react-app myapp

Open this folder (myapp) in vs code.
Open terminal in vs code
npm start

In the App.js, we do our work.

,If-else:

import './App.css';

function App() {

const isBusMissed=false;
let mess;

if (isBusMissed){
mess=<button>Take Auto!</button>
}
else{
mess=<button>Take Bus!</button>
}

const isBusMissed2=true;
let mess2= isBusMissed2 ? <button>Take Auto!</button> :
<button>Take Bus!</button>;

return (
<div>
<h1>TAKE BUS OR AUTO?</h1> <br></br>
{mess}
{mess2}

</div>
);
}

export default App;

,Printing the array item:

import './App.css';

function App() {
const backbench=['Bhagya','Nihal','Majo'];

return (
<div>
{
backbench.map((name) => (
<li>{name}</li>
))
}
</div>
);
}

export default App;

.map function acts like a for loop.

, Dictionary-> Key-Value pairs:

import './App.css';

function App() {

const profile=[
{'name':'Nihal','roll':'37','age':'22'},
{'name':'Bhaggu','roll':'13','age':'24'},
{'name':'Majo','roll':'30','age':'21'},
];

return (
<div>
{
profile.map((stud) => (
<li>{stud.name} {stud.age}</li>
))
}
</div>
);
}

export default App;