Building with React for All Platforms: Top Frameworks and Tools
5 recommended frameworks and tools that will help you use React to build for all platforms.
React has been one of the most popular libraries for building web applications since its initial release in 2013. Developers around the world love it so much that they have invented unique ways to make React available not only for web development but also for mobile and desktop.
Nowadays, React can be used for more than just developing web applications. In this article, you will learn about React frameworks that can help you build some specific types of apps. You’ll discover the recommended React framework for building static sites, mobile apps, desktop apps, and server-side rendering frameworks.
1. Reusing React Components Across Apps: Bit.dev
“Learn once, write everywhere”
“Build once, compose everywhere”
React Native’s slogan is “Learn once, write anywhere”. That is obviously a great advantage of using the same framework for a wide variety of platforms.
But, using React for everything brings forth another great advantage — components can be reused in different apps and pages to help us ship faster and keep a consistent UI. That means you can build your components once and use them for new compositions, even if they are for different platforms.
A single product may have a web app, a static marketing site, an iOS app, and an Android app. That’s a lot! To keep things simple and affordable, we have to reuse code between these projects. That’s where Bit.dev, a cloud component hub, helps us the most.
Bit.dev makes it easy to publish React components from any codebase so that each React project, quickly becomes another source for reusable components to use in all other projects.
Bit helps us reuse components, not only by making publishing easier, but also by offering an intuitive platform to document, organize, and render our reusable components. That’s important since components that aren’t easily found will not be reused that often.
Example: Publish components from a React app with Bit
In this example, I’ll publish components from my app “Bad Jokes” (Github).
I’ll first install Bit’s CLI tool on my machine:
$ npm install bit-bin --globalThen, I’ll head over to my project’s root directory and initialize a Bit Workspace.
$ cd bad-jokes-app
$ bit initThen, I’ll track the components I’d like to publish to Bit’s registry (all the components under the ‘components’ folder)
$ bit add src/components/*Then, I’ll choose a compiler for my components. That’s done to decouple these components from the build setup of this particular project and make sure they’ll run everywhere.
$ bit import bit.envs/compilers/react --compilerCheck out Bit’s available compilers here.
I’ll then need to tag the tracked components with a new version:
$ bit tag --all 1.0.0Log in to my Bit account from my terminal:
$ bit loginTime to publish (or “export”) these components to my component collection on Bit.dev:
$ bit export eden.badjokes// that's <username>.<collection-name>
Here are my published components:
And, here my published components are used for a new Gatsby static blog:
2. Static Websites: Gatsby
A static site is a website that provides a fixed content, usually rendered from markup languages like markdown into HTML. Static site gained popularity because it requires no request to the back-end to retrieve content from the database. The content is already built, and you only need to serve it to users.
A static site is also easier to build because they require no back-end to begin with. In a static site, the HTML is served from a CDN instead of a server. It’s perfect for several types of website that doesn’t require lots of back-end processing power like blogs, portfolio sites, galleries, documentation sites.
Gatsby is a React-based static site generator that’s very popular because of its exceptional user experience (blazing fast load) and developer experience (simple APIs, easily extendable with plugins). Some web apps created with Gatsby includes the documentation of React itself.
To try out Gatsby, you need to install NPM and install its CLI package:
npm install --global gatsby-cliNext, create a new Gatsby site with gatsby new command:
gatsby new my-gatsby-siteYour NPM will start to install the latest Gatsby default starter. Once the installation is done, change your directory and run gatsby develop command:
gatsby developThat’s all you need, and you can open your Gatsby app from localhost:8000
Gatsby also has an extensive starter library to help you set up a new site quickly. So if you’re interested in creating static sites using React, be sure to check out Gatsby’s documentation for more information.
3. React for mobile (Android and iOS): React Native
JavaScript has entered the mobile app development scene as early as 2009 since the invention of PhoneGap. In the beginning, the app that can be created with JavaScript is just a website that’s styled to look like an app and served through a WebView.
Note: A WebView is a core View class of Android and iOS that’s used to display web pages.
Fast forward today, we have React Native, a mobile application framework that transforms JavaScript code into native code, allowing your application to run just like a native application instead of using a WebView. Using React Native, you can build high-performance mobile apps without learning a native mobile programming language like Kotlin or Swift.
Some popular mobile apps build using React Native include Walmart, Instagram, and of course Facebook itself.
To get started with React Native, you need to install Expo CLI, the command line development tool that enables you to bootstrap a React Native starter project:
npm install --global expo-cliThen, create your first React Native project with expo init
expo init my-react-native-appThe command will bootstrap a React Native project with all the necessary modules. You will also be able to choose one of the starter templates to help you in creating a native app. For now, let’s select expo-template-blank. Once done, run npm start to run the project.
Your terminal will display a QR code that you need to scan with the Expo app (for Android) or the camera (for iOS). Your device will build the JavaScript bundle and show the React Native welcome screen:
For more advanced development, React Native allows you to create native modules and components for both Android and iOS. So if you’re interested in developing a mobile app using React, check out React Native documentation for more details.
4. React for desktop: Electron
Electron is an open-source framework for building cross-platform desktop applications targeting Windows, macOS, and Linux. Under the hood, Electron used Chromium, the open-source project behind Chrome OS and Chrome web browser which is built by Google.
Electron itself is framework agnostic. It can be used together with JavaScript frameworks like Angular, Vue, or React. To skip configuring the project and start coding right away, you can use electron-react-boilerplate. It’s a starter code that has done the legwork of integrating Electron with React, Redux, React Router, Webpack, and React Hot Loader for rapid application development (HMR).
The boilerplate itself is very easy to setup. Just clone the public repo from Git and install the modules. It’s recommended that you use Yarn for installing dependencies to avoid errors:
git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git
cd electron-react-boilerplate
yarnOnce the installation is done, run the project in your local machine with yarn dev and you’ll see the starter screen once it’s running:
5. React SSR framework: NextJS
Server-Side Rendering is not a certain kind of app category, but more of a technique to optimize the initial load of your application content. Apps built using React are rendered on the user’s browser, which means a bundle of JS files must be downloaded before processing. This increases the initial load time before your users can interact with your app.
Server-Side Rendering is a method for optimizing React app’s performance and SEO. The first request is rendered from the server, while the subsequent requests will load from the client. Because the first request is already rendered from the server, search engines will be able to pick up on important meta data for better SEO results.
You definitely can implement SSR without any framework, but it’s not recommended because you have to handle the configuration like minification and bundling on your own.
NextJS is actually a complete React framework with several benefits, and SSR is one of them. By using NextJS, you can create a pre-rendered React app with as few lines of code as possible.
To get started with NextJS, spin up a new next app by using npm init next-app command. You will be asked to pick a project name and its template. Enter whatever name you want and pick the default starter app as the template:
npm init next-app
npx: installed 1 in 2.41s
√ What is your project named? ... my-next-app
√ Pick a template » Default starter appInstalling react, react-dom, and next using yarn...
Once the installation is done, move into the directory and run the development build with npm run dev. NextJS already pre-renders pages using Static Generation by default. The main file for rendering the welcome page is located in pages/index.js:
NextJS is an opinionated framework, which means it has a different way of developing web applications. If you want to try it out, I recommend you to learn how it works first before deciding to go along with it.
Conclusion
The popularity of JavaScript and React has opened new ways of developing applications. Seeing how React can be used almost everywhere is a good example of JavaScript’s universality, and developers who know JavaScript can use the same technology they are skilled in to build web, mobile, and desktop applications.
