React learnings

My links and notes as I learn more about React

"React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time."
"React is all about building reusable components. In fact, with React the only thing you do is build components."

I'm finding the React docs are pretty good for a beginner
I worked on this tutorial and built it out. Nice touch that they include all you need including simple server in the starter kit. Allows me to build something straight away.

  • ReactDOM.render() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument
  • The ReactDOM module exposes DOM-specific methods, while React has the core tools shared by React on different platforms
  • props are immutable: they are passed from the parent and are "owned" by the parent.
  • To implement interactions, we introduce mutable state to the component. this.state is private to the component and can be changed by calling this.setState(). When the state updates, the component re-renders itself.
  • render() methods are written declaratively as functions of this.props and this.state. The framework guarantees the UI is always consistent with the inputs.
  • In React, components should always represent the state of the view and not only at the point of initialization.


"When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM." The data returned from render is neither a string nor a DOM node -- it's a lightweight description of what the DOM should look like."


"Introduction to React book" notes:

I'm reading the Introduction to React book (free from Safari thanks to SF library! nice). Some chapter notes.

Chapter 1

React is a js framework for developing complex UI with data that changes over time.
React built to deal with displaying data in a UI, specifically large scale UIs with data that changes over time.
Describe a user interface and a mechanism to change that over time.
Build from multile components. In world of React often better to make things more modular.
Challenges way we develop js apps
JSX (javascript xml transpiler) usage is optional
render() required for all React components
React is a global

Terms

  • components: core of React and view to your application; created using React.createClass({})
  • virtual dom: React creates a virtual dom to calculate the set of changes
  • JSX transform layer which transforms XML syntax into syntax to render; can take React classes or plain html
  • properties: set of options a component holds; immutable
  • state: property of a component; set at start and can change over time
  • Flux: sister project to React. How to get data to interact with React. Flux is not MVC because its one way, uni directional data flow.
  • add ons e.g. react router


Chapter 3

JSX is a custom templating engine for React components.
A simple precompiler converts it into javascript i.e. React.createElement() calls.





Denis Impressions

  • including JSX in js code feels very strange, as in an anti-pattern; that does challenge my mindset which is to keep markup out of the js
  • making components and reusing them elsewhere, makes me think of angular directives 
  • React components appear to be much faster to write than Angularjs directives..and much simpler to understand how to use React to create components (unlike angular directive which even Misko apologized for)
  • I like Reacts emphasis and support for fine grained components
  • creating a lot of components, I wonder what kind of component library you build up over time and how to discover components, as well as extend them?
  • having some backbonejs flashbacks with React
  • "React is a library", angularjs is a framework. As a framework Angularjs want to provide the "whole enchilada" in one serving: modules, dependency injection, service layer/models, routing, markup, components/directives, unit test framework and e2e test tool etc.


Comments

Popular posts from this blog

deep dive into Material UI TextField built by mui

angular js protractor e2e cheatsheet

react-router v6.4+ loaders, actions, forms and more