Introduction to Web App
Development with React
Let’s get comfortable in building React app!
What We’ll Be Doing
Day 1: Be comfortable in building React App &
Deploy our App
Day 2: Industrial software engineering
Day 3: Showcase
Let’s Get Started!
Git started with git
We will use git throughout this hands on
Learn Git version control
● Version control is a system that records changes to a file or set of files over
time so that you can recall specific versions later.
● We are controlling the version of something, in our case is our program.
● In the world of software development where collaboration happens, we want
to combine our work together.
Getting Started with
Reactjs
What is Reactjs?
JavaScript library for building user interfaces.
Declarative, component based.
The most popular from its competitors.
It is important to learn
the “Mental Model”
In other words, how things work in and out.
Software is just a tool, but our knowledge is
our weapon.
Let’s Create an
Instagram Profile Page
● Grid images of 3 columns
● Profile picture
● Post, followers, following count
● Follow button
● Edit profile button
● Search user
● Bio
Codesandbox
● Head over to https://codesandbox.io/
● Sign in
● Create sandbox
● Choose official template “React by codesandbox”
● Select git sidebar menu
● Export to new github repository
● Give a name and create
● Link sandbox
Folder Structure
● src
○ App.js
○ index.js
● .gitignore
● package.json
● README.md
● yarn.lock
Getting started with React.js
● JSX and Element
● Component and Props
● State and Event Handling
● Lists and Looping
● Conditional Rendering
● Forms
● CSS Grid and UI Component Library
JSX and Elements
JSX and Elements
Identify elements
JSX and Elements
● JSX: HTML “data type” in JS
○ JS syntax extension, hence JS(e)X(tension)
○ Also an expression that can be evaluated
○ Curly braces for JS syntaxes
○ Can have children
● Element
○ Smallest unit of react
● Rendering
○ Using ReactDOM
○ Only updates what changed
JSX and Elements
Component and Props
● A JSX element that accepts inputs and returns output (much like a function)
● Can be composed
○ Combined
○ Extracted
● Props are immutable (cannot be modified), one of the properties of a pure
function
Component and Props
Create components based on
elements we made
Component and Props: Exercise
Add props into post component
State and Event Handling
● Part of React component that holds the component’s state
● Interact with event handlers
● Do not modify state directly, use setter instead
State and Event Handling: Exercise
● Instagram profile page: follow/unfollow button
○ What is the state that we need?
○ How do we interact with the state?
State and Event Handling: Exercise
State and Event Handling: Exercise
Components and
State
Is the bread and butter of how our React
app quality is determined.
Lists and Loop
● Rendering multiple elements inside a loop
● When the loop is inside JSX declaration, use one liner function (map)
Conditional Rendering
● Render based on condition
● Use one liner evaluator (ternary, logical AND and OR)
● Example: render when user has posts, else render no posts
Conditional Rendering: Exercise
Render follow button only when user is viewing other’s profile
Forms
● Data entry/user interaction
● Uses
○ State
○ Input with its event handler
○ Setter
○ Submit handler
Forms: Exercise
Create search component
Forms
Add event handler into search input component
CSS Grid and UI Component Library
● CSS Grid helps us layout our JSX
● UI component library helps us jumpstart the visual aspects of our app
CSS Grid and UI Component Library
Identify grids
CSS Grid and UI Component Library
Chakra UI
Use input component for search, and button component for edit profile
Summary
1. Start with design
2. Determine components and hierarchies
3. Build minimal static elements
4. Identify states and props
Learning Sources
● https://guides.github.com/introduction/git-handbook/
● https://reactjs.org/docs/
● https://kentcdodds.com/blog/javascript-to-know-for-react/
Thank You!
Get in touch if you need any help ;)
