We built our entire startup on React Native and this is what we found out

We built our entire startup on #ReactNative and this is what we found out:  #developer

  • However with the Android market share being pretty high, we had to make sure our app worked on both Android and iOS.
  • We wanted the iOS app to look and feel native.That’s where React Native came into the picture.
  • Could React Native pull this off and still look native?A few months down the line, with our iOS and Android app on the respective stores, I can tell you the journey was nothing but spectacular.
  • But hey, if we could go from an iOS app to fully functional Android app in 2 days, can it really get any better?Honestly I have never written an app for iOS on objective C that didn’t crash during beta testing a few times.
  • And to my amazement, our React Native app on iOS is yet to crash even once during production run.

At Genie! we like to spend most of our time giving our users the best experience to send and receive gifts. However I only had expertise writing apps for iOS and not Android. When we first decided to…
Continue reading “We built our entire startup on React Native and this is what we found out”

Creating a chat web app using Express.js, React.js & Socket.io

  • Implementing Send Message functionalityLet’s go back to our Client’s Chat.js Component and add the following functionality to our button:Now let’s create this.sendMessage function:in Constructor add the following:Great.
  • You are now sending the message to the server every time you click ‘Send Message’, and then your message input is cleared so you can write another message.
  • All we have to do now is tell the server to emit the message to everyone who’s socket is connected to our server.In app.js on the server side add the following code:What we are doing here is that we are emiting the info we received from the client (author and…
  • Now all that’s left to do is to catch that emit on the client side and add the message to our messages array.Back in the Chat.js component on the client side add the folloing in the constructor:I will now post how all the files should look like:Chat.jsapp.jsThis function will catch…
  • We already implemented a messages.map functionality so now every time you add a message you should see it in your chat.

In this article I will be creating a chat web app using Express.js, React & Socket.io. I will be using Bootstrap for styling. You will see how the final files should look like in the end. We will now…
Continue reading “Creating a chat web app using Express.js, React.js & Socket.io”

Using JSX with Vue.js – Anthony Gore – Medium

Using JSX with Vue.js  #webdevelopment #javascript #react #vuejs #vue #reactjs

  • Using JSX with Vue.jsLove it or hate it, JSX is a popular extension to JavaScript that allows XML tokens in your scripts.If you want to create templates in your script files and you find Vue’s render() function to be difficult to work with, JSX may be just what you need.To demonstrate, here’s a render function without JSX:And with JSX:If nothing else, it’s much easier to read!Of course, JSX cannot be interpreted by the browser.
  • More on this later.Note: this article was originally posted here on the Vue.js Developers blog on 2017/02/27Why use JSX with Vue?There are many ways to specify a template in Vue:Using an HTML fileUsing a template property in your instance/component constructorUsing template tags in single file componentsUsing a render function.If you go with option 4, you have to create your nodes in a very unfamiliar way i.e. using the createElement JavaScript syntax.JSX allows you use a render function and still have the look and feel of HTML.
  • When you click the span it will trigger an alert.Firstly, let’s use Vue in the normal way with separate JS and HTML files:Incorporating a render functionThe following code does exactly the same thing as the above code, the only difference is that rather than using a template we will use a render function to create our template:Incorporating JSXThe render function is a little hard to read, right?
  • And that’s just for one span, imagine using it for a more complex component!Let’s use JSX now:(index.html same as above)Transpiling JSXJSX is just for development and will be transpiled away long before runtime.
  • Simply add it to your Webpack config:Now, when you do a webpack build, your JSX will be transpiled into standard JS.Get the latest Vue.js articles, tutorials and cool projects in your inbox with the Vue.js Developers Newsletter

If you want to create templates in your script files and you find Vue’s render() function to be difficult to work with, JSX may be just what you need. Of course, JSX cannot be interpreted by the…
Continue reading “Using JSX with Vue.js – Anthony Gore – Medium”