ReactJS

Building your startup with Python, React, React Native and AWS

It all begins with an idea.

Ideas are exciting. You want to get started right away and make your idea come to life. It might be that you are thinking of doing a side project, trying out new technologies at work, or preparing to launch a startup.

If you want to Gain In-depth Knowledge on ReactJS, please go through this link ReactJS Online Training

In January I launched my first startup, Proximistyle. For any outfit, Proximistyle lets you see which shops have it in stock, in your size, nearby. Proximistyle is built on a React, React Native, Python and AWS stack. I chose this stack both because I had previous experience working with it from my old job as a quant developer in a stystematic hedge fund, and because it is an easy stack to hire for.

The Proximistyle website was made in React and the iPhone app was made using React Native. They both use the same API to talk to the a shared AWS hosted Python backend.

React

React is an easy to learn JavaScript library that makes it painless to make interactive UIs. The power of React is that it lets you build your UI from a modular mixture of library and custom components. The power of components is that you can write a piece of your website once, and then reuse it multiple times.

A TODO list with some of the components highlighted

Take this TODO list as an example. A task on your TODO list is one component (orange). This means that if you wanted to change all your tasks to begin with a star emoji, you would only need to update your task component. All the places using your task component would immediately get updated. The TODO list itself (purple) is also a component. This follows the programming principle of Don’t Repeat Yourself (DRY).

Notable React Features

React code is structured into a series of components, and assembled as a hierarchy tree. You have a root component at the top, and the rest of the page is connected to this.

#1 One-Way Data Flow

Data flow in React is one-directional from parent to child. Data passed into a child is considered immutable.

#2 Virtual DOM

React uses a virtual DOM, which is an in-memory data cache of the entire website. Whenever the data for a component changes, a diff is computed and only the affected components are updated. This means that your website updates very quickly when changes happen.

#3 JSX

React uses a language called JSX, which stands for JavaScript XML which essentially allows you to write HTML in your JavaScript.

#4 Conditional Statements in Your JSX

Conditional expressions in your JSX give you the ability to dynamically change content depending on variables. You can for instance show content when a button is clicked.

#5 Libraries

One of the biggest benefits of react is the vast availability of libraries. There are available libraries for pretty much any component you would like your webpage to have. Sliders, carousels, maps, etc. This makes it very quick to get a website up and running. Two common package managers for libraries are NPM and Yarn.

Key Benefits of Using React

#1 Speed, Simplicity, Scalability

The component based architecture of React lets you quickly and easily create a website on a hobby or unicorn scale.

Take your career to new heights of success with a ReactJS Training

#2 Don’t Repeat Yourself

Using components mean creating once, and reusing everywhere.

#3 Easy to Learn

If you know HTML and JavaScript, React is very easy to get started with.

React Native

React Native is very similar to React, except it compiles to Android and iOS instead of a website. It enables you to write your mobile app in React, which means you can compose your UI from rich, declarative components. Using React Native does not mean that you’re writing a mobile web app however. It compiles to a native app.

If you already know React, learning React Native is pretty easy, as the syntax is the same. The main differences are the libraries available, and different built-in components.

React Native does not use HTML tags that React uses, as it compiles to mobile and not web. In React you would use <div> and <p> tags to display a paragraph, whereas in React Native you would instead use <View> and <Text> tags

Amazon Web Services (AWS)

Amazon Web Services is arguably the world’s most popular cloud hosting solution. It is used by hobbyists, startups, unicorns and enterprises alike. Some startups you’ve probably heard of who use AWS are Spotify, Airbnb, Slack and Lyft. As with the rest of this technology stack, the wide industry adoption makes it easy to hire someone who knows this, and you can find a lot of answers to common issues online.

AWS offers every service you can imagine. Storage, compute, monitoring, networking, analytics and machine learning. There are hundreds of options to pick from, which can be quite daunting if it’s your first foray into hosting something. I ended up asking friends in the space to recommend particular AWS services, as it was quite hard to see the forest for the trees. I also did some research online. Eventually I discovered that you mainly need to be aware of the most popular services, which will cover 90% of your needs. They are:

  • Route 53 (DNS. Needed for SSL)
  • Cloud Front (Worldwide Edge Caching for your website)
  • S3 (Website Hosting)
  • API Gateway (Your public API end-point)
  • AWS Lambda (Serverless compute)
  • EC2 (Compute)
  • DynamoDb (NoSQL database)

API Gateway

API Gateway is used to communicate between your website and your backend. It is fairly straightforward to configure, and allows you to easily push out API changes in self-defined stages like beta and prod. You can also add access or usage restrictions for your API Gateway APIs. The default timeout for an API call is 30 seconds.

AWS Lambda

Amazon’s serverless compute is called AWS Lambda. A lambda function is essentially a function that only exists for the time it takes to run it. When you call a lambda function, it spends a fraction of a moment starting up, it goes and does the thing you asked it to do, and then returns the result. You are only charged for every 100ms it took to execute the the function, compared to paying per minute or hour for a normal server. You are not charged anything when your code is not running.

It is worth noting that you can set your own custom timeout for a lambda function, but keep in mind that if you’re calling it from the API Gateway, the API call might time out before the lambda function finishes, which means it might look like you call failed when it didn’t.

Final Thoughts

You should now have a better idea of why picking your startup’s technology stack based on how easy it is to get started with, hire for and Google the issues is a good idea. Hopefully this post is a helpful push in the right direction to take you from idea to MVP. If you want to learn ReactJS, Enroll live free demo on ReactJS Online Course