#react native articles

React Top 30 Articles of 2017

Here we have collected 30 Awesome Articles of 2017. Give a plenty of time to read all of the articles you have missed. You will find the experience and techniques shared by React leaders particularly useful.

References:

Our Best Practices for Writing React Components by Scott Domes: https://buff.ly/2CQSeVj

Every time you build a to-do list app, a puppy 🐕dies 😢by Hrishi Mittal: https://buff.ly/2AE6TgT

Setup a React Environment Using webpack and Babel by Joy Warugu: https://buff.ly/2CRzFAv

React Native at Instagram by Instagram Engineering: https://buff.ly/2CUhvOo

How I converted my React app to VanillaJS (and whether or not it was a terrible idea) by David Gilbertson: https://buff.ly/2AF56YH

How to build animated microinteractions in React by Christian Sepulveda: https://medium.freecodecamp.org/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8

Twitter Lite and High Performance React Progressive Web Apps at Scale by Paul Armstrong: https://buff.ly/2AErEsC

Introducing Sizzy —A tool for developing responsive websites crazy-fast by Kitze: https://medium.com/@kitze/introducing-sizzy-a-tool-for-developing-responsive-websites-crazy-fast-39a8c0061992

45% Faster React Functional Components, Now by Philippe Lehoux: https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

Things nobody will tell you about React.js by Gianluca Guarini: https://medium.com/@gianluca.guarini/things-nobody-will-tell-you-about-react-js-3a373c1b03b4

Build your first progressive web app with React by Scott Domes: https://buff.ly/2AFzTVn

Create React App with an Express Backend by Dave Ceddia: https://daveceddia.com/create-react-app-express-backend/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Rearchitecting Airbnb’s Frontend by Adam Neary: https://buff.ly/2AFGY8o

After building my first React Native app, I’m now convinced it’s the future by Taylor Milliman: https://buff.ly/2AErEJ8

How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native by Tim Anglade: https://medium.com/@timanglade/how-hbos-silicon-valley-built-not-hotdog-with-mobile-tensorflow-keras-react-native-ef03260747f3

Creating truly universal React component systems by Max Stoiber: https://buff.ly/2CPXHf6

Understanding Higher Order Components by Tom Coleman: https://medium.freecodecamp.org/understanding-higher-order-components-6ce359d761b

Animating the Virtual DOM by Sarah Drasner at React Europe 2017: https://www.youtube.com/watch?v=W5AdUcJDHo0

Build a Mini Netflix with React in 10 Minutes by Prosper Otemuyiwa: https://scotch.io/tutorials/build-a-mini-netflix-with-react-in-10-minutes?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

A React And Preact Progressive Web App Performance Case Study: Treebo by Addy Osmani: https://buff.ly/2CU60Xu

7 architectural attributes of a reliable React component by Dmitri Pavlutin: https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

What’s New With Server-Side Rendering in React 16 by Sasha Aickin: https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

8 Key React Component Decisions by Cory House: https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594

The 100% correct way to structure a React app (or why there’s no such thing) by David Gilbertson: https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed

How We Built Our React Native App by Siddharth Jain: https://medium.com/engineering-housing/how-we-built-our-react-native-app-3380a33811ac

You might (not) need a Server Side Rendering framework by Adrien Harnay: https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Setup Continuous Integration with React Native by Spencer Carli: https://medium.com/react-native-training/setup-continuous-integration-with-react-native-50ad2f6145f4

React Native meets iPhoneX by Raúl Gómez Acuña: https://blog.callstack.io/react-native-meets-iphonex-a0f5034f7a41

6 Simple ways to speed up your react native app by Atinder Singh: https://codeburst.io/6-simple-ways-to-speed-up-your-react-native-app-d5b775ab3f16

Network layer in React Native by Kureev Alexey: https://medium.com/dailyjs/network-layer-in-react-native-eec841f11861

If you are learning React Native and you want to improve your React Native knowledge. Here is a list of 7 top articles you should read. They will help you learning better and saving your time.

1. React Native Push Notifications with OneSignal

Here’s a tutorial on how to set up push notifications in React Native (both iOS and Android) with OneSignal, a service that provides free push notification delivery for multiple platforms. This is a pretty long tutorial but it’s worth it. Even if you don’t use OneSignal, much of this will apply to you (general configuration). Let’s get to it.

>>> Learn more: Here

2. React Native’s LayoutAnimation is Awesome

“If you are developing with ReactNative and have not tried LayoutAnimation yet, you are missing out. Coming to ReactNative as an iOS developer, I was worried about losing the convenience of CoreAnimation. UIView animations are so nice; set the desired view properties and go. ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast. Enter LayoutAnimation. Don’t let the slim documentation scare you. It’s amazing. For n number of layout changes in your view, one line does it all. Set your state, allow your view to re-render, and LayoutAnimation handles all interpolation for you. For large and complex views, this is POWERFUL.”

>>> Learn more: Here

3. Deep Diving React Native Debugging

If you’re like me, when you saw how easy debugging React Native applications was, you were mind-blown. Setting breakpoints in Google Chrome to control your iOS device seemed like magic and sorcery. But if you’re like me, you also distrust magic in programming. Magic must be understood so that it turns into engineering fact & competence. This article attempts to demystify React Native Debugging so that you understand the technical details behind it.

>>> Learn more: Here

4. Avoiding the Keyboard in React Native

Whether you’re experienced in mobile apps or not, you don’t have to spend much time before you end up putting something behind the keyboard. Just look at that form, hidden away and inaccessible under that keyboard! It’s such an annoying problem, and devs have to solve it often. I used to use a pod to help avoid this, but pods require a bit of wrapping in React Native, as covered in my article a few weeks ago. Some devs keep their forms half-sized, to assure they stay visible at the top of the screen above the fold. Others wrap everything in a scrollview so the user can at least access the lower portion of the form. Let’s create a more elegant solution together.

>>> Learn more: Here

5. Declare Peace with React Native Animations

Animations make your mobile app stand out, look more interactive, and help you increase engagement. Slack would be just another chat app without so many eye candy details. I’ll try to explain how to think about animations, show what are possibilities for animations in React Native, and expose some of my tricks on how to make them reusable all over the app across various components with a different type of interactions.

>>> Learn more: Here

6. React Native – How to bridge a Swift View

Why Swift?

It looks more like JavaScript, it’s nicer to read (aka less brackets), and seemingly easier to write? I don’t know, they say it’s the next big thing.

>>> Learn more: Here

7. Reacting to React Native for native WebRTC apps

It turns out people like their smartphone apps, so that native mobile is pretty important. For WebRTC that usually leads to venturing outside of JavaScript into the world of C++/Swift for iOS and Java for Android. You can try hybrid applications, but many modern web apps applications often use JavaScript frameworks like AngularJS, Backbone.js, Ember.js, or others and those don’t always mesh well with these hybrid app environments.

Can you have it all? Facebook is trying with React which includes the ReactJS framework and React Native for iOS and now Android too. There has been a lot of positive fanfare with this new framework, but will it help WebRTC developers? To find out I asked VoxImplant’s Alexey Aylarov to give us a walkthrough of using React Native for a native iOS app with WebRTC.

>>> Learn more: Here