lessonFive: getting started with reactjs

what are we making

A simple emotion intepretor. I am often confused with the meanings and I keep going to emojipedia. Wanted to make something like for my use with different sets.

For following along, you can pick any set: travel, food, flags, symbols, activity and make your own version of it. Mine is emotion interpretor, yours could be flag interpretor, or food interpretor. Make it yours!

ex01: getting started with reactjs

challenge

• know your way through ReactJS website
• can you explain..
  • declarative
  • component based
  • learn once, write anywhere in your words?

understanding

• The best place to get started with ReactJS is the website. The first exercise is thus to explore the docs, know where everything is. How to look into docs if you have any issues.
• Know that React is more about understanding the flow than syntax. You can always refer to syntax, but the concept of how React works is more important.
• Few tutorials teach you how to think in React and that's why you keep struggling, it's time to pay attention.

ex02: walk through codesandbox

challenge

• start a react sandbox
• edit app name
• understand index.html
• save
• share your codesandbox
• share your app with end user,
• to put it on your portfolio, use the output link

understanding

• codesandbox is VSCode in cloud, it's like REPL
• it's easier to share your code like this and collaborate when you're working on small pieces
• used a lot these days for remote interviews too

ex03: walk through react app

challenge

• what are the files in this sandbox? do you know how they are connected?
• explain how index.html << index.js << app.js << styles.css flow works here.
• what's ReactDOM?

ex04: edit heading

challenge

• let's make our first change and edit the heading which says codesandbox

understanding

• this is just like editing HTML, but see that file is not .html but .js

ex04: getting to know JSX

challenge

• write your first JSX component
• make a name component and change the variable to see how it changes
• put some style on it, make the font color red
• can you make font color a variable too?

concepts

• using JSX as template
• simple data
• attributes such as href
• basic styling.
• class vs className in JSX
• style as an object
• Always start component names with a capital letter.
• 📝 docs link: https://reactjs.org/docs/introducing-jsx.html

ex05: live exercise

challenge

• create a JSX with welcome message
  • use h1 for that
  • color should be blue
  • it should take a variable and show welcome <username>

ex06: console onClick

challenge

• create a button, say 'Like`.
• put a liked message in console when this button is clicked.

understanding

• onClick is different than DOM method onclick
• we don't need to addEventListener() in React

ex07 live exercise: add and console onClick

challenge

• create a variable, likeCounter
• on every time the Like button is clicked, increment the counter variable

understanding

• if you're able to complete this, you have done the entire cycle: input --> processing --> output for this mini likeCounter app/component. Only thing is that you're showing output outside the React app, let's bring it in.

ex08: update counter in view

challenge

• use useState to update the state in React
• show the updated state in console
• now, consume the updated state in the view

understanding

• array destructuring in ES6 observed
• you need to give an initial value too
• useState is

ex09: explain render cycle

challenge

• Explain to someone how React render cycle works. view --> event ---> state ---> render()

ex10: handle data from input element

challenge

• use an input element and put an onChange event
• console the value which user is typing
• update the value using useState (even this is consuming in view only)
• now consume this value in view

understanding

• look at forms section of React doc if you don't remember the syntax.
• remember how we used .value property of input elements in vanillJS class? this is the same thing
• I personally like React more, and there are many more like me, because it uses plain JS concepts and has less syntax overhead keeping the overall API to bare minimum.

ex11: show meaning

challenge

• input and output is done, processing is pure JavaScript
• create object to put all emoji data at one place
• get data based on key, show that data in view using useState

if (inputEmoji in emojiDictionary)

understanding

• Data structure
• Using the right data structure for needs would help in making access and update faster
• that's the whole idea behind DSA, we'll explore more in levelOne

let's revise

The flow is still same like any other program we have written till now.

• input User clicks on an element, or write in input
• process In the event handler, you update the state
• output In the view, you consume the state and thus show it to user

bonus (Optional)

Make any app you made previously using React. The leap year app, the palindrome app etc.

Only the input/output changes, the processing remains same.

HANDLING A LIST OF DATA

ex12: convert an object to array

challenge

• take the object created and get an array of keys

understanding

• built in functions are there in JS
• what is being returned is an array of keys and not the values

ex13: put lists in React

challenge

• show all emojis that we know

understanding

• map() and index
• callback in map

ex14: put a click handler on list item (input)

challenge

• onClick for any item, it show which item was clicked from the list
• syntax: onClick={() => emojiClickHandler(emoji)}

understanding

• you have one clickHandler for every item in list, make it unique by passing the emoji to the function

ex15: set state (processing)

challenge

• onClick get the inputEmoji from the list and set the state again for setMeaning

understanding

• output of setMeaning ie meaning is already shown in the view. Thus, different actions can lead to same output in an app.

**assignments for markEight and markNine**

markEight - The emoji interpreter app we made during the lecture is the mark8 requirement.

markNine - Make an app similar to this book recommendation app.

• List genres of something you’re interested in:
  • Music
  • Food
  • Travel
  • TEDx Talks
• when the user clicks on genre then show a list of items with your ratings for that genre.

hint

This is the same as the app which we did above. When a user clicks instead of showing just one meaning, you need to show a list.

stuck? need help?

If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.

Go to Discord Server and ask doubts in the general-coding channel.