Scribd
Upload
16 views2 pages

React Instruction

The document outlines the steps to create a React application using Vite with TypeScript, including commands for setup and file structure. It explains the purpose of various folders and files such as 'node_modules', 'public', 'src', and configuration files like 'package.json' and 'tsconfig.json'. Additionally, it touches on concepts like hot module replacement (HMR), JSX, and the document object model (DOM) in relation to React components.

Uploaded by

merishavic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views2 pages

React Instruction

The document outlines the steps to create a React application using Vite with TypeScript, including commands for setup and file structure. It explains the purpose of various folders and files such as 'node_modules', 'public', 'src', and configuration files like 'package.json' and 'tsconfig.json'. Additionally, it touches on concepts like hot module replacement (HMR), JSX, and the document object model (DOM) in relation to React components.

Uploaded by

merishavic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

npm create vite@4.1.

0
y

react-app
select react
select typescript
cd react-app
npm install--> npm i

code .
ctrl+`

npm run dev


follow link

node modules--> all third party libraries like react


and other tools are installed--->never touch

public folder--> all the public assets of websitesare kept


like videos and images

src-->source code

app.tsx--> app component-->rewrite

outside src--> html


root div --> container for application

script element--> main.tsx-->entry point of application

package.json--> has info about this project


devdependencies--> not deployed with appliaction in future only for development

tsconfig.json--> typescript configuration file


setting for telling typescript compiler how to compile the code
--> mostly dont touch this file unless youre an advanced user

vite.config--> dont touch

src--> create ts for typescript file, tsx for react component

function naming--> pascal case

hmr--> hot module replacement


vite under the hood monitors our files for changes
automatically refreshes the page in the browser

JSX-->we can describle UI with html and js


allows to create dynamic content

expression--> piece of code that produces a value

dom--> document object model

-js object that represents the page


--browser constructs dom when html document loaded
--provides api to interact with it.
---structures all elements as tree like structure

how react works?

app(root/top level component)-->message(child)

You might also like