react js tutorials folder structure

 https://react.dev/learn/tutorial-tic-tac-toe

npx is node pacakge execute

https://legacy.reactjs.org/

npm install create-react-app

iam deleting some files whichis unneceary as of now 

i will only index.js

 to develop from scaratch

index.js code also removed

react js is single apge applicaiton 

as of now i have public/index.html 

in react 

writng html into js

=

let heading = React.createElement(

'h1', {id: 'bg-blue'}, "this is react"

);

let root = React.createElement(

document.getElementById('root')

);

root.render(heading);

=

this only work with cdn 

so at applicaiton we have to  import

import React from 'react';

import { ReactDom } from 'react-dom/client';

in above 

react hve export

if we use curly braces,its not exported in origial file, we ahve ot export at index.js

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

let heading = React.createElement(

'h1', {id: 'bg-blue'}, "this is react"

);

let root = ReactDOM.createRoot(

document.getElementById('root')

);

root.render(heading);

just for demo above

jsx or babel ( to convert script to html )

convert above to jsx

import React from 'react';

import ReactDOM from 'react-dom';

const heading = <h1 id="bg-blue">this is react</h1>;

const root = ReactDOM.createRoot(

document.getElementById('root')

);

root.render(heading);

if we install any package, it install depenedices meand direct dependices and indirect dependencies 

that depenecices install in public folder

react to javascript to borser

src => whatrever write in src folder that will convert  to javascript

in public folder => which need not processig 

npm start 

some processing 

it will check ist public/index.html 

that will only show after taht 

index.js fromsrc folder 

in manifest.json 

{

"short_name": "React App",

"name": "Create React App Sample",

"icons": [

{

"src": "favicon.ico",

"sizes": "64x64 32x32 24x24 16x16",

"type": "image/x-icon"

},

{

"src": "logo192.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "logo512.png",

"type": "image/png",

"sizes": "512x512"

}

],

"start_url": ".",

"display": "standalone",

"theme_color": "#000000",

"background_color": "#ffffff"

}

=

in  manifest.json 

we can open this applicaiton into mobiel app also

that applicaiton called as progressive web app

if user clicks on menu 

install ap => 

our application shortcut downloads in user system

required files directory in above file

robots.text

some files or paths cannot acces  by human or robot that files list avaoalbe in robots text

# https://www.robotstxt.org/robotstxt.html

User-agent: *

Disallow:

src calleda s source code

app.css

total aplication css

index.js 

( it shows in browser in index.html)

in index.js 

we are calling app.js by importing this app.js

report web vitals .js 

to measure the preformance of our app

setuptests.js 

iut useful to ttest our applicaiton 

vuejs

routes 

calling the file s

app.vue 

call all files

index js global registeration

statemanagement

npm install 

it will install the apackages from package.json 

and store in node_modules

in depenedices object will install

"dependencies": {

"@testing-library/jest-dom": "^5.17.0",

"@testing-library/react": "^13.4.0",

"@testing-library/user-event": "^13.5.0",

"react": "^18.2.0",

"react-dom": "^18.2.0",

"react-scripts": "5.0.1",

"web-vitals": "^2.1.4"

},

to run our applcaition 

we use commands from scripts object

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

npm eject 

will run 

go ing to nodemodules then reatc scripts folder then test command

test2: ./index.js

it will run index.js

npm test2

diference betwen pacakge.json and pacakge.lock.json

tor un 

"react": "^18.2.0",

"react-dom": "^18.2.0",

"react-scripts": "5.0.1",

"web-vitals": "^2.1.4"

to install web-vital i need minumu react 18 version

to install react-dom i need react 18.2

webviteals need reactscripts is 5 . react is 18+, reactoom 18.2 minimum bersions

npm install 

it will pacakge.lock.json

it not has tilt soymbol

^ => it will instal linstall 18.2

"react": "^18.2.0",

~ => patch version required this 

major , minor , patch

x.y.z

bugs in patch

if no bugs => minimus um additons then minor versions update

cap sumbol ^ => minor version 2

~ => patch version => minum patch version 

==