JSX
- JavaScript XML
- Not mandatory for writing React
- Translated to React.createElement calls by Babel
- Babel is JavaScript compiler (Included in Create React App)
Embedding Expressions in JSX
JavaScript expressions can be used in JSX with curly braces.
Specifying Attributes with JSX
Use quotes to specify string literals as attributes.
Use curly braces to embed a JavaScript expression in an attribute.
Specifying Attributes with JSX
- React DOM uses camelCase property naming convention
- class = className
- tabindex = tabIndex
- onclick = onClick
Props
- Like attributes in HTML
- Use to pass data to component
- Make components re-usable
- Defined in the JSX tag (camelCase naming convention)
State
- Never modified directly
- Use setState-method to update state
- Component re-renders after setState
- setState takes an object as parameter
Updating state
- Main state
- Data that is usually available for the whole application
- Tasks-array in our app
Application state
- Local to single component
- Not visible or accessible to other components
- Required only by that component
- In our app "text" in AddTaskInput component
Component state
React Basics
By tume
