React's react Native

React's react Native

React is undoubtedly the hottest front-end frame of the year, with star on GitHub on 30,000, and react-based react native star on 20,000. With react, the component seems to be no longer faltering, with the react Native, the front edge seems to be vast. Webpack, by virtue of its excellent features such as asynchronous loading and separable packaging, is on the way to replace grunt and gulp. And the future-oriented ES6, modular support seems to be a foregone conclusion.

We can now create our own WEBPACK+REACT+ES6 environment and begin to explore.

This article gives an introductory guide to the front end of the road.

Article Guide:

• First, the example run up to play (Setup your background)
• Second, understand react
• Iii. introduction of Webpack
• Iv. start exploring && expanding reading now

First, run the example (Setup your background).

You can fork my [React-webpack]demo project on GitHub, or start from scratch:

1.1 The first thing we need to do in a new project called React-webpack is to create a new Package.json file that looks something like this:

View Code

1.2 The second step is to create our webpack configuration file Webpack.config.js:

View Code

1.3 At the same time we also need to introduce the program in the portal file index.html Some of the necessary things to run, although his role does not seem so obvious:

View Code

Note that the reference to the Bundle.js file is very important, he is our packaging after the import file, do not introduce it program is not run up.

The App.js file is the entry file for the program, and here we deal with simple routing-like logic:

View Code

Believe you have seen ES6 figure, yes, here, we write ES6 code, as long as the new JS file, we write ES6 code in it.

We put a connection on the portal file, separating the HelloWorld code that we are most familiar with. Also for the convenience of later we write other examples can have a separate file, easy to manage and view, as seen below the project directory, a JS file is a small example of the code.

Hello.js:

View Code

1.4 Execution:

1 NPM Install

Plus some of the necessary file portals, our project should now look like this:

The directory that I fork down from my GitHub should look like this:

It contains a few small examples that I have written well. Of course, we'll just follow the above catalogue to create the right thing.

1.5 programs run up and execute:

1 NPM Start

Then visit [http://localhost:8080/webpack-dev-server/] and we can see that the project is running.

Second, understand react

As Facebook opens its open source, react Native for android,react seems to be more promising. It evolved from the earliest UI framework into a set of solutions for Web applications, and its derived react native was more of an ambitious target: learn once, Write anywhere. This seems to be an irresistible attraction for the front end.

React has three keywords:

-Just The UI
-Virtual DOM
-Data flow

To understand react, I start with these three key words.

2.1 Just The UI

React is responsible for UI-level presentation, although many people use React as the view layer in the [MVC] architecture, but this is not React's intention.

In general, in the development process, we usually use the template or directly using HTML to build the UI, and HTML is static, the use of templates in most cases can be satisfied with the requirements, but in a complex logic situation is a bit difficult, too much if else or logic control in the template, Will make the code difficult to maintain, of course, it is the case that the entire project uses a uniform template.

React a way to solve the problem by splitting the UI into components rather than through the template engine and presentation logic, making it easy to extend and maintain. So it introduces the syntax of JSX, which allows us to write JS function calls using HTML-like syntax.

2.2 Virtual DOM

The general process for a browser to render a page is usually this:

1 load html-> build DOM tree parse CSS Generate render tree Build page

So what does the react virtual dom do?

1 Generating virtual dom->diff-> necessary DOM updates

In this case most of the operations are placed in JS to complete, because we all know that Dom operation is very expensive. So in the general situation react performance is very good.

2.3 Data Flow

The data flow in the react is flowing along the component tree from top to bottom.

Data flow here refers to the implementation of an application architecture, such as where the data is stored, where the event is triggered, and how it responds to user actions. It is not what new features react provides, it should be the practice of react building applications. We understand that flux may be easier to understand when it becomes possible to follow the concept of data flow.

2.4 Flux Overview

Flux is an application architecture idea for Facebook's companion react. It complements the REACT's reusable view component with one-way flow of data.

The data flows in the same way as the react, and in the flux architecture, the data flows in one Direction:

Simply put, all of the data flows will go through dispatcher. Action can be generated by action creator and provided to dispatcher, but in most cases the action is generated by the user interacting with the views.

Capturing the user's interaction at the view layer produces an action that triggers the event callback that is registered on dispatcher, causes the relevant store to respond to the action, and then triggers the onchange event on top of the store to further update the view.

Data flow is also always the one-way flow as shown.

This example is practiced: [Thinking in react] can be very helpful in understanding the basic workings of react.

Iii. introduction of Webpack

3.1 What is Webpack?

It is not appropriate to say that Webpack is similar to grunt and gulp, and that Webpack is similar to the browserify-like module management tool. But Webpack does much more than that.

Webpack, from Facebook's Instagram team, found a better summary of its main features on the Web, as follows:

1 supports both COMMONJS and AMD modules (recommended for new projects, direct use of commonjs), 2 inline module loaders and plug-in mechanisms for greater flexibility and extensibility, such as providing support for Coffeescript, ES6; 3 Can be packaged into multiple files based on configuration or intelligent analysis, to implement public modules or on-demand loading; 4 support for the packaging of CSS, images and other resources, so that without the development of grunt or gulp;5 in memory to complete packaging, faster performance, fully support the development process of real-time packaging requirements; 6 Good support for Sourcemap, easy to debug.

Webpack all the resources in the project as modules, the modules can depend on each other, webpack them to manage, package and publish them in our workflow.

3.2 webpack.config.js File

In the example we ran up front, we could see the webpack.config.js file, and all the work related to Webpack in this file.

It looks like this is the case now:

View Code

It is usually placed in the root directory, he himself is a standard COMMONJS module, we may have seen the require,module.exports such as the iconic keyword.

Its main configuration parameters are:

-Entry:

1 entry: [2       ' Webpack/hot/only-dev-server ', 3       "./js/app.js" 4     ],

It defines the packaged entry file, the files in the array are in order, and it solves the dependency problem by itself.

In fact, we also define the Webpack development server, Webpack-dev-server, which we can see in the Package.json file:

1 "Scripts": {2     "start": "Webpack-dev-server--hot--progress--colors", 3     "build": "Webpack--progress--colors "4   },

This is why we have access to the page after NPM start has started the server http://localhost:8080/webpack-dev-server/.

-Output:

1 output: {2         path: './build ', 3         filename: ' bundle.js ' 4     },

It defines the location of the output file, including the path, file name, and possibly the run-time Access Path (publicpath) parameter.

-Module:

Webpack all the resources as modules, and the module requires the loader:

1 module: {2         loaders: [3             {test:/\.js?$/, loaders: [' React-hot ', ' Babel '], exclude:/node_modules/},4             {test :/\.js$/, exclude:/node_modules/, Loader: ' Babel-loader '},5             {test:/\.css$/, Loader: ' style!css '},6             {test: /\.less/,loader: ' Style-loader!css-loader!less-loader '}7         ]8     },

For different files, we can configure ourselves to use different loaders. You can also implement your own loader.

Here we configure the Babel-loader, can let us in the JS file arbitrary start to write the code ES6 specification.

Webpack can be concatenated between the loaders, and the output of one loader can be input to another loader. For example, less files are processed into CSS by less-load, then loaded into CSS modules by Css-loader, and finally processed by the Style-loader loader, so that the runtime can be applied to the final browser environment through the style tag.

-Resolve:

1  resolve:{2       extensions:[', '. js ', '. json ']3   },

Webpack is a local-to-directory-based lookup of dependencies using a similar browserify approach.

The extensions array in the Resolve property is used to configure which suffixes the program can self-complement. For example, we want to require a Common.js file, add this configuration we just write: require (' common ');

-Plugin:

1 plugins: [2      new Webpack. Noerrorsplugin () 3  ]

We can configure the various plugins we need to use in the plugin parameter. For example, if we want to package multiple files separately, we may use:

1 {2   entry: {a: "./a", B: "./b"},3   output: {filename: "[name].js"},4   plugins: [New Webpack. Commonschunkplugin ("Init.js")]5}

Iv. start exploring && expanding reading now

For the future of ES6, modular support seems to be a foregone conclusion. We can start writing ES6 code right away by configuring it from Webpack.

By creating such a working environment, we can start new explorations using a variety of new and future-oriented technologies.

Start exploring Now! Don't wait for the future to come, but find yourself unprepared.

Extended reading:

[Front-end engineering exploration based on Webpack]

[Webpack Introduction]

[Webpack-howto]

[Webpack Home]

React's react Native