Getting Started with Expo React Native and Styled Components using a Netflix Clone example

  • For me it opens it up in Sublime Text Editor, but since I prefer to use WebStorm, I just manually find where the project was created and open the project using WebStorm.Your initial project structure should look something like this:Lets create the basic outline of this project, I like to structure my project by putting everything in a ‘src’ folder and then splitting it up from there.Create a ‘src’ folder and create a ‘components’ directory with a ‘common’, ‘navigation’, and ‘screens’ subdirectories.
  • I also use this file to store any other common styling attributes such as font sizes, and padding/margin lengths.You will also need to grab some images and put them in your /assets directory or you can use the ones that I picked out in here: grab the Netflix logo icon and put it under assets/icons directory: project directory structure should look something like this:I like to make my imports look clean, so I would recommend that you install the babel plugin `babel-plugin-module-alias`.
  • babelrc file, (located in your root project directory) you will need to add the module-resolver field and since we’re having all our files in the /src directory, you need to set the root to src .
  • babelrc file should look like this:Now lets install react-navigation and styled-components by going into the terminal and navigating to the root project directory, and type in `npm install react-navigation — save“npm install Constants and Dummy DataIn our constants/styles.
  • js like so:In your we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so:Now lets go back to our App.js file, and create a DrawerNavigator with the HomeStackNavigator as it’s initial route in the drawerRouterConfigNow hopefully if everything works, you should be able to load up the iOS simulator and you should see something like this:All the code is has been a really great tool to bootstrap my react native projects and I highly recommend it to anyone that wants to quickly get started with React Native.

In your /src/components/navigation/home-stack-navigator.js , we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so: Now lets go back to our App.js file, and create…
Continue reading “Getting Started with Expo React Native and Styled Components using a Netflix Clone example”

5 Best JavaScript Frameworks

Which #JavaScript framework is the best for you? @Da14_team #ReactJS #AngularJS

  • In the meanwhile, JavaScript web frameworks can become a silver bullet for quick web app development.
  • Angular.js is often referred to as an MVW (Model-View-Whatever) framework and among the top benefits, for startups and mid-sized companies, people name: quick code production, easy testing of any app part and two-way data binding (changes in the backend are immediately reflected on the UI).
  • As for now, it is reasonably called the most used JS framework for SPAs (Single-Page Applications) development and it boasts the largest community of developers.
  • Back in 2015 Ember was called the best javascript framework for web application, leaving behind React and AngularJS.
  • When it comes to quick web development or prototyping, JavaScript frameworks are among the most favorable and 2017 won’t become an exception.

This article originally appeared on DA-14 and has been republished with permission. Find out how to syndicate your content with Upwork.
Continue reading “5 Best JavaScript Frameworks”

The Road to learn React

  • All JavaScript ES6 features I describe on the journey to learn React will transition from ES5 to ES6 in the book.
  • The book does not only teach React, but also all useful JavaScript ES6 features for React.
  • I encourage developers to reach out after they have finished the book and build their first React applications.
  • This book focuses on React as the first building block.
  • It only delivers the view layer, but the React ecosystem is a whole flexible and interchangeable framework.

The Road to learn React is your way to learn ReactJs in 2017 by building a real world application. You will get a foundation before you dive into more advanced topics like Redux, Flow and React Router. It’s a huge tutorial …
Continue reading “The Road to learn React”

CSS Modules with React: The Complete Guide – YoungInnovations’ Blog

CSS Modules with #ReactJS: The Complete Guide

  • css$/, use: [ { loader: ‘style-loader’, }, { loader: ‘css-loader’, options: { sourceMap: true, modules: true, localIdentName: ‘[local]___[hash:base64:5]’ } } ],}]CSS module makes CSS classes local for every component declared within by adding hashes in class names which are unique to each component, thus preventing CSS classes from one component overriding or conflicting with CSS in other components.Here is a simple example:panel.jsimport React from “react”;import style from “.
  • panelBody { padding: 15px;}Here classes panel and panelDefault are specific to Panel component and global class container comes from bootstrap applicable to whole site.An interesting thing to notice while writing multiple classes is that, if were to define class in html structure and do not define that class in CSS file, the genereated HTML will literally have undefined class.
  • panelBody { padding: 15px;}The generated HTML will be:div class=”undefined panelDefault___3JNN6″ div class=”panelBody___3OqQA”A Basic Panel/div/divSharing variables between CSS and JSOne of the things that excites me about CSS modules is ability to export variables from CSS file for use in JS file.
  • And there is a little extra step to get this working.With CSS modules, any CSS file a component is importing is local to the component as we are instructing webpack to map our CSS class names to unique hash based identifiers.A simple approach can be: define all locally scoped CSS along with each component js file and define global CSS in a separate direactory.All the CSS files inside app directory are locally scoped.locally coped css filesAnd CSS files inside styles directory can be global to whole site.To get this approach working, we have to add a simple configuration in our webpack config file.rules: [{ test: /\.
  • :)CSS module does not affect element and attribute selectorsWith CSS modules, class names are locally scoped to component in which it is defined, however, html element and attribute selectors are untouched.panel.jsdiv class=”panelDefault” div class=”panelBody” a color: salmon;}a{ text-decoration: none;}Here, above styles are global and applied across entire project.

In the developer community today, we are seeing new design patterns, libraries and frameworks trying to make front end systems even better. Web components are becoming de-facto in developing front…
Continue reading “CSS Modules with React: The Complete Guide – YoungInnovations’ Blog”

FlexView: the easiest way to use flex with React – buildo blog

FlexView: the easiest way to use #flex with React 

#ReactJS #webdev #developer

  • FlexView: the easiest way to use flex with ReactA powerful React component to create any layout on any browser using the power of flex.The problem: doing complex layouts on browsersImplementing complex layouts in web projects has always been a hassle for developers and designers.
  • The API is complex and there are still many inconsistencies between browsers that force developers to overuse vendor prefixes and literally do magic tricks to achieve the desired layout.For these reasons, we asked ourselves: is there a way to simplify the API and handle any browser inconsistency in a single place?Introducing FlexView: our solution to the problemHere’s a typical CSS snippet using flexbox:.
  • flex-view { // flex display: flexbox; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; // direction webkit-box-flex-direction: row; moz-box-flex-direction: row; ms-flex-direction: row; webkit-flex-direction: row; flex-direction: row; // grow, shrink, basis webkit-box-flex: 1 1 200px; moz-box-flex: 1 1 200px; ms-flex: 1 1 200px; webkit-flex: 1 1 200px; flex: 1 1 200px;}And this is how you do it with FlexView:FlexView grow shrink basis=’200′ /Now that I have your attention let’s dig more into FlexView’s API :)FlexView is first of all a React component, and like any good React component it’s stateless and works exclusively through props:You may have already noticed that FlexView API does not reflect completely the flexbox one.
  • This is also the default for a row/FlexView/FlexViewFlexView hAlignContent=’center’ FlexViewhorizontally column hAlignContent=’right’ FlexViewright aligned (inside a column)/FlexView FlexViewright aligned (stacked below his column vAlignContent=’top’ FlexViewtop aligned!
  • /FlexView/FlexViewAnd of course they can be used together:Horizontal and VerticalFlexView hAlignContent=’center’ vAlignContent=’center’ FlexViewthe center of the is just an introduction to the features of FlexView.

A powerful React component to create any layout on any browser using the power of flex.
Continue reading “FlexView: the easiest way to use flex with React – buildo blog”

React Native and ReactJS – Ahmed Mahmoud – Medium

React Native and ReactJS  #react #frontenddevelopment #webdevelopment #reactjs #reactjs

  • React Native and ReactJSThey’re not quite the sameReact Native is a framework that lets you build mobile apps for different platforms using only javascript, even few contributors customized it to build desktop apps (Mac and Windows).
  • It’s quite similar to ReactJS in a way, however there are some differences between React Native and ReactJS.Is a framework:React Native is a framework, but ReactJS is a JS library.
  • Meaning, for ReactJS you’ll need a bundler like webpack and then you’ll figure out which modules you’ll need for the project, on the other hand, you won’t need any bundler or any other tools to bootstrap your project, only react-native-cli.
  • Doesn’t have HTML:In React Native, you won’t have html elements, you’ll have instead alternative components that work in a similar way, and they map to actual IOS and Android UI components that renders on the app.Because you’re not rendering HTML, you can’t use any ReactJS library that renders HTML, but you most probably will find alternative React Native libraries here.CSS only in JS:In React Native, styling is only done in JS, and it’s not exactly CSS, and it doesn’t always behave like it, nevertheless it looks pretty much like CSS.No CSS Animations:In React Native, you don’t have CSS Animations, the recommended way to animate a component is using Animated API.Developer tools for Code, not for UI:You still can use the same Chrome DevTools to debug your app, also you can use Redux DevTools to inspect the state of your app, but still you can’t inspect the UI with Chrome DevTools, you’ll have to use the platform native inspector (XCode/Android studio).
  • Tools:XCode (for IOS)Andriod Studio (for Andriod)Device (if you don’t want to run the app only on simulators)Here’s a React Native crash course that’ll help you get started really quickly.

React Native is a framework that lets you build mobile apps for different platforms using only javascript, even few contributors customized it to build desktop apps (Mac and Windows). It’s been…
Continue reading “React Native and ReactJS – Ahmed Mahmoud – Medium”

Visualizing transit vehicle locations on a map in real-time

Visualizing transit vehicle locations on a map in real-time:  #ReactJS #JavaScript

  • I could just make requests to the restbus API at and display it on a map.
  • Most browsers block HTTPS websites from requesting insecure resources.Problem #2: I noticed that the public Restbus API went down when I made too many consecutive requests.
  • Running the chrome profiler showed me the following:The component update was taking 359s to update after each API request.
  • I also noticed that network requests take rather long.Let’s see if the restbus API returns any data we do not need.We’re only using a few fields out of this — id, routeId, secsSinceLastReport, lat, lon, and everything else can be ignored.
  • Future improvements to react will have performance optimizations to components declared this way by avoiding unnecessary checks, memory allocations and lifecycle methods.A hack to make functional components faster right now is to call them as functions, as opposed to JSX nodes.const Component = (props) = ( div{props}/div);// Using component in JSX = slowerdiv Component //div// Calling component as a regular function in curly braces = fasterdiv {Component()}/divAlthough I haven’t profiled it yet, there are several blog posts that report a big speedup.

In this blog post I’ll talk about how I built a visualization of Toronto Transit vehicle locations and some of the engineering challenges I ran into. A working demo can be found on my personal…
Continue reading “Visualizing transit vehicle locations on a map in real-time”