REACT notes
JS library to create dynamic and interactive UI. Created by meta
The browser takes html and creates a tree like dom. THIS ALLOWS US TO USE JS TO CHANGE
COMPONENTS OF PAGE IN RESPONSE TO USER INTERACTIONS .
Vanilla js – plain js without third party script
React makes re-usable components which will take care of creating and updating the DOM
Need to have node version 16 or higher to use react
To create a react app we have 2 options:
1. Create React App (CRA)
2. Vite
Create app – npm create vite@latest
Choose any framework or vanilla (we will choose react)
In project root, npm I (or npm install)
Build – npm run build
Run – npm run dev
Project Structure
Node_modules – 3rd party lib where react and evertything is installed, never touch this
Public – public assets
Src – source code of our application
Gitignore, [Link], [Link], config files
Ts – plain typescript
Src/[Link]: global styles for app, which we can safely discard since we usually create our own
React component
2 ways to create a component: a JS class, or a function (more popular cuz easy to write)
Pascal Casing – 1st letter of every word is caps – react uses this
In the return block the html code is run as [Link]()
To use a component, we should always export it (either in the function definition or at the last line )
Regular component <a></a> useful when there’s a lot of code in between and need to know
start and end of that part
Self closing component <a /> useful when theres no item to put in between
Hmr – hot module replacement changes the part of the dom where code changed
We can use typescript/javascript (ts = js with type safety)
How react works
The code has one or multiple components in it. When react runs the code, it creates a virtual dom.
It is a in memory state representation. When stuff in code changes, the corresponding part in the v-
dom changes, and then it compares with the actual dom, and then only replaces that part of the
dom
[Link] will contain the react dom which will render our component tree inside an element with
with the ID root.
The component tree it renders is app ([Link], the starting point of the app)
This is used to identify potential problems. To do this all, we use the ReactDOM library.
We can also render the app in a mobile app using a different library called react native
This app is platform agnostic.
React only works in the ui and the additional works such as routing, etc, can be any tool we wanna
use. React has no opinion.
Creating a component
To install anything npm install lib@version name ORRRRR npm i lib@latest
Not necessary, but create a function src/components, and put all of your components in here
Class is a reserved name in java, so we use className.
In a single function, we can return only one element, so if we want to use multiple elements, then
wrap it all under a <div>
Steps:
1. Select the whole html in return
2. Ctrl + P
3. Search for “wrap with abbreviation” and select it
4. Specify in the textbox what element you wanna wrap it into (in our case, it is div)
5. Rather than div, we can import { Fragment } from "react"; and then use “Fragment” instead
of “div”
6. Or even vetter, rather than putting anything in those <> </>, keep it empty (no need to
import fragment also)
Loops
In jsx we don’t have a for loop, we use map method
We can do it like:
1. Define a list
2. Use [Link] to convert items of list(item) to something else(using arrow function, =>):
3. Like this:
To use js in html code, wrap it into { }
How it is used in ternary operator:
true && 'Mosh' 'Mosh'
false && 1 false
handling events
in react we have a property/prop = onclick onClick = { }
make it do whatever when it is clicked on