JavaScript frameworks are a collection of code libraries. These code libraries provide pre-written code for developers to use. React is an example of a JavaScript framework, however we will be calling it a library as the lines are a bit blurred for React. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
The biggest reason given in the second article is that 'keeping the UI in sync with the state is hard'. Frameworks are also the next step in programming. They make it easier on the developer to write code in a more DRY and SRP form. The components provided in the react framework will make coding faster and more efficient. The also have many useful extensions and allow us to have a virtual DOM.
A component is a collection of HTML, CSS, JS, and internal data specific to that component. They are very similar to modules. They are defined by vanilla JS or 'JSX'. Components are useful because they are reusable and independent bits of code. They are also useful because they have a strong community, they have plenty of third party libraries, and they have browser extensions that help debugging things.
JSX allows us to write HTML in our JavaScript files. Though, it is not technically HTML, this is what react is calling 'JSX'. JSX allows us to write this HTML and it is transformed through react into lightweight JavaScript objects and from them form a virtual DOM.
React props are essentially inputs that describe what we should see. The handle state in the highest most parent components and pass the state down into the child components using props. It is defined in that article as 'The data which is passed to the child component from the parent component.'
Each component within react has its own state that is passed down to it child components if needed. The state is an object that represents the parts of the app that can change. The definition from the article is 'The internal data store (object) of a component.'
Data down is when props are being passed down from its parent component to its child component. An action occurs in that child component that is passed up to its parent component to interact with the data.