Week 13 - Session 1 - Intro to React
blog image source |
ReactJS tries to solve the problem from the View layer. It can very well be defined and used as the V in any of the MVC frameworks. It breaks down parts of the view in the Components. These components encompass both the logic to handle the display of view and the view itself. It can contain data that it uses to render the state of the app.
React is founded on the idea that DOM manipulation is an expensive operation and should be minimized. React solves this by giving the developer a virtual DOM to render to instead of the actual DOM. It finds the difference between the real DOM and virtual DOM and conducts the minimum number of DOM operations required to achieve the new state.
JavaScript XML (JSX) is an XML syntax that constructs the markup in React components. React works without JSX, but using JSX makes it easy to read and write the React components as well as structure them just like any other HTML element.
- JSX is an XML-like syntax extension to ECMAScript without any defined semantics”
- JSX is a markup language (like HTML) which allows us to define React components in a declarative way.
- It is also possible to make use of JavaScript code within JSX blocks by encapsulating them in curly braces.
- () denotes a JSX block.
- {} denotes a JavaScript snippet within JSX.
React: The Virtual DOM - https://www.codecademy.com/articles/react-virtual-dom
Introducing JSX - https://reactjs.org/docs/introducing-jsx.html
React (JavaScript library) - https://en.wikipedia.org/wiki/React_(JavaScript_library)