Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

☞ 

#Nodejs

  • for me i start at 20$/month is good start and then we can upgrade.Choose a datacenter region: DigitalOcean has many datacenters that mean you can pick one for your project if your visitors almost from NY United States let select New York, so example if i target all visitors from…
  • Your cloud vps is ready to use.Check your email address that you did register in DigitalOcean you shold get an email notify about your VPS IP, root account and password.
  • in this project we need open port 80 for http access, 443 https (ssl) , and port 22 (for ssh login) that is enough.By default Firewall is inactive, you can check it by run command sudo ufw statussudo ufw app listSo let config FW allow those ports bysudo ufw allow ‘Nginx…
  • So Node.js is requiredvisit to see the documentationWe use package management to install, here is command to install Node.js v9curl -sL | sudo -E bash -sudo apt-get install -y nodejsAfter successful Node.js installed we can check the version by typing in command line : node -v and you see see “v9.3.0″Setup…
  • we can change the port to 3001 or 3002, or 8080 … so if you pointed your domain tabvn.com to Degital Ocean cloud vps so this case we can visit the chat app in http://tabvn.com:3000 so we need just see nodejs web app in default port 80 such at http://tabvn.com , that…

I have been using DigitalOcean for me and setup for my customers, so recommend use it for your project just pick vps depend on how big of your project start at 5$ or 10$, 20$, price very flexibility…
Continue reading “Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting”

Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

☞ 

#Nodejs

  • for me i start at 20$/month is good start and then we can upgrade.Choose a datacenter region: DigitalOcean has many datacenters that mean you can pick one for your project if your visitors almost from NY United States let select New York, so example if i target all visitors from…
  • Your cloud vps is ready to use.Check your email address that you did register in DigitalOcean you shold get an email notify about your VPS IP, root account and password.
  • in this project we need open port 80 for http access, 443 https (ssl) , and port 22 (for ssh login) that is enough.By default Firewall is inactive, you can check it by run command sudo ufw statussudo ufw app listSo let config FW allow those ports bysudo ufw allow ‘Nginx…
  • So Node.js is requiredvisit to see the documentationWe use package management to install, here is command to install Node.js v9curl -sL | sudo -E bash -sudo apt-get install -y nodejsAfter successful Node.js installed we can check the version by typing in command line : node -v and you see see “v9.3.0″Setup…
  • we can change the port to 3001 or 3002, or 8080 … so if you pointed your domain tabvn.com to Degital Ocean cloud vps so this case we can visit the chat app in http://tabvn.com:3000 so we need just see nodejs web app in default port 80 such at http://tabvn.com , that…

I have been using DigitalOcean for me and setup for my customers, so recommend use it for your project just pick vps depend on how big of your project start at 5$ or 10$, 20$, price very flexibility…
Continue reading “Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting”

Horizontal scroll animations in React Native – codeburst

  • Horizontal scroll animations in React NativeLink Animated with ScrollView to create a nice navigation UI animation in React NativeWhat we will be buildingRN lets you build a nice and smooth UIWhat you will needReact NativeSimulatorNo third party libraries required :)Creating Screen component with AnimatedFirst, import Animated, Dimensions, ScrollView, StyleSheet, Text, View from “react-native” .
  • Next, create a component that will be treated as a screen or a view.We are using Animated.View here because we are going to animate that wrapper component.That width ofscrollPage style and are important because we are going to interpolate horizontal scrolling values to multiple animation values.
  • In other words, we are going to track where the screen is and animate the screen component based on that value.It’s one of the things that are tricky to explain in words, but it is the key concept to understand for this to work.Basically, we link animations based on the…
  • When the scroll position is at 150, first screen is half way done exiting, and the second screen is half way done entering.Adding animationsSince they are all set up, it is time to write the animations.
  • You would have to write a different inputRange since FlatList removes items that scroll way off screen.I think this is pretty neat UI animation that’s pretty simple to use.

That width ofscrollPage style and transitionAnimation(props.index) are important because we are going to interpolate horizontal scrolling values to multiple animation values. In other words, we are…
Continue reading “Horizontal scroll animations in React Native – codeburst”

React Native: Handling language changes on Android the right way

  • React Native: Handling language changes on Android the right wayOne of the core features of your app is internationalization (aka I18n), right?
  • Internationalization is all about offering your products in such a way that they can be localized for languages and cultures easily.In react native there is a very nice library to handle it: With this library, you can define a list of locales your mobile app supports:I18n.fallbacks = true;I18n.translations = { en, es, pl, fr, it,};Note: Fallback is important for unfinished translations.
  • So if your fallback language is en and you have a key that is not translated (so not defined in another language) it will use the key from the fallback language instead.Using the module is also pretty familiar if you come from the web:I18n.t(‘some_key’)One of the lovely things to handle this on the JavaScript side (I developed pure Android apps) is that you can update your .
  • I found out that when using this library on Android, if we change the system language, the app will not update to the new locale till I reload the JS bundle.
  • That is not the Android default behavior so… Let’s fix it!Solving the reload Android problemLet’s see first what happens on iOS when changing the system language and going back to our app:I speeded up the video a bit…As you can see, everything works as expected, our app and bundle gets restarted when coming back to it and we see the new language in place.

One of the core features of your app is internationalization (aka I18n), right? Internationalization is all about offering your products in such a way that they can be localized for languages and…
Continue reading “React Native: Handling language changes on Android the right way”

Topcoder Getting Started with ReactJS

Getting Started with ReactJS - A blog that is supplemented by a Fun Challenge!

  • ReactJS uses JSX to transpire the HTML element on the web page.
  • React first converts JSX into a JavaScript file that is rendered by the browser, resulting in HTML code.
  • BABEL converts JSX code in JavaScript and takes care of cross-browser compatibility.
  • ReactJS functions are called components.
  • ReactJS gives us power to pass data between components and we do it using props and states.

Have you ever thought of passing your HTML code into JavaScript code? How about displaying HTML elements via JavaScript?
Continue reading “Topcoder Getting Started with ReactJS”

Organizing Large Redux Projects – Collaborne Engineering – Medium

Organizing large #Redux projects:  #ReactJS

  • Now, data handling is no longer buried deep in the UI component files but split out in separated files for action types, reducers, actions, and selectors.Organize by featureInitially we kept the Redux files alongside the UI components, which we organize by feature area (e.g. users-related functionality is in users/ action-types.
  • But the structure has also two major flaws:Redux related functionality is not grouped: The Redux code has to interact across features, e.g. a group has members, which are modeled as users.Data management for UI and for data model is mixed up: The users reducer manages a lookup table byId (i.e. access to the real data) as well as the ID of the currently viewed user.
  • html), which itself only holds the IDs of the members.Match UI components, Redux code, and state shapeTo addressed these two issues, we re-organized the code by UI components vs. Redux and then by data vs. UI:components/ users/ user-ui.
  • html actions.html reducers.html selectors.html reducers.html ui/ users/ action-types.
  • This allows to easily compose the reducers, e.g. the UI reducer brings together the reducers for the users and groups UI:uiReducer = Redux.combineReducers({ users: uiUsersReducer, groups: uiGroupsReducer});Happy coding!Want to learn more about Polymer?

Since we moved to Redux, our data management is finally properly split from our UI components. Now, data handling is no longer buried deep in the UI component files but split out in separated files…
Continue reading “Organizing Large Redux Projects – Collaborne Engineering – Medium”

7 tips of using MobX – Huiseoul Engineering

7 tips of using MobX  #javascript #react #mobx #reactjs

  • These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
  • In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
  • MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
  • Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
  • It might be better solution than MobX if you are working with explicitly time-based data among other situations.Redux is a predictable state container for JavaScript appsHappy coding!

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…
Continue reading “7 tips of using MobX – Huiseoul Engineering”