reading-notes

Component Based UI

react hello world

1. What are the building blocks of a React app?

Components and elements.

2. What is the difference between an element and a React component?

A React element is closer to plain-ol-HTML whilst a React component returns React Elements.

3. What are some advantages of React’s component based architecture?

The main advantage of React’s components are that they can be dynamic and respond to changes in state or user input.

introducing JSX

1. What is JSX and why do we use it?

JSX is an extension we use to run JavaScript code by nesting the code in curly braces: {};

2. Describe the process of embedding JavaScript expressions in JSX.

We can write an html element and embed a JavaScript function into the content to render whatever is in the function by surrounding it with curlies.

3. Is it safe to embed user input in JSX? Explain.

It is safe to embed user input. React DOM escapes and values embedded into JSX before rendering them, so threat actors may not inject any malicious code.

rendering elements

1. Explain what a React Component is to a non-technical friend.

Each React Component can be thought of as an ingredient in a sandwich. Each bit can be split and reused in other sandwich combinations.

2. Describe mutability and React Components, specifically, how is the UI updated?

Mutability is the ability to change something. React elements are immutable, but React Components can be updated dynamically with changes in state or user input.

3. If changes are made to the UI, what does React update?

If changes are made to the UI React and we’re using a component, that component will be updated/re-rendered.

Additional Questions

1. Looking ahead at this module’s course schedule, What do you look forward to learning?

I’m looking forward to learning React Native, because I would like to develop a mobile version of the 201 final project my group worked on (guess-the-rainbow).

2. What are your learning goals after reading and reviewing the class README?

My goal is to be able to know when it’s appropriate to use class and functional-based React Components, as well as how to wisely implement each.

Bookmark and Review

Things I Want To Know More About

Previous Reading

Next Reading