What is React's primary role in helping us to build web applications?
It's role is just to use data to render a UI or View(s)
What dependencies should we use to get started building a React Application?
react, react-dom, webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-react
What are 3 things we need to account for when defining our Webpack configuration?
-
entry: The location of the app's root javascript file (specifying the app's point of entry).
-
output: Where we want the bundled up output to go.
-
loaders: The specific transformations to apply to our code.
What is Babel?
JS Compiler
What is JSX used for?
JSX is an alternate Javascript syntax that allows us to write code that strongly resembles HTML. It is eventually transpiled to lightweight JavaScript objects. React then uses these objects to build out a "Virtual DOM"
What is the Virtual DOM? How is that different from the usual DOM?
The Virtual DOM is a Javascript representation of the actual DOM. React isolates the changes between old and new instances of the Virtual DOM and then only updates the actual DOM with the necessary changes.
What does every component need at minimum?
A render method! It generates a Virtual DOM node that will be added to the actual DOM.
What are .props?
Properties! Every component has .props, they are immutable and cannot be changed while your program is running.
How do we display data that will change in our application?
Through a component's state, in which values stored in the component are mutable attributes.
What is .setState doing?
Whenever we run .setState, our component "diff's" the current DOM, and compares the Virtual DOM node with the updated state to the current DOM.
React only replaces the current DOM with parts that have changed.
Instructions:
Create a simple react application that has at least two components, for a Button and Image. The goal is to toggle the display of any image of your choosing when you click the button.