React Components

React components are one of the key pillars to learning how to use React. They are reusable code that you can import anywhere you want. It's very similar to how gems work in Ruby, if you're familiar with that. The way you'd go about using a react component is by having a React function with a named function written as such:

import React from "react"

function ReactExample() {
return (
    "Hello"
  )
}

export default ReactExample;

The export default at the end is what allows this component to be used in other components of code. To actually import this block of code into another component you have to do as such:

import ReactExample from "component-path"

Where it says component-path you'd have to write the path in your file you need to take to read the component. Having a feature like this just makes everything easier to write. You could have a certain format of a card that you're using in one section of your work and want to use it somewhere else as well. Instead of copy pasting it you can import a component by writing:

<ReactExample/>

This also ties into a previous post that I made about props where you pass props by writing:

<ReactExample example={ExampleProps}

To clarify, the props that you pass into the component don't have to be titles props. You can title it whatever you want just as I did with titling the props I passed in "example". This is pretty much the gist of all you need to know about components in React.