Component Based UI
react hello world
What are the building blocks of a React app? Components are the building blocks that comprise a React application representing a part of the user interface. Props, short for Properties in React Props, short for properties, allow the user to pass arguments or data to components.
What is the difference between an element and a React component? A React element is an object representation of a DOM node. A component encapsulates a DOM tree. Elements are immutable i,e once created cannot be changed. The state in a component is mutable.
What are some advantages of React’s component based architecture?
- Reusability
- Repetition
- Scalability
- Simpler Maintenance
- Faster Development
introducing JSX
What is JSX and why do we use it? JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
Describe the process of embedding JavaScript expressions in JSX.
You can put any valid JavaScript expression inside the curly braces in JSX.
Is it safe to embed user input in JSX? Explain. Yes. By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
rendering elements
Explain what a React Component is to a non-technical friend. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Think of it as a standalone part of a program that does a particular thing well. It is able tothen be replicated of brought elsewhere in programs because it is modular by nature.
Describe mutability and React Components, specifically, how is the UI updated? update state either via props or internal component state, and React takes care of updating the UI based on that state update.
If changes are made to the UI, what does React update? React updates the state.
Additional Questions
Looking ahead at this module’s course schedule, What do you look forward to learning? I’m looking forward to getting more deeply into React and being able to super-charge the front end of my projects. I’m keen to be able to affect the customer experience to set the applications I work with to be more engaing.
What are your learning goals after reading and reviewing the class README?
I’d ;like to master the basics of a React app ASAP so I can get into higher level part of the application.