React

-

 React js(facebook) 

what is react:--

open source javascript library for building User interface

its not framework 

focused on doing one thing...

not other expect like routing or http request

there are libraries for everything we can download and use as an dependency..


component based architecure:--

breaks  down small encapsulated parts which we can use after for creating more complex Ui.

header

slider 

main

footer

for reusing.Reusable code..


Dom updates are handles gracefull in react.



npx create_react_app application

npx:---

npm :-package runner which gets installed when u install node.

cd application

npm start

>Npm is a tool that use to install packages. Npx is a tool that use to execute packages.


folder structure:----

1.package.json:---

this file contain the dependency and the scripts require for the project.


2.package-lock.json:-

insure consistent installation of your depencies


3.folder:--node modules

when we run npx create react node modules created

where all dependency are install.


public:--

mainfest.json:---

>..is used for Prograssive web apps.



index.html:---

single page application...bz of this only we see..

head tag u can change../

div id root.. this is reponsible for UI.


srcfolder:---(development)

index.js:---root component which is app element/root [dom node]

dom element with the id root.


app.js:-

responsible for view/html which we can see in browser


app.css:-for style which applied in app component


app.test:unit test.test case


index.css:--body  style


service worker:-progressive web app


mainfest.json:--json form about our application information

robots.txt:-for seo purpose.


>npm start...>

1index.html..2>...index.js where the root dom node  presents

3>app.js .... display HTML.


Comments

Post a Comment

Popular posts from this blog

interview questions js[ Anurag Singh ProCodrr]

-
 javascript:- nderstanding-the-difference-between-pure-and-impure-functions-in-javascript/ pure function:- that does not change outside value of the function 1: function geek(value) {      return value+100;  }     console.log(geek(34));  2: function capitalize(str) {    return str.toUpperCase();  }     console.log(capitalize('geeks')); ............................. lamda function[anonymous function] doesnt have name Lambda functions are pure functions in Javascript. let multiply = (a, b) => a * b; console.log(multiply(5, 9)); const Names = [   'Mansi',   'Gaurav',   'Akansha',   'Sanya' ]; console.log(Names.map(Names => Names.length));   array.slice[parts the array] gives array returns The slice() method returns selected elements in an array, as a new array. The slice() method selects from a given start, up to a (not inclusive) given end. The slice() method does not change the origi...
Read more

reactnative_creation

-
 [EAS Build Service]:--for production Alternative:-- expo managed workflow:- expo go:-expo init projectname:-[built in feature] easy to setup and workflow quick &fictionless development no or very little congiguration you can build(cross-platform) standalone apps expo Bare workflow: [own native code android ] relatively easy to setup and work with convenient development some configuration required you can build(cross-platform) standalone apps [react native cli] setup:-- android studio jdk java setup xcode install react cli: more complex setup conveninent development can require more configuration effort standalone apps are build locally expo bare workflow:--- https://docs.expo.dev/versions/latest/sdk/location/ https://github.com/expo/expo/tree/sdk-51/packages/expo-location u can eject from managed expo  to bear workflow:-- just run  expo eject in terminal continue android package name:-com.companyname.domainname
Read more