Code Sharing with React Native & Webpack

Development Tools Javascript UI Libraries JavaScript Framework

Webpack Landing Page
1

Webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Pricing:
- Open Source
To bundle the code I will use the most common solution by far – Webpack. In order to use it we first need to install a couple of modules. Depending on preference you could use Yarn or NPM, I will use Yarn in the examples. We install to dev dependencies using command:.

#Web Application Bundler #JS Build Tools #Module Bundler 220 social mentions
rollup.js Landing Page
2

rollup.js

Rollup is a module bundler for JavaScript which compiles small pieces of code into a larger piece such as application.
Pricing:
- Open Source
Module bundlers allow us to develop React Native Web and React Native component libraries that can be shared across web and native mobile applications. In the example presented, we used the webpack bundler, but could have used an alternative such as rollup.

#Web Application Bundler #JS Build Tools #Front End Package Manager 44 social mentions
React Native Landing Page
3

React Native

A framework for building native apps with React
Pricing:
- Open Source
Module bundlers allow us to develop React Native Web and React Native component libraries that can be shared across web and native mobile applications. In the example presented, we used the webpack bundler, but could have used an alternative such as rollup.

#Development Tools #JavaScript Framework #Javascript UI Libraries 213 social mentions
Expo Landing Page

4

Expo

The fastest way to build an iOS and Android app 📱

It’s also worth noting the way presented above is still a bit complex because it requires a lot of manual setup. A vast effort has been recently put into development of React Native and React Native Web libraries, together with an awesome React Native dev environment called Expo, which makes building React Native apps even simpler. Taking that into account, we can expect even more examples of cross-platform development in the upcoming years.

#Application Builder #Mobile App Builder #Development Tools 34 social mentions
Babel Landing Page
5

Babel

Babel is a compiler for writing next generation JavaScript.
Pricing:
- Open Source
In the module section one needs to define all the loaders used to build particular file types. While awesome-typescript-loader and url-loader probably sound familiar as they are often used with React applications, I’d like to focus on configuration for babel-loader. Two settings are worth mentioning here – we need to use metro-react-native-babel-presets to obtain Babel presets for our React Native components, and we also add react-native-web Babel plugin. The plugin basically rewrites paths to import only the modules needed by the app. That allows us to vastly reduce the size of the result bundle.

#Development Tools #Javascript UI Libraries #JavaScript Framework 134 social mentions