React Js 🔥🔥🔥 for beginners in Telugu | HTML CSS JavaScript In Telugu | Web apps development Telugu🔥🔥
#reactjs #react #webapp #webapplicationdevelopment #reactjstutorial #html #css #javascript #js #sureshtechs
HTML + CSS + JS + REACT + DEPLOYMENT
Other courses:
👉 C 18 Hourse Full course: • C Language In Telugu🔥🔥🔥|| suresh techs c l...
👉 Python 11 hours complete course: • Python In Telugu For Beginners || Python C...
👉20 Programs for interview: • Python In Telugu For Beginners | Python Co...
👉 What is programming: • What Is Programming | What Is Programming ...
👉 Java in 10 minutes: • Java In Telugu | Java Programming In 10 Mi...
👉 Git Telugu course: • Git in Telugu | Git Tutorial For Beginners...
👉 Git English course: • git complete course for devops🔥🔥🔥 || git p...
👉 HTML Full course Telugu: • HTML tutorials in telugu | HTML telugu | H...
Java
======
👉JAVA PART 1 • Java In Telugu 2022 | PART - 1 | Java Lang...
👉JAVA PART 2 • Java In Telugu 2022 | PART - 2 | Java Lang...
Websites used during this session:
NODE JS: https://nodejs.org/en/download/
VS CODE: https://code.visualstudio.com/docs/?d...
React Router: https://reactrouter.com/en/v6.3.0/get...
Material UI button: https://mui.com/material-ui/react-but...
AWS Resource names: https://docs.aws.amazon.com/general/l...
AWS Deployment website used: https://blog.cloudthat.com/step-by-st...
AWS S3 Resources: https://docs.aws.amazon.com/AmazonS3/...
Lorem Ipsum: https://www.lipsum.com/
JS6: https://www.w3schools.com/js/js_es6.asp
NOTES:
inline,(directly elements)
internal,(applies style to all the elements in that page...)
external,(applies across different web pages-home.html, details.html)
we have to create an external css file(.css)-styles.css
box modal
content
class
id
html- simple document
css - applying styles to that/this document...
javascript/typescript - interacting with the web page(DOM manipulation)
DOM - Document Object Modal
javascript - dynamically typed language
a = 10
b = 20
a = "suresh"(automatic ga...a type will change to string)
java, typescript(strct/strongly/statically typed languages)
int a;
a =10;
a = "suresh"//not possible at all...
typescript
===========
a:number;
name: string;
details: any;
block level elements
inline elements..
display: flex;
display: grid;
getElementById
React: (Beautiful step) - More performant
DOM - Manipulating DOM(document object modal)
DOM - Entire DOM is not going to be updated...
VDOM - Virtual DOM
whenever we do some changes and if we want them to be updated on our
web page...(DOM has to be updated...)
DOM - VDOM ( It finds the differences )
Updates those elements which requires an update....(change)
React - Facebook
Components - Reusability....(Message) - multiple pages.
Components Class based, functional components
class based(16.8 - 95% - old - existed - it's recommended) - state management
functional components(very very easy...) - state less....
react hooks - we can manage state even in our functional componets...
hooks - useState(), useEffect(), useCallback, useMemo....
react-router-dom ( useNavigate() )
react application -
vs code(visual studio code)
node installed in our system...(NODE JS)
npx create-react-app krish-Techs
npm install npx
npx, npm
npm - node package manager(packages...manage...used to manage the packages...)
npx - node
Components
Multiple components(Reuse)
Component - piece of UI...
State management - hooks...
Communication between the components(how to pass the data)
How to get the data from one compone to other component...
=================
BIG applications....
Redux, Redux-toolkit...(State management...in a better way)
Networking - fetch (default), axios(third party-install)
Material ui, bootstrap(libraries)
JSON - Java script object notation.....
object
{
}
array
[
]
string "asdfdsaf"
key: value
JSON DATA:
let myInformation = {
name: "suresh"
friends:[
{name:"Krishna",
phone: "93939",
address: "aasdfASF"},
{name:"Krishna",
phone: "93939",
address: "aasdfASF"},
{name:"Krishna",
phone: "93939",
address: "aasdfASF"}
]
}
myInformation.name
myInformation.friends[0].name
JEST - UNIT TESTING....TO TEST OUR COMPONENTS.....
JSX (Java script xml)
JS =Javascript
named exports...
export const add = ()={
}
export const add = ()={
}
export const add = ()={
}
default exports...
display page: viewport...
view width - 100vw
view height - 100vh
display: flex
react routing...(To move between the pages...) in an efficeint way
react-router-dom (library)
we can move between the pages...
we can send data through the url(state)
npm install libraryname
npm install react-router-dom@6
npm uninstall libraryname
npm (node package manager) - old
yarn(yet another resource negotiator) - latest(performance)
react-router-dom....
useState() - to manage the state...
lot of libraries....
1. Material UI
2. bootstrap...
10 components..
comp1, comp2, comp3, comp4...
props drilling....
difficult to manage the state...
Redux - Redux tool kit...- state management in a better way...
JEST...unit test cases..
Deployment url:
NOTE: Since the bucket has been deleted, the below deployment url
doesn't work now :)
http://sureshtechs.s3-website.ap-sout...