React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.

It
is maintained by Meta and a community of individual developers and companies.

React Concepts
1. Don’t touch the DOM. I’ll do it. (DOM-Document Object Model – browser uses to
display; JavaScript uses this DOM to manipulate) It’s what they called Imperative paradigm you directly change
individual part of your app in response to various user event. In React its – Declarative paradigm we declare that
“hey this is what the state or data of our data should be like”. The name React is simply saying “hey based on
whatever the state or data of the app I’m just going to React to it and change everything for you so you get the
display that you want”; State a JavaScript object that describes an app, all data of an app is in within state. React
takes care of DOM’s changes for us using something called Virtual DOM

2. Building websites like Lego block – React is design around the concept of reusable
components. Each individual pieces create a whole app. React had this idea of small components that you put
them together to form bigger components. In simple term, its just JavaScript function that we write. Components
build HTML element inside JavaScript file called JSX. We build websites like Components

3. Unidirectional data flow – data only flows one way so it easier to debug our code. The idea of
state works with the components which are build using jsx – HTML syntax inside of JavaScript. Virtual DOM -
gives react a blueprint of how it should update the actual DOM. In react the data cannot move up

4. UI, the rest is up to you – can now use the same idea, same principle, same JavaScript code to
build Desktop applications, VR apps and to build mobile apps

React Keywords
Declarative; JSX; Components; States; Props; Virtual DOM

The Job of a React Developer

1. Decide on components; What is a component, how much do we want to break down a component? How do we
build these reusable components as we’ve seen? And deciding how to break down the app into different
components
2. Decide the States and where it lives; This state can live in different location in our Virtual DOM; Placing state
in appropriate component
3. What changes when state changes; What to re render, what part of Virtual DOM changes

npm (node package manager)

 these packages are just these different node related libraries or files and folders that get created by different tool
developers online that we can use to help us with our node project or JavasScript based projects
 is what we use to coordinate and also leverage these different packages create-react-app is an example of one of
these
  is an installation as well as an executable environment?
npx

 directly installs all of the required files for this package and it executes immediately
 when you call for npx you are going to ask for the latest version
“a great React Developer really understand when React is rendering and re-rendering your website”
Functional components with hooks – the modern way that we do a lot of things in React
npm start – script that start will start up your React server that will then host our website

Event Handler on (The name of the event) ex. onClick

 is really just something that I want to happen whenever an event happens

 ex. Every time a button is clicked. I want something to happen
 onClick – whenever this get clicked, some functionality to happen; is a property which is equal to block of
JavaScript {} whenever you want to use JavaScript. Function or callback function – is just a function you pass
to some kind of handler that you want it to call during some process
setState = updating state into different object
key property – is just property on
className – because it’s written in jsx – is a syntax extension of javascript meaning all rule to javascript apply to jsx

Anonymous function – that is not stored anywhere in the variable

Props – short hand from properties identical to the property that we use like , className, type, placeholder, onChange

useState is a React Hook that lets you add a state variable to your component.
const [state, setState] = useState(initialState)
react-router-dom @6
BrowserRoute
<Routes/>
<Route>
Outlet
Link