What is React?

● React is a JavaScript library for building user interfaces.

● It allows building user interfaces and frontends of websites
and applications using components.
● It was created and maintained by Facebook and a community
of individuals and companies.
● Some people refer to React as a library and framework
interchangeably however it is actually a UI library to be
exact.
● What is a library?
○ Collection of reusable code
○ Reduces need to write repetitive/complex things from
scratch
○ You control how/when it's used. No/few boundaries.
● What is a framework?
○ Predetermined architecture - you follow a specified
pattern of development.
○ You work within the boundaries set by the framework
● What is its purpose?
○ To save Web Developer's time.
● How is it used?
○ There are a lot of ways to use React, both large and
small. It does both client side and server side rendering
too.
○ Server side is like pre-rendering things on your API
server.
● The difference is that a framework is a complete solution, for
instance Angular is a full featured framework because it
 includes a router, an http client, a state library and much
more.
● The reason that React is often referred to as a framework is
because it operates like one and is in direct competition with
frameworks like Angular. In fact, it is the most popular out of
the major frontend frameworks like Angular, Vue JS, and
Svelte.
● It’s often used with other libraries like React Router to create
a full featured solution. The ecosystem of React is huge so it
can be used for a wide variety of applications such as single
page apps, server side rendered applications and static
websites.

Why React?
● Back in the day the web was very static. You would click on a
link, it would take you to another page, the entire page
would refresh, this was the state of the web for a long time.
● Then came along AJAX, this allowed making requests to the
server to retrieve data without having to refresh the page.
This was kind of a game changer in terms of the user
interfaces. It allowed building user interfaces for a very
dynamic user experience.
● But as a website grows it can be very hard to maintain. This is
where React and frontend frameworks come in. Dynamic UIs
can be built in a way that’s easy to maintain and scale.
● If you’ve ever tried to build a frontend website with vanilla JS
then you’d know that it’s quite a task because the code gets
very unorganized or messy unless you build your own
framework or something like that. So using a frontend
framework makes it much easier.
 ● React uses something called the DOM - the Document ObJect
Model - it’s a lightweight copy of the actual DOM. When the
state of a component changes the virtual DOM changes first
then React will compare the two - the virtual DOM and the
actual DOM - and it will update the parts that need to be
updated. This is how React version 18 works (the current
version) and every version before it.
● React version 19 will have a compiler that will replace the
virtual DOM and it will make things faster and automate
some of the tedious tasks and make it easier to use overall.
● The reason to use React over other frontend frameworks is
because of its ubiquity in the job market. The ecosystem is
huge when it comes to meta SSR (server-side rendering)
frameworks like Next.js and Remix ( meta-frameworks are
built on top of existing JavaScript frameworks to provide
additional features for improved developer experience and
application performance. The SSR aspect of these meta-
frameworks which achieves better SEO (search engine
optimization: this is a feature which enhances a website by
increasing its visibility in search engine results pages). The
primary goal of SEO is to improve the quality and quantity of
traffic to a website by making it more discoverable and
relevant to users’ search queries.

What are Components?

● Components are the core concept of not just React, but any
frontend framework.
● A component is a reusable piece of code that can be used to
build elements on a page.
● They can be thought of as custom HTML elements.
 ● They can be broken into smaller ones, this is called
composition.
● This is a great way to build UIs because it allows one to break
down complex interfaces into more manageable pieces,
making code more easy to maintain and scaled up.
● Components can be either classes or functions; classes are
kind of the older way of doing things in React, nowadays you
won’t see class-based components because they’re all
functional.
● They can take in props (which are basically arguments and
attributes) and they can also hold their own state or data.

What is State?
● State represents the data that a component manages
internally.
● It allows components to store or manage their own data
which can change over time; it will change in response to
user interactions or other factors.
● It’s typically used for data that’s expected to change such as
user input, fetch data from APIs or UI related data i.e., if a
modal is open or closed.
● To define state in a functional component you can use a
hook; you’ll use the useState hook built into React which will
return an array with two elements: i.e., the current state
value and the function to update that state.
● Global state relates to the app as a whole and not just a
single component. This will be something like the data that is
fetched from the database and it should be shared with
multiple components. There’s ways to handle this other than
keeping glocal state in maintaining components and passing
 it down to child components to react context API which is an
option. Another option is to use a third party state
management system like Redux.

What are Hooks?

● Hooks are functions that enable functional components to
use state in other React features without writing a class -
React components used to be class-based and they used to
use something called life cycle methods that ran at specific
times during the component rendering process. Functional
components don’t have life cycle methods because they’re
not a class. So hooks allow for the same features that were
allowed in class-based components such as set state, such as
performing effects like data fetching on load.
● The two hooks to learn right now are useState and useEffect;
you can also create your own custom hooks to use in your
own components. You can create a hook that basically does
anything.

What is JSX?
● JavaScript Syntax Extension: it’s an HTML-like syntax in the
JavaScript, which is what is actually returned from a React
component.
● Although JSX looks like HTML it is actually Syntactic Sugar or
a Syntax extension for function calls and objects in JavaScript
often used with React, a popular JavaScript library for
building user interfaces.
● JSX allows you to write HTML-like code within JavaScript,
making it easier to create and manipulate the structure of UI
components.
 ● What is Syntactic Sugar? Usually new syntax built inside of a
library or framework that will clean up the syntax the
programmer have to write, sweetening it up, making it easier
to deal with.

What is SPA?
● SPA stands for Single Page Application
● Single Page Applications load a single HTML file and
JavaScript loads the entire UI including routes instead of
being loaded on the server.
● SPAs have fast and dynamic user interfaces
● There can be issues when it comes to initial page loading and
SEOs because, again, the content comes from JavaScript and
not from a server.

What is SSR?
● SSR stands for Server-Side Rendering
● This is the solution which solves the slowness of SPAs
● SSRs can be created using a framework like Next.js or Remix,
both of which still use React but it's useful to think of them
as a wrapper around React. Instead of the initial page render
being loaded from the JavaScript it is rendered from the
server which is good for speeding up initial page loading time
and optimized SEO.
● Server-Side Rendering sends a fully rendered page to the
client. You can fetch data and load it as well.
● An SSR is a little harder to deploy because it needs a server to
be deployed, so it is useful to use Vercel or Netlify to do so.

What is SSG?
● SSG stands for Static Site Generation
 ○ What is Static Site Generation?
■ The server generates a bunch of HTML files at build
time. Frameworks like Gatsby and Astro do this
because they also use React.
● Static Site Rendering is what the meta-framework does (not
React actually) when it generates static HTML files at build
time. These static sites are very fast.

What is Vite?
● It is a super fast front-end toolkit/toolchain that can be
used for all kinds of JS projects including React. It is built
on top of ESBuild, which is a very fast JS bundler.
● Vite offers a fast development server with hot-reload

How do you setup a React project?

● How to start a React project?
○ Open git bash
○ Cd a folder you want to start your project inside of
○ npm create vite@latest <project> -- --template react
(this initializes a ready-to-use Vite project with React
support)
○ However, the standard method is this…
○ Npm create vite@latest (this enables configuring it for
any framework option)npm create
○ Project name: some-kebab-case-name
○ Select a framework: React
○ Select a language: JavaScript
○ Cd some-kebab-case-name
○ Open visual studio code: code .
○ Open terminal: control + shift + `
 ○ Go to vite.config.js file: It’s typically on port 5174,
however it’s good practice to use port 3000 for frontend
stuff. Add a server object and the requisite port as seen
below:

○
○ Npm install
○ Why? There’s no node modules folder, so the
dependencies need to be installed which are?
■ React, React-Dom, Vite, also there are plugins for
ESLint and some types for TypeScript
○ Alternatively you use this method…
○ cd job-listings-app && npm install
○ If you look inside the package.json: there’s a dev script
○ Npm run dev
○ Open the local host link in the browser.
○ Determine what port to run the project on based on
port standardization standards *do a google search

What is happening when you setup a React

project with Vite?
● The general process of how a Vite project works?
○ Your index.html file loads
 ○ This triggers your main.jsx file to be loaded, which
creates your root using react-dom
○ This project root is loaded inside a div in your
index.html file that has the “root” id
○ If you go into the source folder the content within is the
React application and the entry point is the main.jsx file
○ Inside of the main.jsx file it’s importing React and
ReactDOM
○ The page/component you provided to load as the root
component will load and the rest of your project will
load into this component and function how you defined
it to function
○ If you are using a routing library you will need to set
your router component as the root component, and
configure your routing information according to how
your routing library or framework documentation
specifies.
○ Note: React library and React-Dom do not contain any
built in routing features,
○ You will need to use React Router or some framework
with built in routing like Next.js if you wish for url
routing to work properly in your single page
applications.

What should be installed on the browser, VS

code IDE, and what references should be on-
hand?
● VS Code: Node.js, Nodemon, extension: “ES7+
React/Redux/React-Native snippets”
 ● Browser: React Developer Tools extension
● Reference: React.dev which is the official up-to-date React
documentation

What is the file structure of a React using Vite

project?
● What files are created upon creating a React app (using Vite)
and what do they do?
○ Configuration files, an src folder, a public folder, and the
node modules folder.
○ The focus will be on the src folder which represents the
inner content of the React application. It's where the
folder structure is created to hopefully have a very
efficient and well-designed React application.
● Strict mode within the main.jsx file is a jsx wrapper
component that checks for potential problems in the app,
deprecated, life cycle issues, legacy content issues and stuff
like that.

What is boilerplate code cleanup?

What is Tailwind CSS?
How do you set up Tailwind CSS in a React
project?
How do you use JSX?
What am I building?