Scribd
Upload
16 views

Frontend React Crash Course-1

Uploaded by

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

Frontend React Crash Course-1

Uploaded by

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

Frontend React

Crash Course
TypeScript vs JavaScript vs Java *JS is better :)

JavaScript != Java
Java is for 136, general OOP, and
backend programming.
JavaScript is used for Front-End
Development!
TypeScript is just typed JavaScript, the
WSO code base is written in TypeScript,
and all variables need to be typed.
See
https://learnxinyminutes.com/docs/typescript/
What is react?
React is a popular JavaScript / TypeScript library for building user interfaces
Created by Facebook, now used by many major companies
Key features:
● Component-based architecture
● Efficient updates and rendering
Allows developers to create reusable UI elements
Uses a syntax extension called TSX, mixing TypeScript and HTML-like code
TSX and State
TSX:
TSX is a syntax extension for TypeScript used in
React. It allows you to write HTML-like code in
your TypeScript files and easily embed
TypeScript expressions within it.
Example: const element = <h1>Hello,
{name}!</h1>;
State:
T
State is data in your application that can change
over time. When state changes, React re-renders
components.
Components
React Components are reusable UI building blocks
They return JSX, which describes what to render

Greeting is a React functional component that accepts a 'name' prop


(argument) and returns a JSX element displaying a personalized greeting
Syntax of example component
Interface vs Type
An interface is a blueprint that tells a
function what properties an object should
have and what type they should be

Interfaces are typically used to pass props


and allow for easy extensibility if there is a
future need for more props
Hooks
Used to re-render and update
components when state changes
useState: Lets you add state to
functional components
Example: const [count,
setCount] = useState(0);
This creates a state variable
'count' initialized to 0, and a
function 'setCount' to update it.
Async + UseEffect
In React, useEffect is a hook that allows you to perform side effects in your
functional components. These can be used to run certain things when things get
updated, or to load things on startup.

Async functions happen asynchronous, which means the program doesn’t wait for
the function to return before continuing. This can be important when querying APIs
or databases. If you use the await keyword you will hold on until a async function
returns.
Windows People - Download WSL (Windows Subsystem
for linux)
https://learn.microsoft.com/en-us/windows/wsl/install

● wsl –install
● You probably want WSL 2, which should be the default
○ to check: wsl -l -v
○ To update: wsl --set-version <distro name> 2
● Then set up your linux username and password:
○ https://learn.microsoft.com/en-us/windows/wsl/setup/environment#set-up-your-linux-username
-and-password
DEMO (if you want to explore some self contained react
code)

Click here for a react project that demonstrates some of this stuff:
https://github.com/mlaws21/SoundQuest/blob/main/.backend/src/components/Main.jsx

You might also like