I’ve been teaching React for a while and created a site. Though I don’t know if I am allowed to post it here.
However, I can tell you that first thing is to start from the very basics.
React Element is almost synonymous with React Component.
Each React Component has a state. The state is basically a set of properties for your component. It can be “active” set to true or false. Or anything else you can conjure up. That’s up to you as the designer of your own React elements/components.
You also have props. So these props are passed to components to set various properties of that component and its values. A React Component is like a little pocket knife, and you design what it should be responsible for doing as far as your UI is concerned.
So once you get a good grasp on syntax of how to create Elements, Components, functional components and get a good grip on JSX tags, you’re ready to start designing your application. You’ll notice that eventually you’ll get to the point where your components will need to have children. And that’s where it gets a little more complicated & up to the custom design of your components.
That’s actually pretty much it. You create components that represent different types of objects in your app. Example: Buttons, lists, to-do lists, options of all kinds, switch buttons, check boxes, and anything that can possibly be designed with HTML.
You keep going like that, creating components, mounting and unmounting them to and from your virtual DOM and control the flow of your application.
I think of React Components as turbocharged HTML elements. Because they give you so much more control over how they are programmatically represented on your page.
Hope any of this helps