React Gatsby Blog Template

React Gatsby Blog Template

StoryHub Creative Blog Template powered by Gatsby JS. Build your blazing fast blog powered by React JS, Gatsby JS , and TypeScript. Fast in every way that matters.

React Gatsby Blog Template

StoryHub is a blog template powered by React & Gatsby JS. It’s completely functional static blog template. It’s very fast, optimized for quick render. SEO friendly, complete markdown format supported. You will able to host it into anywhere like GitHub, s3, now.sh, etc. It’s very easy to use, it provides better performance than WordPress. We created reusable react components and modern mono repo architecture, so you can build multiple apps with common components.

StoryHub Creative Blog Template powered by Gatsby JS.

Build your blazing fast blog powered by React JS, Gatsby JS, and TypeScript. Fast in every way that matters.

Our Blog Demos

Check out our latest demos to choose your next blogging platform template.

View Demo


Developed with React,Typescript a Gatsby JS.

Boot your server-side rendering landing page in minutes.

  • Gatsby blog starter.
  • All components are written in Typescript.
  • Monorepo Supported with Lerna Configuration.
  • Reusable components across different blog templates.
  • Styled System and Style Components are used.
Hosting & Deployment

Getting your shiny new Gatsby site deployed within minutes

  • Firebase
  • Netlify
  • AWS
  • Github
  • Zeit Now
  • Amazon S3
Our Awesome Features Gatsby
  • Js Gatsby: Gatsby is a free and open source framework based on React for blazing fast websites.
  • TS Typescript: All of our components of the template are written in typescript for our customers.
  • Monorepo Support: We used Lerna for managing JavaScript projects with multiple packages
  • Instagram Feed: We have integrated Instagram feed with our blog templates to display Instagram posts
  • SEO Friendly: GGatsby helps your site place better in search engines because Gatsby pages are server-rendered
  • MailChimp Integration: Mailchimp Integration helps you design email newsletters, share them on social networks.
  • Built-in Components: We have provided a lot of useful built-in components to make it easy for customers.
  • Disqus Integration: Disqus helps you to engage your audience and retain your readers in your blog.
  • Fast performance: Optimized for smaller build size, faster dev compilation and dozens of other improvements.
Out of Box Features Ready With Modern Blog Pages.
  • MailChimp Integration
  • Engage your audience with DISQUS.
  • Instagram Feed Integration.
  • Seo Friendly Blogs.
  • Gatsby Hosting and Deployment.


How to Email authentication with React Native and Firebase

How to Email authentication with React Native and Firebase

In each and every app, you will see several kinds of authentication like login with Facebook, Google etc. But still, people prefer to entering email and password. In this tutorial, we are going to integrate Email authentication with React native and Firebase. Using firebase makes it easier to use.

Tip: Use Bit (GitHub) to easily share your React components into a reusable collection your team can use and develop across projects. Build modular apps faster as a team, save time and make life a bit easier. Give it a try.

Semantic UI components with Bit: Easily turn your components into a reusable collection

Email Authentication with React native, Firebase and Expo:

We’ll be using Expo without getting into Xcode or Android studio. Open up your terminal or command line and type in:

expo init fb-react-native-firebase

After hitting enter, you will see the screen as shown below, where you can enter the name of the app and slug. After that hit enter again.

Once the installation is complete, you will see the following screen:

We will be developing this project using VS Code. In VSC, open a new terminal, cd to your app’s folder and run <strong>yarn start</strong> .

The Expo will open a new window in the browser, as shown below. There you can see options for running the app using an android emulator or device. iOS simulator and by using a QR Code scanner. We are using an Android emulator to showcase this app.

After that, open up your emulator and use it to open the expo app.

Emulators use too much of your system’s memory. I tried using Android on Mac and it’s eating so much space.

So now we are ready to code.

Bootstrap form quickly with a native base

To design our interface faster and smoother we are using Native base for developing this app. You can check out the native base for more information. So let’s move on to the next step

Open a new terminal and run <strong>npm i native-base</strong>

Next step to import necessary Native base component to <strong>App.js</strong>

import { Container, Item, Form, Input, Button, Label } from "native-base";

And construct form interface

render() {
    return (
      <Container>
        <Form>
          <Item floatingLabel>
            <Label>Email</Label>
            <Input autoCapitalize="none" autoCorrect={false} />
          </Item>
          <Item floatingLabel>
            <Label>Password</Label>
            <Input
              secureTextEntry={true}
              autoCapitalize="none"
              autoCorrect={false}
            />
          </Item>
          <Button full rounded success>
            <Text>Login</Text>
          </Button>
        </Form>
      </Container>
    );
  }

When you save the result, you can see them instantly on the screen. This is a feature called as Hot-reloading.

A form appears on the top.

Now, form design is ready. Let’s move on to the main programming part.

Add firebase to React native project

Let’s add firebase with npm i firebaseand import firebase on App.js and then import that into our project.

import * as firebase from "firebase";

In the next step, you need to **create a firebase project. Goto firebase console **and make one as shown below:

Now grab configuration apikey which very important to access the data from the database.

And paste to App.js as shown below in the code structure.

import * as firebase from "firebase";
import { Container, Item, Form, Input, Button, Label } from "native-base";
var config = {
    apiKey: "AIzaSyDFdsjQWG8IFLXmviNqSiVZMw_ADFl5tpo",
    authDomain: "react-native-firebase-3bde9.firebaseapp.com",
    databaseURL: "https://react-native-firebase-3bde9.firebaseio.com",
    projectId: "react-native-firebase-3bde9",
    storageBucket: "react-native-firebase-3bde9.appspot.com",
     messagingSenderId: "269398778466"
};
firebase.initializeApp(config);

Now, we have successfully added firebase to our project.

Sign Up

For email authentication, we need to activate Email authentication on Firebase console.

Let’s jump back to VS Code and add a signup button to it.

<Button full rounded success style={{ marginTop: 20 }}> <Text>Signup</Text>
</Button>

Result view should be

Now we have to add signup code.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  SignUp = (email, password) => {
    try {
      firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then(user => { 
                 console.log(user);
           });
} catch (error) {
      console.log(error.toString(error));
    }
  };

We create a state for handle email and password from. We have created the form and SignUp function for handling firebase code.

Next, add form value to state with on ChangeText.

<Item floatingLabel>
            <Label>Email</Label>
            <Input
              autoCapitalize="none"
              autoCorrect={false}
              onChangeText={email => this.setState({ email })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Password</Label>
            <Input
              secureTextEntry={true}
              autoCapitalize="none"
              autoCorrect={false}
              onChangeText={password => this.setState({ password })}
            />

And we trigger SignUp function with onPress event from Signup button.

onPress={() => this.SignUp(this.state.email, this.state.password)}

Save and try to submit a form.

After submitting the data goto firebase console and check that the data you have entered is coming there or not.

Now we have added data successfully in Firebase as a new user.

Login

For login, we use code from sign up method and change firebase function.

Login = (email, password) => {
    try {
      firebase
         .auth()
         .signInWithEmailAndPassword(email, password)
         .then(res => {
             console.log(res.user.email);
      });
} catch (error) {
      console.log(error.toString(error));
    }
  };

After you need to use the **onAuthStateChanged method **to get user data. Then add an onPress method to SignIn Buton.

onPress={() => this.LogIn(this.state.email, this.state.password)}

Let’s try signing in.

Finally we have made it. We got the data from the firebase user database.

Conclusion

In this tutorial, you have learned about how to setup react native project with expo and firebase. You have also learned, how to kickstart construct UI with NativeBase? Then after that, we have created a basic email authentication using React Native, Firebase and expo.

We hope you got something from this. Thanks for reading!

Hire dedicated full-stack React native developers for custom React native application

Hire dedicated full-stack React native developers for custom React native application

The brilliant technology some of the most innovative apps like UberEars, Instagram, Airbnb is something you must have heard about. Well, React Native is the one which is the technology behind it. It has been chosen by some of the most trusted and...

The brilliant technology some of the most innovative apps like UberEars, Instagram, Airbnb is something you must have heard about. Well, React Native is the one which is the technology behind it. It has been chosen by some of the most trusted and popular brands all over the world for their mobile app development. Now, every React Native app development company providing their services to React Native development to a plethora of clients, thanks to the humungous popularity of this technology.

Hence, if you are thinking to go ahead with React Native app development, there exist few aspects to consider. For the purpose of your next mobile app development project, as well as choosing React Native development, you must know the need to hire React Native developer and how to successfully and effectively do it. However, hiring such developers for the purpose of custom React Native app development is quite a difficult job. But, let’s have a brief discussion on this highly-advanced technology.

React Native

To be clear and concise, it is essentially a JavaScript-based framework which was actually created by the social media giant, Facebook. It provides a mobile app development company with the ability to develop native apps in JavaScript. The company came up with this framework as Mark Zuckerberg, Facebook CEO, accepted that relying too much in case of mobile app development on the HTML was a mistake. They developed this framework for their app’s UI and then even went further to make it open source.

React Native applications have a modular architecture and are much more stable. It essentially allows the developer with improved coding and offers pre-loaded elements. Also, it is well-suited for the purpose of cross-platform development since it offers stability as well as budget-friendly solutions that have much better as well as optimal performance.

How to Hire Dedicated Fullstack React Native Developer

In order to hire a dedicated full-stack react native developer, you should check the following aspects and qualities in the candidate. Some of them are:

1. Comprehensive Knowledge of JavaScript with Relevant Expertise

Being an evident fact that JavaScript is the soul of React Native, it is essentially the language this technology is based on. So, React Native app developers need to have quite a comprehensive knowledge of JavaScript and relevant expertise in JavaScript in order to develop and build different components as well as an entire application. Ask questions concerning technical aspects of JavaScript, and it will help you gauge the capabilities of the developers, especially whether they are well-versed with this language or not.

2. Specific Experience in Native iOS and Android Development

Of course, there are situations where the react native developer has to work with different native tools. Hence, if he or she is familiar and in the best-case scenario, experience with native iOS and Android development, then it will certainly an additional benefit. So, hire React Native developer who actually has been involved in these developments in his or her previous projects. He should also have experience in Microsoft application development.

3. Backend Skills Expertise

In case you want to custom code the complete mobile app backend, you have to finalize a certain backend programming language at the start. This will offer you with clarity of the entire process of how to hire React Native developers. Think, you want to develop the mobile app backend using Python. So, the developer has to be knowledgeable in core Python language as well as any of its popular frameworks like Django along with development/customization of RESTful APIs, and finally, object-relational mappers (ORM) and the database with frontend skills like CSS or even HTML.

4. Impressive Debugging Skills

For every development process, there is an associated mandatory process of detection along with fixing of bugs and errors in the code. Hence, ensure that the React Native developer you hire has the inherent capability of resolving these issues.

5. Seamless Communication Skills

For a React Native developer, it is essential to have strong communication skills. A mobile app development company should go with the developer who is well-versed with the technology as well as has impressive and seamless communication skills. A developer who has impressive amazing skills easily adds more value to the mobile app development project. Also, it assists in communicating the project progress with the clients and regularly informing them about the different project development aspects.

Conclusion

Mobile apps have certainly become an essential and integral part of people’s daily lives. Hence, it has increased the demand for these apps, and mobile app development services look for frameworks that assist in the development of robust mobile apps. Pertaining to this, React Native has emerged as the best framework for not only iOS but also Android app development. React Native app development has grown proportionally higher than any other framework based development due to easier access to plugins and libraries which assist in entirely soothing and streamlining the entire mobile app development phase. However, to achieve this, a company needs to hire React Native developers who have the above-mentioned qualities and skills.

Learn React.js: Front-End Web Development for Beginners

Learn React.js: Front-End Web Development for Beginners

Learn React.js - Frontend Web Development for Beginners. In this React tutorial, you will learn the core fundamentals of React JS and Modern JavaScript so that you can start building lightning fast web apps using React JS. Learn Modern JavaScript and React JS from absolute scratch. Learn to make AJAX requests to get data from remote API and display into your web application. Learn React JS, which is one of the most exciting technology of recent time

Learn React.js - Frontend Web Development for Beginners - Web Development in 2019. In this video you will learn the core fundamentals of React JS and Modern JavaScript so that you can start building lightning fast web apps using React JS.

In this video, you will learn Modern JavaScript and React JS from absolute scratch. you will learn to make AJAX requests to get data from remote API and display into your web application.

So if you are ready to learn React JS, which is one of the most exciting technology of recent time

Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

React - The Complete Guide (incl Hooks, React Router, Redux)

**☞ **Modern React with Redux [2019 Update]

**☞ **50+ Java Interview Questions for Programmers

**☞ **Top 100 Python Interview Questions and Answers

**☞ **100+ Basic Machine Learning Interview Questions and Answers

**☞ **Introduction to Java String Interview Questions and Answers

**☞ **Best 50 React Interview Questions and Answers in 2019

**☞ **Top 50+ SQL Interview Questions and Answers in 2019

**☞ **Best Java Microservices Interview Questions In 2019

**☞ **Best 50 Nodejs interview questions from Beginners to Advanced in 2019

**☞ **100+ Java Interview Questions and Answers In 2019