React library manipulates the view layer only. It’s
uncomplicated and featherweight. Unlike full-featured
frameworks like Angular, React allows any JavaScript
developer get on board and start using React just after
reading small tutorials. React way of thinking is
different than most of the developers used to, but easy
to understand and implement in several days of
coding.
React app consist of the building blocks which are
called components. You begin with small ones like
input fields, buttons, checkboxes, etc. and after that
create wrappers from them. Proceeding with next
level wrappers you end up having one root component
that becomes your application. Every component has
its own logic and that approach provides surprisingly
effective results.
Designing the architecture for your app does not
require understanding the internal process. React
provides transparent abstraction layer for the
developers, effectively hiding any complimentary
concepts. All you need is the understanding of the
states, props and components lifecycle.
React includes additional library called React Native. It
allows creating native iOS and Android mobile apps
using the same approach and techniques as for web
applications. It won’t be exactly the same codebase,
but it will be trouble-free to adopt it. Once you master
React switching to React Native is easy.
Modern web apps are evolving quickly, gaining
performance improvements by JavaScript engines
optimizations, but there are still some limitations like
DOM manipulations. When you need to add a complex
system for user interaction the app performance may
suffer. React proposes a concept of virtual DOM to
solve this issue. DOM is kept and memory which allows
its fast changing. Then its states are compared and
changes take effect following efficient algorithms. This
allows receiving minimum r/w time and get a
performance boost.
Flux architecture, introduced by Facebook, enhances
React components with the unified data flow. The
main principle is to create actions which are controlled
by a main central dispatcher to update stores. Then
the views updates respect the changes happening in
those stores. It helps to avoid data duplication and
keeps you away from making model data in sync
inside the whole application. The most well-known
implementation of Flux is the Redux library. It changes
Flux a bit but introducing a single store, but you
benefit from having one single object which contains
all the app data.
Dev tools are what should be taken into considerations
when you choose a platform for your application. For
React there are two major players created as Chrome
browser extensions: React Developer Tools and Redux
Developer Tools. These utilities allow inspecting
components, their grouping and look into current
states and props. When working with Redux you can
observe store state and changes, dispatched actions,
etc.