reading-notes

View project on GitHub

What Is 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”.

  • React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

  • Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

  • React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
  • React Only Updates What’s Necessary React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

Converting a Function to a Class

  • You can convert a function component like Clock to a class in five steps:
  1. Create an ES6 class, with the same name, that extends React.Component.
  2. Add a single empty method to it called render().
  3. Move the body of the function into the render() method.
  4. Replace props with this.props in the render() body.
  5. Delete the remaining empty function declaration.

To build a complete web application with React from scratch, there are many important details you need to consider:

  • Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
  • You need to do production optimizations such as code splitting.
  • You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
  • You might have to write some server-side code to connect your React app to your data store.
Resources:

Done by Omar-zoubi