Introduction to JSX
Download as PPTX, PDF0 likes512 views
JSX is an XML-like syntax used with React to describe what the UI should look like. There can only be one root element, attribute names use camelCase, and expressions are used to render dynamic values. Custom components start with uppercase letters and can accept children as nested elements or via the "children" prop. Conditional rendering uses techniques like the && and ternary operators to toggle display of components.
Introduction to JSX
- 1. Introduction to JSX Micah Wood @wpscholar https://wpscholar.com
- 2. JSX Basics
- 3. Root Element There can only be one root element.* *Except when using the <Fragment /> component.
- 5. Attribute Names Always camel case except when using data-* or aria-*. Use className instead of class and htmlFor instead of for.
- 8. Expressions An expression is any valid unit of code that resolves to a value. Boolean, null and undefined values are ignored.
- 11. Boolean Attributes An attribute with no value defaults to true. A boolean value will cause an attribute to be toggled.
- 13. Custom Components Custom components always start with an uppercase letter.
- 15. Self-closing Tags Components with no children should use a self-closing tag.
- 17. Comments If you need to leave a comment in JSX, you can do so using a single- line or multi-line syntax.
- 21. Nested Children Components that support the display of children, can accept children via nesting.
- 22. Text as a child
- 23. Element as a child
- 24. Children Prop Components that support the display of children, can also accept children via the `children` property.
- 26. Rendering Multiple Children Returning an array will allow you to render multiple children. However, JSX requires that you set a `key` property for child components.
- 27. An array of text strings
- 28. An array of components
- 29. An array of components
- 30. Rendering Children Use the `children` property to render children via JSX.
- 32. Form Fields
- 33. Uncontrolled Inputs An uncontrolled input uses the `defaultValue` property and doesn’t do anything when the field is changed.
- 35. Controlled Inputs A controlled input uses the `value` and `onChange` properties and is used when something should happen when the value changes.
- 36. Controlled Input
- 37. Select Field A select field in JSX uses the `value` property to automatically manage the selected item.
- 39. Textarea A textarea field in JSX is self closing since the value is passed as a property.
- 42. The && Operator Use the && operator when you just need to toggle the display of a component.
- 44. Ternary Operator Use the ternary operator when you need to display one component as opposed to another.
- 45. Ternary operator to toggle text
- 46. Ternary operator to toggle a component
- 47. Advanced JSX
- 48. Spread Attributes The spread operator can be used to dynamically pass attributes to a component.
- 50. Functions as Children If you ever need to customize the display logic of children from outside of a component, a render function is a great option.
- 52. React Dev Tools The “React Dev Tools” extension for Google Chrome is very helpful when trying to debug your React code.
- 54. Resources
- 55. Resources ● Babel REPL - https://babeljs.io/repl ● React Live - https://react-live.kitten.sh/ ● JSX Intro- https://reactjs.org/docs/introducing-jsx.html ● JSX in Depth - https://reactjs.org/docs/jsx-in-depth.html ● React Dev Tools - http://bit.ly/2IME9a9 ● Create React App - http://bit.ly/2JWtej8
- 56. Introduction to JSX Micah Wood @wpscholar https://wpscholar.com