📄️ Elements
React elements are written just like regular HTML elements. You can write any valid HTML element in React.
📄️ Element Attributes
Additionally, JSX requires a different syntax for its attributes.
📄️ Element Styles
To apply inline styles, instead of using double quotes (“”), we use two sets of curly braces.
📄️ Fragments
React also gives us an element called a fragment.
📄️ Components
We can organized groups of elements into React components.
📄️ Props
React components can accept data passed to them called props.
📄️ Children Props
Props can also be passed by placing data between the opening and closing tags of a component.
📄️ Conditionals
React components and elements can be conditionally displayed.
📄️ Lists
Lists of React components can be output using the .map() function.
📄️ Context
React context allows us to pass data to our component tree without using props.
📄️ Hooks
React hooks were introduced in React version 16.8 as a way to easily add reusable, stateful logic to React function components.
📄️ useState Hook
useState does exactly what it says—it allows us to use stateful values in function components.
📄️ useEffect Hook
If we want to interact with the “outside world”, such as using an API, we use the useEffect hook.
📄️ useRef Hook
useRef allows us to get direct access to a JSX element.
📄️ useContext Hook
useContext provides an easier way of consuming context than using the standard Context.Consumer component.
📄️ useCallback Hook
useCallback is a hook that we use to help with our app's performance.
📄️ useMemo Hook
useMemo is another performance hook that allows us to ‘memoize’ a given operation.