REACT NATIVE AND ASYN-STORAGE

In this chapter, we will show you how to persist your data using AsyncStorage.

Step 1: Presentation

In this step, we will create the App.js file.

import React from 'react'
import AsyncStorageExample from './async_storage_example.js'

const App = () => {
   return (
      <AsyncStorageExample />
   )
}
export default App

Step 2: Logic

Name from the initial state is empty string. We will update it from persistent storage when the component is mounted.

setName will take the text from our input field, save it using AsyncStorageand update the state.

async_storage_example.js

import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'

class AsyncStorageExample extends Component {
   state = {
      'name': ''
   }
   componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))
   
   setName = (value) => {
      AsyncStorage.setItem('name', value);
      this.setState({ 'name': value });
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.textInput} autoCapitalize = 'none'
            onChangeText = {this.setName}/>
            <Text>
               {this.state.name}
            </Text>
         </View>
      )
   }
}
export default AsyncStorageExample

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
   textInput: {
      margin: 5,
      height: 100,
      borderWidth: 1,
      backgroundColor: '#7685ed'
   }
})

When we run the app, we can update the text by typing into the input field.

REACT NATIVE AND USEFUL RESOURCES

The following resources contain additional information on React Native. Please use them to get more in-depth knowledge on this.

Useful Links on React Native

• React Native − Website Reference for React Native

Useful Books on React Native

• 
• 
• 
• 
• 
• 

check out how to integrate docker with react practically

Learn how to use Docker and containerization in your React apps and understand the benefits though this straightforward example.

There's a dominant trend in software development around the idea of organizing our applications into sharable ecosystems called containers. This process of putting a piece of software into a virtual container is commonly known as containerization.

Containerization is useful because it provides a consistent environment for code to grow in, from development to deployment. Today, I want to walk through an effective strategy for doing this with a React app. We'll be considering how containerization enables us to better utilize the practices of continuous integration.

Creating and Containerizing an Application

To start things off, we'll generate a React application with create-react-app:

# If you haven't installed create-react-app:
# npm install -g create-react-app
create-react-app continious-integration-app

PowerShell

This will scaffold a new React application in a directory called continous-intergration-app. The naming of things doesn't really matter at all here, so feel free to use a name of your choosing. We'll also need to add a Dockerfile in our project as well. We can do this via:

touch Dockerfile

PowerShell

Our Dockerfile is going to be the cornerstone for how the actual virtual machine environment is built out for our React application. We'll be filling it in with all the configuration and dependencies we need to effectively run, test, and deploy our code.

An initial draft of a Dockerfile for a React application might look something like this:

# The Node version that we'll be running for our version of React.
# You may have to search the Node directory for a version that fits
# the version of React you're using.
FROM node:8.9-alpine

# Create a work directory and copy over our dependency manifest files.
RUN mkdir /app
WORKDIR /app
COPY /src /app/src
COPY ["package.json", "package-lock.json*", "./"]

# If you're using yarn:
#  yarn build
RUN npm install --production --silent && mv node_modules ../

# Expose PORT 3000 on our virtual machine so we can run our server
EXPOSE 3000

Docker

There are a few interesting things about our Dockerfile setup that I want to point out. The biggest decision we're making is developing against what our ideal production environment would be. The advantage of this is that we're essentially able to simulate a production machine of any kind (Windows, macOS, or Linux) and have lots of confidence that the code we're writing translates perfectly to its final destination.

However, there is a bit of a limiting factor by only targeting production in our Dockerized container. We'll cover those drawbacks in a bit. Before we do, we need to focus on how to effectively orchestrate, configure, and run the container we just built.

Orchestrating Your Containers

Our first step with container orchestration is to get used to using docker-compose. This tool allows us to orchestrate multiple containers and configurations to build out a Docker image that's just right for our current needs.

For our React app, we'll initially just want to create something like the following:

# docker-compose.yml

version: '3.4'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - NODE_ENV=production
    command: npm start
    ports:
      - 3000:3000
    volumes:
      - .:/app

YAML

These few lines of code dictate everything from environmental variables to start commands for our containers. For more resources on what you can do in a docker-compose.yml file, check out Docker's documentation on Compose.

To build out everything, we'll run a short command:

docker-compose build web

PowerShell

The process that follows may take some time to complete. Docker is going to fetch the necessary assets to build our virtual container and then compile them. Once finished, we can start the container via:

docker-compose up web

PowerShell

This will trigger npm start and kick off our React server. Once up and running, we should be able to access our application from http://localhost:3000 just like we normally would for a create-react-app instance!

With some basic orchestration principles implemented, we can now start looking into better optimizing our containers for continuous integration!

Docker and Continuous Integration

Containerizing our React application allows us to effectively develop in a consistent environment from development to production. However, it also unlocks an enormous value when it comes to the practice of continuous integration.

Many build services like TravisCI, Codeship, or CircleCi allow developers to use their Docker configurations to run everything from testing to deployment in an Dockerized environment. The idea of continuous integration makes our always-on production environment settings a bit interesting. Because of this, we need to configure a test and development container for our application as well.

We'll be breaking apart our docker-compose.yml into pieces that better accommodate our environmental needs. There is also going to be a need to juggle multiple Dockerfiles. However, docker-compose will be doing most of the heavy lifting for us here.

First, we're going to write up a production.yml compose configuration to inject into our base docker-compose.yml file. We'll be renaming our existing Dockerfile to Dockerfile-productionas well.

# production.yml

version: '3.4'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile-production
    environment:
      - NODE_ENV=production

YAML

Next, we'll start whittling down our docker-compose.yml file:

# docker-compose.yml

version: '3.4'

services:
  web:
    command: npm start
    ports:
      - 3000:3000
    volumes:
      - .:/app

YAML

With two separate .yml configuration files in the mix now, we'll need to adjust how we instruct docker-compose to build our containers. We'll now use the command:

docker-compose -f docker-compose.yml -f production.yml build web

PowerShell

The command is a lot more verbose than our normal docker-compose build web. However, we now have the advantage of replacing whatever .yml configuration we want depending on our environment. We'll often have to create a new Dockerfile to accurately reflect some of these environmental settings.

For example, let's say we wanted to simulate what a test version of our application looked like, so we could run tests on CI services. We would need to have our Dockerfile install our testing/nonproduction dependencies in order to be able to run tests.

The new Dockerfile is going to look like our initial draft, with one difference: We're not building for production.

# The Node version that we'll be running for our version of React.
# You may have to search the Node directory for a version that fits
# the version of React you're using.
FROM node:8.9-alpine

# Create a work directory and copy over our dependency manifest files.
RUN mkdir /app
WORKDIR /app
COPY /src /app/src
COPY ["package.json", "package-lock.json*", "./"]

# If you're using yarn:
#  yarn build
RUN npm install --silent && mv node_modules ../

# Expose PORT 3000 on our virtual machine so we can run our server
EXPOSE 3000

Docker

With a nonproduction Dockerfile, we'll write a test.yml configuration to utilize it and set the proper environmental variables:

version: '3.4'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - NODE_ENV=test

YAML

Based on our previous experience, the command to build this would be:

docker-compose -f docker-compose.yml -f test.yml build web

PowerShell

With our container built and configured, we can run any kind of testing command via:

docker-compse run web [my_test_command]

PowerShell

Each environmental configuration is fairly bare. However, we're now able to specifically tailor dependencies and functionality to whatever environment we need to test, develop, or deploy from.

What's Next?

So far we've built a Docker container tailored for a React app, learned effective orchestration commands, and broken its configuration out into something that can support multiple environments. These elements are all essential for effectively developing with continuous integration.

From here, the best place to start is in developing and shipping code! Our boilerplate configuration will serve as a great place for configurations and practices to grow based off of what works best for you ad your team. You'll be able to develop software in a more consistent and efficient way.

No longer will you have to wrestle with debugging differences between an OSX development environment and a Linux production server. We can move on to focusing on optimizing and fixing code issues that are more important to the overall scheme of what we're creating.

Other Resources

• Looking for awesome UI components for your React app? Check out Kendo UI for React, built from the ground up to make React UI easy.
• Need to integrate automated testing into your continuous integration environment? Run tests around the clock and catch bugs quickly with Test Studio.

---

 app development, docker, containerization, virtualization, react, continuous integration

how to create web scrapper with react framework and nextjs

NextJS is a NodeJS framework that allows us to write server-side rendering React web application.
So there are two keywords here: server-side rendering and React.

• As we may have known, React is a JavaScript UI library that allows us to build user interface. React use virtual dom and build with components so that we can re-use them in multiple places. There are ton of articals or tutorials about React, here is it’s official web site: https://reactjs.org/
  
• How about server-side rendering? Normally, React libarary uses client-side rendering, which means that when we access the web page, all required JavaScript would be downloaded to client then being rendered to DOM elements. This is absolutely best practice, especially for single page application, that we don’t have to load the page again when navigating around. But there is a problem with client-side rendering. It is not very good for SEO. To solve this problem, one of solution is to use server-side rendering. That is, the initial render would be performed by server side, then sent to client. From that point, other rendering would be taken over by client side. By doing this, we can both decrease the first load size, and also increase SEO optimization and still using React library.
  

Why use NextJS?

By using NextJS, we can use both server-side rendering technique and using ReactJS library. An other plus to count is that it works smoothly with ExpressJS which is best NodeJS web framework right now. Last but not least, when using NextJS, I can easily configure default routes by seperating files, something similar to PHP. For example, when access to /sample_route, it would, by default executes content in sample_route.js in server side. This is very convenient if we want to build a quick demo application. Of course, still we can modify this behavior to make routing more structural.
NextJS GitHub page: https://github.com/zeit/next.js/

Implementation

In this note, I would like to introduce how I used NextJS to build a sample web scraper. The original idea is to use website-scraper package from npm. They provides a sample which uses AngularJS, so I want to create my own version using React.
Let’s start the steps.

Preparation

Make sure to latest version of NodeJS/NextJS. In my case:

• Node version: v9.3.0
  
• npm version: 5.6.0
  
• I also use boilerplates, you can search for some of them in this link. I chosen to use next-express-bootstrap-boilerplate which provide NextJS in ExpressJS framework with support of bootstrap and SCSS. You can use both npm or yarn with this boilerplate. Please follow their GitHub manual for installation instruction.
  

First, install npm package

sudo npm i -g next-express-bootstrap-boilerplate

Then cd to source code folder, run command:

next-boilerplate

After everything installed, run web application with command:

npm run dev

or

yarn dev

Here is how the default display look like:

You can check boilerplate GitHub page to understand structure of source code. The basic idea is that when accessing / root route, it would execute file /apps/page/index.js, and for /profile, it would execute file /apps/page/profile.js to render UI. This is quite straightforward and easy to understand for beginner.
Since we don’t need /profile route, I delete file /apps/page/profile.js and modify /apps/page/index.js to add UI for URL input, submit form. Here is how new UI look like:

The application structure is quite simple:

• An input form to input URL to scrape
  
• When submitting, it calls React component Index function doSubmitUrl to do POST call to /scrape_url using fetch. To understand fetch, refer to how to Use Fetch.
  
• In server side, app.js, add a function to handle POST /scrape_url:
  

    app.post('/scrape_url', (req, res) => {
        const scrapeUrl = req.body.url;
        if (!scrapeUrl) {
            return res.status(500).send('Please provide a valid URL');
        }
        const folderName = (new Date()).getTime();
        const options = {
            urls: [scrapeUrl],
            directory: `tmp/${folderName}`,
        }

        scrape(options).then((result) => {
            const zipFile = `./tmp/${folderName}.zip`;
            zipFolder(options.directory, zipFile, (err) => {
                if (err) {
                    console.log(err);
                    return res.status(500).send('zip file failed');
                } else {
                    return res.download(zipFile);
                }
            })
        }).catch((err) => {
            console.log(err);
            return res.status(500).send('zip file failed');
        });
    });

This responds a file to client and in client side, we render a link with blob response data, as a part of doSubmitUrl function:

    doSubmitUrl() {
        const data = { url: this.state.url }
        const url = '/scrape_url';
        fetch(url, {
            method: 'POST',
            body: JSON.stringify(data),
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
        })
        .then((response) => response.blob())
        .then((blob) => {
            const link=document.createElement('a');
            link.href=window.URL.createObjectURL(blob);
            link.text=`${this.state.url}.zip`;
            const downloadLink = document.getElementById('downloadLink');
            downloadLink.appendChild(link);
        })
        .catch(error => console.error('Error:', error));
    }

Here is my whole project in GitHub: website-scraper-demo-nextjs

Conclusion

In this post I introduced how to use NextJS to build a website scraper. NextJS, with a boilerplate helps us to create initial source code quickly so we can begin to code our real applications. I don’t have a chance to try NextJS for larger project but for simple demos, this is effective way to make thing done. And with ExpressJS behide, there should be no problem to use NextJS in larger scale. There are some more websites built with NextJS listed here: https://github.com/zeit/next.js/issues/1458