#w7d1

Today I Learned: how to use React

Today we learned how to use React.

React is a JavaScript library used for building the UI. React is very efficient at updating the UI quickly and only acts on the part of the UI that has changed. This results in the absolute minimum change to the DOM. React uses a Virtual DOM (Document Object Model) that selectively renders the UI based on state changes.

After a Q&A of the React in lecture, we split up into groups to work on the projects for the day. My partner and I were able to create the following widgets: Clock, Weather, and Autocomplete.

Today we dove into creating full frontent views using React for the first time. React is a JavaScript library that serves as a framework for writing frontend views for web apps that can dynamically respond, or react (as the name implies), to user interaction. Unlike JQuery, React achieves its high reaction speed by storing a virtual DOM, in which all React components are rendered, which is then compared to the actual DOM, allowing React to change only the exact elements that need to be changed to make the actual DOM match the virtual DOM whenever the virtual DOM is changed.

Much of today focused on learning the characteristic methods of React components, such as setState, getInitialState, componentWillUnmount, and of course, render. We also learned about props, state, and ReactDOM. Within a React view, we usually have one root node in which all of our components are built within some "meta" React component. This meta component passes whatever props its children components require to them, and so on and so forth for those components and their children. Thus, we only have to render a single component with ReactDOM: the aforementioned meta component. Then, that component will cause all of its children to render, which will in turn do the same for their children, and so on and so forth. Then, whenever any of these components change, the change will be reflected in the virtual DOM, which will trigger a re-rendering of the actual DOM in only the places where there is a difference between the two.

The pieces are finally coming together - and in a big way. Today they dropped React.js on us, and it’s even more insane and beautiful than I imagined.

Today we got started working on React. I can see its value switching from more imperative programming style to functional programming where we specify functions to be done instead. I think React makes things a lot easier by standardizing the way we add and render elements to the DOM. Using JSX also brings a more familiar HTML-like syntax to structure are Node components when rendering.