[React] Core Concept

https://www.udemy.com/course/best-react/?couponCode=ST18MT62524

 

 

|  Components Are UI Building Blocks

 

• React Apps are build by combining components.

| Why Components?

1) Reusable Building Blocks

• Create small bulding blocks&compose the UI from them
• If needed:Reuse a building block in different parts of the UI(e.g., a resuable button)

2) Related Code Lives Together

• Related HTML & JS(and possibly CSS) code is stored together.
• Since JS influences the output, storing JS + HTML together makes sense

3) Seperation of Concerns

• Different components handle differenct data&logic.
• Vastly simplifies the process of working on complex apps

| JSX

• Used to describe & create HTML elements in JavaScript in a declarative way
• But broweres do not support JSX!
• React projects come with a bulid process that transforms JSX code(behind the scences) to code that does work in browers

 

| Componen FUctions Must Follow Two Rules

1) Name Starts With Uppercase Character

• The function name must start with an uppercase character
• Multi-word names should be written in PascalCase(MyHeader)
• It's recommended to pick a name that describes the UI building block(e.g., "Header" or "MyHeader")

2) Return "Renderable" Content

• The function must return a value that can be rendered("displayed on screen") by React
• In most cases: Return JSX
• Also allowed: string, number, boolean, null, array of allowed values.
• It's important to understand that it's really just that build process that cares about this extension.
• And therefore, you'll also find React projects that don't use .jsx but instead just .js as a file extension. And in those .js files, you'll also find JSX code. Because it simply depends on the underlying build process which extension is expected when using this JSX syntax in a file.