Basics Flashcards
What is “state”?
All the internal data that defines an application at a given point in time
What is React’s approach to reactive UI rendering?
You declare how state is represented as visual elements of the DOM. From then on, React automatically updates the DOM to reflect state changes.
What is React’s ‘raison d’etre’?
Reduce the complexity of creating/maintaining UIs
What are components?
Self-contained, concern-specific building blocks that are easy to reuse, extend and maintain.
Give 3 reasons why JSX is great for describing user interfaces?
1) it’s declarative
2) it’s easy to spot the relationship between elements
3) it’s easy to visualize the overall structure of your UI.
How did the web “used” to work?
For every interaction the user performed on a page, a whole new page was sent from the server (even if this new page was only a slightly different version of the page the user was on).
What does SPA stand for?
Single Page Application
What are SPAs constantly doing?
- Fetching new data
- transforming parts of the DOM as the user interacts through the UI
What does DOM stand for?
Document Object Model
What happens when interfaces grow more complex?
It gets more difficult to:
- examine the current state of the application
- make the necessary punctual changes on the DOM to update it
What technique do other JS frameworks use to keep the interface in sync with state?
Data binding
For performance reasons it’s not viable to trash and re-render the entire interface every time state changes. What’s React’s solution to this?
The ‘virtual DOM’ - an in-memory, lightweight representation of the DOM
What is the advantage of the virtual DOM over the real DOM?
It’s faster to manipulate than the real DOM
What are two typical things that might change the state of an application?
User interaction and data fetching
How does React use the virtual DOM?
- It quickly compares the current state of the UI with the desired state.
- It then computes the minimal set of real DOM mutations to achieve the change.
What is the ‘end benefit’ of React’s virtual DOM?
- It makes React very fast and efficient.
- React apps can easily run at 60 fps, even on mobile devices
What does ‘fps’ stand for?
Frames per second
What approach does developing applications using components allow us to take?
A “divide and conquer” approach, where no particular part needs to be especially complex
What is the advantage of being able to combine components?
We can create more complex and feature-rich components
React components are written in plain JS. What has traditionally been used for web application UIs though?
Templating languages and HTML directives
Why can templating languages be limiting?
They dictate the full set of abstractions that you are allowed to use to build your UI
What does React’s use of a full-featured programming language to render views make it easier to do?
Build abstractions
Why do React components lead to a separation of concerns?
They are self-contained, combining unifying markup with its corresponding view logic
What did separation of concerns ‘used to mean’?
HTML for content structure, CSS for styling and JS for behaviour
Why have display logic and markup inevitably become tied together?
Interfaces are magnitudes more interactive and complex than they used to be
What did the ‘old’ separation of concerns become?
A separation of technologies, not a separation of concerns
What are the two main reasons for React giving us the ability to render components on the server?
Perceived performance and SEO
What does the use of JSX require?
A transpilation step where JSX gets transformed into JS
What 5 things are the bare minimum we want from our React development workflow?
- Being able to write JSX and transform it into regular JS on the fly
- Write code in a module pattern
- Manage dependencies
- Bundle JS files
- Use source maps for debugging
The basic project structure for a react project contains what?
- A source folder to contain all your JS modules (common names are source or app)
- An index.html file
- A package.json file
- A module packager or build tool
Describe the index.html file in React applications
- Tends to be almost empty
- Is responsible only for a) loading the app’s JS and b) providing an element (typically a div) that is used by React to render the app’s components into
What is the package.json file?
A standard npm manifest file that holds various information about the project
What are the 2 most important features of the package.json file?
- Let’s you specify dependencies (that can get automatically downloaded and installed)
- Let’s you define script tasks
What does a module bundler do?
Modules help us organise JS code by splitting it into multiple files. The module bundler then automatically packs everything together in the correct load order
What alternatives to webpack are there in principle?
Grunt, Gulp and Brunch among others
What has the React community in general adopted as its preferred build tool?
Webpack
What is webpack?
A module bundler that can also put source code through loaders that can transform and compile it
What should the source folder contain?
JavaScript modules
What should the source folder not contain?
Static assets that don’t go through the module bundler (webpack) e.g. index.html, images and CSS files*
How can you create a package.json file?
npm init
How can you avoid all the questions asked when running npm init?
npm init -y
What are typical dependencies for our react projects?
react, react-dom and react-router
What are typical DEV dependencies for our react projects?
babel-core, babel-loader, babel-preset-es2015, babel-preset-react
What does our webpack.config.js file do?
require webpack and export a configuration object
What are the bare minimum keys on the webpack configuration object?
entry and output
What does the entry key point to on the webpack configuration object?
the main application module
What does the output key do on the webpack configuration object?
tells webpack where to save the single JS file containing all the modules packed in the correct order
What does a bare bones webpack.config.js file look like?
What script should we add by convention to our package.json file?
npm start
What should the npm start script look like?
"scripts":
{ "start": "node_modules/.bin/webpack-dev-server --progress"
}
Create a hello world component using ES6
Create a hello world component using ES6 and destructuring assignment in the module import (saves a bit of typing)
While it’s possible to render directly into the document body, why should we not do so?
Many libraries and browser extensions attach nodes to the document body. Because React needs to fully manage the DOM tree under its control, this can cause unpredictable results
In JSX, values written between curly braces are evaluated as…
… a JS expression and rendered in the markup
A key factor to make components reusable and composable is the ability to…
… configure them
How does React allow us to configure components?
Using props
What are props?
The mechanism used in React for passing data from parent to child components
What is special about props?
The can’t be changed from inside the child component; props are passed and “owned” by the parent
Besides using named props, it’s also possible to reference the content between the opening and closing tag using what?
props.children
What 3 principles are useful for breaking the interface into nested components?
- They should be small and have a single concern i.e. do one thing (if it ends up growing it should be broken into smaller sub-components)
- Analyse wireframes and layouts that give clues to component hierarchy
- Look at the data model - break your UI into components that represent exactly on piece of your data model
What are the two main approaches to building components?
Top-down and bottom-up
