Scribd
Upload
5 views

React Note

Uploaded by

adrija.de
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

React Note

Uploaded by

adrija.de
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

React Udemy course:

https://www.udemy.com/course/react-the-complete-guide-incl-
redux/learn/lecture/25595340#overview

React is a library for web and native user interfaces.It's a library for building user
interfaces.

https://codesandbox.io/s/react-vs-vanilla-demo-uc08fv?file=/src/styles.css

React is all about components:


=================================================================
A Component is one of the core building blocks of React. In other words, we can say that
every application you will develop in React will be made up of pieces called components.
Components make the task of building UIs much easier. You can see a UI broken down into
multiple individual pieces called components and work on them independently and merge
them all in a parent component which will be your final UI. They are reusable and
reactive.

Component is reusable building blocks in your user interface.Components are in the end
just a combination of HTML code,CSS code for styling and possibly JavaScript code for
some logic.

index.html is the entry point of React application.


index.html is where all your UI is rendered by React and index.js is where all your JS
codes exist. So browser, first get index.html and then renders the file. then JS in
index.js is responsible for all the logical rendering of UI, which takes element with id
root to be its base element for rendering all the UIs.

1.public/: Contains static files like the index.html file, which serves as the main
template for the app.
2.src/: Contains the main source code for my React application, including components,
styles, and other JavaScript files.
3.src/index.js: The entry point for my React application, where the root component is
rendered to the DOM in index.html.
4.src/App.js: The root component of my application, which can be used as a starting point
for building my app.

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

this root is called in index.js as

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render();

index.html:
---------------------------------------------------
This file is the main HTML file for my application and serves as the React application's
entry point. It contains the basic structure of the web page, including the <head> and
<body> elements. The <body> element includes a <div> element with an id attribute
(usually root) that React will use to render the application. Here is the simplified
version of the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

index.js:
---------------------------------------------------
This file is the main JavaScript file for the application, and it serves as the entry
point for React. It imports the React and ReactDOM libraries and the App component from
the App.js file. It then renders the App component into the <div> element specified in
index.html. In addition, index.js also sets up any other configurations or services that
my application might need.

import React from 'react';


import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)

App.js:
----------------------------------------------------------
This file is a React component containing the application's logic and structure. It
typically includes a render() method that returns the HTML structure of the application,
and it may also have other methods and lifecycle hooks that handle events and data
changes in the application. App.js is imported and used by index.js to render the
application into the HTML document.

export default function App() {


return (
<div>Simple App</div>
)
}

JSX code:
==================================================================
In React Application we use JSX code, which is stand for JavaScript XML because HTML in
the end is XML or basically HTML cod einside JavaScript.
This only works because there are transformation steps running behind the scenes because
of this process does NPM start process which we started,which transformed as JavaScript
code to more browser friendly code before everything is being served here.

JSX cannot allow to use if-else statements. Instead of it, you can use conditional
(ternary) expressions like {i == 1 ? 'True!' : 'False!'}

How React Works:


==================================================================
React works with declarative approach,which means with React we defined the desired
target state and React is then responsible for generating and running the actual DOM
instructions which update what's visible on the screen
You create a Component, which is in the end, just a function of returning some HTML code,
you then export it.And then ultimately you import it in the file where you wanna use it
so that they're in the JSX code.
name should start with this uppercase character.

in jsx we can use {} to wrte some basic javascript expressions

props:
===================================================================
props simply stands for properties.'props' are the attribute of components because
components can't use the data stored in other components.We can pass data to the custom
component by adding a attribute.And inside of that component,we can then get access to
all these
attributes which might have been set on our custom component

app.js
--------------------
goalitem = 'finish';
<coursegoalitem text = {goalitem} />

coursegoalitem.js
----------------------
function coursegoalitem(props){
return(
<li>{props.text}</li>
)};

like this we can use the props to send the data from one to another components

we use parameters for passing data into functions,React will ensure that we get one
parameter in every component which we use as a component,the parameter will be an object
which holds all the received attributes as properties,
hence the name props for the overall concept, this is this object which holds all the
values we get for the attributes on our custom element for the attributes on our custom
element.

==> function ExpenseItem(props) {


return (
<>
<div className="expense-item">
<div>{props.date.toString()}</div>
<div className="expense-item__description">
<h2>{props.title}</h2>
<div className="expense-item__price">Rs.{props.amount}</div>
</div>
</div>
</>
);
}

==> function App() {


const expenses = [
{ title: "Medical Insurance", amount: 50000, date: new Date(2021, 2, 24) },
{ title: "Car Insurance", amount: 40000, date: new Date(2021, 7, 24) },
{ title: "car Insurance", amount: 50000, date: new Date(2022, 2, 24) },
];
return (
<>
<div>
<h2>Let's start</h2>
<ExpenseItem
title={expenses[0].title}
amount={expenses[0].amount}
date={expenses[0].date}
></ExpenseItem>
</div>
</>
);
}

You can pass a single prop,which contains the entire object or a multiple props,which
contain the individual values.
upper is example of multiple prop,as we are passing the individual data

==> function ExpenseItem(props) {


return (
<>
<div className="expense-item">
<div>{props.expense.date.toString()}</div>
<div className="expense-item__description">
<h2>{props.expense.title}</h2>
<div className="expense-item__price">Rs.{props.expense.amount}</div>
</div>
</div>
</>
);
}

==> function App() {


const expenses = [
{ title: "Medical Insurance", amount: 50000, date: new Date(2021, 2, 24) },
{ title: "Car Insurance", amount: 40000, date: new Date(2021, 7, 24) },
{ title: "car Insurance", amount: 50000, date: new Date(2022, 2, 24) },
];
return (
<>
<div>
<h2>Let's start</h2>
<ExpenseItem
expense = {expenses[0]}
></ExpenseItem>
</div>
</>
);
}

this is the example of single prop as we are passing the entire object in this array

object destructuring syntax:


==================================================================================
you can refer to the different properties of the object you are receiving here,so of the
props object in this case,to pull these values, buy those keys here out of that incoming
object and store them in locally available variables
of these titles, of these names here.With that, the date prop would be accessed with just
date since we're pulling it out here.Title would be accessed under just title and amount
would be accessed under just amount.

So here, we're using object destructuring.This is not some special React syntax or
anything like that.Instead, it's standard JavaScript syntax for using object
destructuring right in the function parameter list

function ExpenseItem(date, title, amount) {


return (
<>
<div className="expense-item">
<div>{date.toString()}</div>
<div className="expense-item__description">
<h2>{title}</h2>
<div className="expense-item__price">Rs.{amount}</div>
</div>
</div>
</>
);
}

Get a date as string, using locale conventions:


=========================================================================================
=

const d = new Date();


let text = d.toLocaleString();

The toLocaleString() method returns a Date object as a string, using locale settings.The
default language depends on the locale setup on your computer
props.date.toLocaleString("bn-IN")
we can split the date in ui

function ExpenseItem(props) {
const month = props.date.toLocaleString({month: 'long'});
const day = props.date.toLocaleString({day: '2-digit'});
const year = props.date.getFullYear();
return (
<>
<div className="expense-item">

<div className="expense-item__description">
<h2>{title}</h2>
<div className="expense-item__price">Rs.{amount}</div>
</div>
</div>
</>
);
}

splitting components into multiple components:


==============================================================
import ExpenseDate from "./ExpenseDate";
import "./ExpenseItem.css";

export default function ExpenseItem(props) {

return (
<>
<div className="expense-item">
<ExpenseDate date={props.date} />
<div className="expense-item__description">
<h2>{props.title}</h2>
<div className="expense-item__price">Rs.{props.amount}</div>
</div>
</div>
</>
);
}

------------------------------------------------------
import "./ExpenseDate.css";

export default function ExpenseDate(props) {


const month = props.date.toLocaleString('en-IN',{ month: "long" });
const day = props.date.toLocaleString('en-IN',{ day: "2-digit" });
const year = props.date.getFullYear();

return (
<>
<div className="expense-date">
<div className="expense-date__year">{year}</div>
<div className="expense-date__month">{month}</div>
<div className="expense-date__day">{day}</div>

</div>
</>
);
}

You might also like