Check out this video for a walkthrough of the assignment.

Note: The topic shown in the video might be different.

Requirement:

1. Analyze the reference learning experience design table here thoroughly to understand
clearly what kind of activities and use cases are we looking for

2. Learn about useCallback Hook in React.

a. You’ll need to do this only for the necessary topics needed to fill in the learning
experience design table given below

b. You don’t have to master useCallback hook but the necessary topics you must
know thoroughly

3. Complete the learning experience design table below by filling up (B) and (C) columns
for each of the expected learning outcome provided in (A) column

(A) Expected Learning Outcome (B) Activity or Practical usecase (C) Demo idea or Cod
mentioned)

User understands that in scenarios when

child component has functions passed as
prop, child components gets re-rendered
unnecessarily when parent re-renders, due
to the function reference changing

User should be able to use useCallback()

to avoid function reference change when a
component re-renders

User should be able ot use React.Memo()

along with useCallback() to resolve the
unnecessary re-render issue

User understands the need of dependency

array in useCallback Hook

User should be able to use dependency

array with useCallback

Link to your final solution code: <Link Github repo here>

Estimated creation effort: ~ 5 hours

Target audience: Learners with

1. Knowledge of React and programming in Javascript.

2. Knowledge of React Lifecycle, rendering and memoization.

Guidelines for the assignment

● Ensure the statements you add are clear enough for another person checking the
template. Do include any additional context if needed.

● You can reorder the entries of (A) column for a better sequence of learning, if needed

● (B) column can have

○ Activity i.e, Exercise for learners to do

■ (C) column to include additional code needed for the activity with any new
syntax or learning clearly called out, in this case

○ Practical usecase: Practical need for a concept shown

■ (C) column to include details and any code snippets for how to
show/demo this usecase to learners, in this case

■ Note that this has to be in a way which can be shown to learners and not
just explained in words in a tutorialish way

■ Can bring in relatable analogies additionally here as needed

● The activities should form a logical sequence with the same sample application instead
of being disconnected

○ Have the activities mimic real-life scenarios as much as possible so that learners
can apply it easily in other scenarios as well

● (B) column for an expected outcome (A) can have multiple items (activities or practical
usecases) if a single item might become difficult for learners to grasp

○ If any syntax is not straightforward or needs knowledge of another topic, you

must include an additional activity or practical use case to driver understanding of
this (either usage or need) separately

What you’ll be evaluated on?

1. How well does the practical use case convey the need

2. Technical accuracy of provided code snippets

3. Attention to detail and ability to design learning content by being in learner’s shoes

● Selection of a good theme/use-case for the entire content using which good set
of activities and practical use cases can be created (eg: A counter application,
Todo application, Stock quotes portfolio)

● Good sequence of activities within and across each expected outcome, fitting in
well like different episodes of a web series
● Right difficulty level of activities with not too much to be learned in any single
activity

● Identifying any additional topics that comes in as a dependency to satisfy a given

learning outcome and including Activities/Practical use-cases for them

Submission
● Start by making a copy of this document and update access so that “Anyone with the
link” can access the doc

Learning Experience Design Table - React Fundamentals

(A) Expected Outcome (B) Activity/Analogy/Real-life usecase (C) Demo idea or Cod
(with new learning

Activity #1: Write React to show a simple element // File: src/index.js

User should be able to create a simple on the screen (eg: a heading) to get started
unstyled static page with React // Note:
// React.createElement us
JSX in next section
// Also, makes concept of

// 1 - React.createElement
const element = React.cre
element");

// 2.1 - ReactDOM.render(
// 2.2 - Linking public/index
ReactDOM.render(elemen

Activity #2: Write React to show a static Counter // File: src/index.js

page with a count display & 2 buttons (w/o styles)
const counterDisplayElem
0);

const incrementButtonElem
null, "+");

const decrementButtonEle
null, "-");

// 1 - Nesting elements
const containerDivElemen
[counterDisplayElement
decrementButtonElemen

console.log(containerDivE
ReactDOM.render(contain
document.querySelector("

User should be able to add styles to a Activity #3: Write React to add styles to the static // File: src/index.js
React application Counter page from a given CSS file
// 1. Import syntax
import “./styles.css”

// 2.1. Setting “props” para

method for adding classes
// 2.2. HTML attributes vs
const counterDisplayElem
{className: "counter-di

User understands the advantage of using Activity #4: Write React code to create a simple // File: src/index.js
JSX over React.createElement to create element (eg: heading) with JSX - show
React elements comparison of React.createElement & JSX const counterDisplayElem
versions { "className": "counter-di
(Note: This along with Activity #3 will drive this
outcome)
// 1. JSX way of creating in
const counterDisplayElem
display">0</h1>)

User should be able to use JSX Activity #5: Write React code to show result of // File: src/index.js
expressions an expression (eg: product of two numbers) on
page using JSX // 1. {} to be used for evalu
const counterDisplayElem
display">{2 * 5}</h1>)

User should be able to use JSX to create a Activity #6: Write React code with JSX for code // File: src/index.js
simple static page in Activity #2 of Milestone #1- show comparison
of React.createElement & JSX versions // v1 - Create individual ele
// 1. Using “{“ to add array
const counterDisplayElem
display">0</h1>)

const incrementButtonElem

const decrementButtonEle

const containerDivElemen
(<div>{[counterDisplayEl
incrementButtonElemen
decrementButtonElemen

// v2 - Create single eleme

// 2.1 JSX can have nested
elements
// 2.2 Only 1 top-level pare
const containerDivElemen
<div>
<h1 className="counte
<button>+</button>
<button>-</button>
</div>
)

User understands the need for components Usecase #1: Needing to display multiple Show how we’ll need to du
counters otherwise with 2 versions
(Note: This along with Usecase #2 will drive this
outcome) // v1 - without components
const containerDivElemen
<div>
<div>
<h1 className="counte
<button>+</button>
<button>-</button>
</div>
<div>
<h1 className="counte
<button>+</button>
<button>-</button>
</div>
</div>
)

ReactDOM.render(contain
document.querySelector("

// v2 - with components
(Note: Learners need not u
just see the difference in li

class Counter extends Re

render() {
return (
<div>
<h1 className="cou
<button >+</button>
<button>-</button>
</div>
)
}
}

class Counter extends Re

render() {
return (
<div>
<Counter />
<Counter />
</div>
)
}
}

ReactDOM.render(<Count
document.querySelector("

User should be able to create class Activity #7: Move the Counter static page JSX to // File: src/index.js
component for a simple static page a dedicated “Counter” component
// 1.1. Extending “React.C
// 1.2. JSX to be returned f
class Counter extends Re
render() {
return (
<div>
<h1 className="cou
<button >+</button>
<button>-</button>
</div>
)
}
}

ReactDOM.render(<Count
document.querySelector("

User understands the need for state Usecase #2: To store data within a component Class variables get overwr
ReactDOM.render() calls t

User should be able to create, read and Activity #8: Initialise a state variable in “Counter” // File: src/index.js
update state for a class component component for storing “count” to 0 and display its
value as count on the page // 1. State is initialised insi
constructor(props) {
super(props);
this.state = {
count: 0
};
}

// 2. Reading state value

<h1 className="counter-

Activity #9: Create event handlers for increasing // File: src/index.js

& decreasing Counter count
(Note: Can also have a transition here - set event // 1.1. Class method synta
handler to console.log; Next activity can be // 1.2. this.setState() synta
updating state) increaseCount = () => {
this.setState((state, prop
return { count: state.cou
});
};

// 2. Syntax to pass event

<button onClick={this.incr

Note: Functional React Co