Okay in the beginning there was HTML and HTML was static and then someone/group said "Let it be dynamic" and poof (insert sound effect) javascript was created. We have that much covered.

Javascript was pretty flawed from what I hear (i didn't know what a programming language was back then) and people needed some common stuff when building websites or webapps to bring it to life. Hence jQuery. John created this library and it really shined and helped people back then (and still does today) where it made ajax calls, dynamically updating the DOM, and cross-browser compatibility a pleasant experience you can watch some of his inspirations behind jQuery

So as many things in life, things change and grow and developers demanded some things and because of such things other things such as libraries and frameworks are created. You see the pattern here, there is a demand for certain functionality someone or a group of someones build it and it continues to grow.

Now React... What it is... its just a library, a javascript library , like jQuery that was created to solve a problem/s. That is all that it really is. just a library, like Angular is just framework and Brainfuck is really a language.

How does it help? An example is this, (i am assuming you are acquainted with HTML) say you have an html element like this

<table class="fancy-shmancy">

  <tr>

   <th> Foods</th>

   <th>Rating</th> 

  </tr>
 <tr>

  <td>Pizza</td>

  <td>9.8/10</td> 

</tr>

</table>

you got this nice table going on with nice css and its great. Now let us say I have many web pages and on each web page I have the same table but different values. Can you see how its going to get tedious real quick. What would be great if there was a way we can just build the layout of the table and fill it in with the different values in the different pages instead of writing this markup over and over and over again.

Enter React.

In this situation for example React would help us by making this a component. a reusable component that we could use as many times as we want in as many pages as we would like. With the added bonus of even getting the "fancy-shmancy" CSS class on each render!!!

And assuming you allow people to change the values of the ratings for example, instead of destroying the entire markup of the page and recreating it , or adding specific ids to the rows that you have to keep track of to change , React allows us to do it in an easier fashion, it does this wonderfully by already having a copy of the DOM (basically how the page was looking and all of the markup) and when someone updates the values it checks its copy of the DOM against the one that was just submitted and realises where the change should be made and only updates that specific part. They call this the Virtual DOM.

We again meet this pattern,

Demand for a certain function = library or framework (sometimes not always ofcourse)

And lastly incase you were confused by JSX, its just JavaScript dressed in certain way to make it easy for our familiar-pattern-loving brain, to make it resemble HTML. that is all, its just dressed that way. It later is built into regular JS because the browser doesn't understand JSX.

Regarding what is the flow? You can create as many cool components as you want, but if you aint got no HTML file to render this JS your pretty much letting it rot and no one will ever see it, not even you.

So you create and HTML file, usually called index.html, with an element where you want to render the react part of your application and you give it an ID. You now have an entry point much like jQuery's ('el').whatever function and you call the React render function on that specific element. and voila you are done. that's about it. You can create an entire application with just one <div> element in the HTML markup because you can create components and put those together under one big App component and render it.

I hope this was helpful

Edit: formating and links

Why React was created