Assignment 4 due 10/27 3:59pm
This creates a hot-reloading (refreshes automatically when edits are made) dev version of your React site, hosted at
props, so you can see code like this:
Just calling the input
props is not good for documentation purpose, so we
usually use the object destruct syntax to make it more explicit:
In order for this component to be reused in another file, we need to export it:
React does not care about the function definition syntax, so you can also write it in arrow function syntax:
You can choose whatever style you like for the purpose of this course.
In a React app,
index.js is usually the entry point.
index.tsx is the entry point if you use TypeScript). In the code above, it
renders your component into the DOM element that has id
Imagine you are writing a message board app and you need to implement an editor.
Unlike the previous components, you need to maintain state. In React, you will
You may want to render a list of
YourAwesomeComponent. Here are some examples
to show how you can achieve this in different ways.
Note that we always need a
key prop. Without this, React will give you
warnings in the console. React needs a unique
key for each item in the list to
help it avoid rerendering everything when only one item in the list changes.