Introduction to Front-end React Development

A general introduction about React and front-end development with React.

Sorry, I meant to compose a good introduction article, but apparently I am just too tired to finish it today. To be continued ...

Forewords

My Personal Story

Recently, I started work as a full-time web developer again after graduated as a master student. But this time, I using React instead of Angular which I have some experience for front-end development since my team have chose React Dva as the main frontend framework. Although with more than one year's full-time web development experience, I have to admit that I am still quite puzzled when I stared to digest the source code of inherited Dva project from my team.

After a weeks's learning experience, I guest it's a time for me to wrap what I get up.

Front-end Development Today

Front-end Development has experienced a rapid and brutal development, and front-end tool box becomes more and more complete. From my understanding, front-end development in several years ago meant coding to interpreters inside browsers, but in recent year, front-end development means coding to compilers in larger and larger degree.

RunTime Kernel JavaScript Engine
Chrome Blink(28~) / Webkit (Chrome 27+) V8
FireFox Gecko SpiderMonkey
Safari Webkit JavaScriptCore
Edge EdgeHTML Chakra(for JavaScript)
IE Trident Chakra(for JScript)
PhantomJS Webkit JavaScriptCore
Node.js - V8

The so called compiler is usually a combination of webpack + babel (or other alternatives such as gulp, grunt, browserify and so on) and does the job of converting source code into codes which interpreters inside browsers can understand.

Thanks to the middle layer compiler between hand coded source codes and codes facing browser interpreters, hand coding owns more freedom to use different code standards/styles, take JavaScript module exports and imports for example, module.export = ... , export default ..., require(...) and import ... from ... can be used together.

Back to React Development

Where is React when comparing to jQuery and Angular?

Combined with the above front-end development introduction, from my personal point of view, coding based on jQuery is coding to interpreters, coding based on Angular is coding to compilers, while coding based on React could be coding to interpreters or coding to compilers depends on whether the middle layer compilers are adopted. And from my knowledge, React nowadays are carried out with compiler tools.

The official introductions of the above three are as follows:

Again, we can notice that, jQuery and React claim they are JavaScript libraries while Angular claims to be platform.

As a known fact, React is one popular alternative to Angular. Based on the fact, usually item in different category cannot be mutual alternative, then what make React so competitive to Angular. I would try to answer this question based on my own understanding.

React Basics

From my experience, the best way to get a basic understanding of React is by digesting its official Tutorial: Intro to React.

For time sake, I would make a brief abstraction here.

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

Tips:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

DVA

Like Symfony for PHP, there are also a even higher level framework for React - dva  . dva  makes front-end development with React more close to front-end development with Angular.

The official GitHub repository of dva  is at GitHub - dvajs / dva and a good set of documents in Chinese can be accessed at https://dvajs.com/guide/introduce-class.html.

In short, dva = React-Router + Redux + Redux-saga which considers routing and data flow problems that React itself doesn't take into account.

And based on my own understanding, dva implements a event engine for event driven programming using dva framework.

An overview of dva data flow and event driven engine is as following graph shows.

Dva Data Flow and Event Driven Engine

And more about data flow and event driven in Chinese are as follows.

Conclusion

To be honest, it is too early to draft a conclusion with just above information. However, something summarized is always better then nothing.

Dva completes React for front-end development as a front-end framework on top of great libraries like React-Router, Redux and Redux-saga.

In short, to make life easier, possibly give a try toDva for front-end development with React or learn to DIY with React-Router, Redux and Redux-saga.

Learning Guide

I hope the above information in this article can provide a general idea about React and front-end development with React. To make React really useful, to continue learning React is necessary. In my opinion, the best way to learn is by digesting the official documents. Among many ways to go through these docs, my recommendation would be:

  1. First, read Tutorial: Intro to React;
  2. Then, following React: Getting Started to go deeper.
  3. Next, learn Dva Introduction and its following documents.
  4. And, dive deeper to related libraries like React-Router, Redux and Redux-saga
  5. Finally, learn all related stuffs like Ant Design Pro for great UI components, webpack for better development environments and so on.

References

More Readings


* cached version, generated at 2019-06-21 23:18:24 UTC.

Subscribe by RSS