Your Choice JavaScript News

Geek, iosdev, tech, javascript & much more…

React News Sunday, June 24

React Native at Airbnb: The Technology – Airbnb Engineering & Data Science – Medium

  • We have Android, iOS, React Native, and web versions of every component.
  • We opted to rewrite components instead of wrapping native ones because it was more reliable to make platform-appropriate APIs individually for each platform and reduced the maintenance overhead for Android and iOS engineers who may not know how to properly test changes in React Native.
  • Iteration Speed – While developing in React Native, we were able to reliably use hot reloading to test our changes on Android and iOS in just a second or two.
  • Backed byNative – Because everything in React Native can be bridged by native code, we were ultimately able to build many things we werent sure were possible at the beginning such as: – Shared element transitions: We built a SharedElement component that is backed by native shared element code on…
  • JS/React OpenSource – Because React Native truly runs React and javascript, we were able to leverage the extremely vast array of javascript projects such as redux, reselect, jest, etc.

Tags:

React Native at Airbnb: The Technology – Airbnb Engineering & Data Science – Medium

React.js Frequently Faced Problems – Samer Buna – Medium

  • For example: – class Greeting extends React.Component { – whoIsThis() { – console.dir(this); // this is the caller of whoIsThis – return World; – } render() { – return `Hello ${this.whoIsThis()}`; – } – }ReactDOM.render(Greeting /, mountNode);I used the whoIsThis method inside the render method with this.whoIsThis because inside render,…
  • The console.dir line in whoIsThis will correctly report the component instance because that method was called directly from the render method with an explicit caller (this).
  • You should see the Greeting object in the console when you execute the code above: – – However, when you use the same method in a delayed-execution channel, such as an event handler, the caller will no longer be explicit and the console.dir line will not report the component instance….
  • In the code above, React invokes the whoIsThis method when you click on the string, but it will not give you access to the component instance inside of it.
  • However, the best solution to this method is to enable the ECMAScript class-fields feature (which is still stage-3) through Babel and just use an arrow function for the handlers: – class Greeting extends React.Component { – whoIsThis = () = { – console.dir(this); – } render() { – return (…

Tags:

React.js Frequently Faced Problems – Samer Buna – Medium

⚛ The React State Museum – Hacker Noon

  • The Code: React | React dare say at the time of this writing Redux is the most popular state management tool, and therefore the most attacked.
  • If youre unfamiliar with Redux, its a functional approach to state management that provides time-travel and clean state management in a form like a reducer function.
  • The Code: React | React is one of the EASIEST state managers to get started with.
  • Im not sure how well it scales or handles middleware etc. but if youre a beginner to state management MobX and Unstated are the simplest tools to get up and running!
  • Apollo GraphQL + AppSync is a great way to manage your state, AND handle offline, AND handle fetching API, AND handle setting up a GraphQL server.

Tags:

⚛ The React State Museum – Hacker Noon

Tutorial: Intro to React – React

Tags:

Tutorial: Intro to React – React

8 Things You Should Do Before Going Live with React Native

Tags:

8 Things You Should Do Before Going Live with React Native

5 common practices that you can stop doing in React

Tags:

5 common practices that you can stop doing in React

What’s New in ES2018 — SitePoint

  • ES2017 – – ES2017 provided a larger range of new features: – – Async functions for a clearer Promise syntax – – Object.values() to extract an array of values from an object containing namevalue pairs – – Object.entries(), which returns an array of sub-arrays containing the names and values in…
  • For example, Math.max() returns the highest value, given any number of arguments: – – const values = [99, 100, -1, 48, 16]; – console.log( Math.max(…values) ); // 100 – – ES2018 enables similar rest/spread functionality for object destructuring as well as arrays.
  • A basic example: – – const myObject = { – a: 1, – b: 2, – c: 3 – }; – – const { a, …x } = myObject; – // a = 1 – // x = { b: 2, c: 3 } – – Or you can use…
  • For example, to parse a date in YYYY-MM-DD format: – – const – reDate = match = reDate.exec(‘2018-04-30’), – year = match[1], // 2018 – month = match[2], // 04 – day = match[3]; // 30 – – Its difficult to read, and changing the regular expression is also likely…
  • For example, convert a date to US MM-DD-YYYY format: – – const – reDate = d = ‘2018-04-30’, – usDate = d.replace(reDate, ‘$month-$day-$year’); – – Regular Expression lookbehind Assertions – – JavaScript currently supports lookahead assertions inside a regular expression.

Tags:

What’s New in ES2018 — SitePoint

Best TypeScript tutorials, books & course 2018 – ReactDOM

  • This book covers everything you need to consider while building and running a TypeScript application.
  • TypeScript Essentials is a book that will teach you the essentials and basic building blocks of TypeScript very easily, allowing you to make your own complex TypeScript applications.
  • This book is a step by step guide that takes you from the basics building blocks of TypeScript and gives you everything you need to make a fully featured TypeScript application.
  • The book takes a test driven development(using Jasmine and Selenium)approach to building scale-able and modular TypeScript applications.
  • This book shows you how to leverage your exisiting knowledge of JavaScript and modern JavaScript frameworks to build epic TypeScript applications that are high performance server-side applications.

Tags:

Best TypeScript tutorials, books & course 2018 – ReactDOM

Creating Gauge Charts With The JustGage JavaScript Library

  • See the Pen JustGage Chart Static Demo by Danny Englishby (@DanEnglishby) on CodePen.0 – – Some notes on the options that are used in the above examples script.
  • Using the above snippets, you can see what it will look like in the Pen below – – See the Pen JustGage Charts With Pointers Static Demo by Danny Englishby (@DanEnglishby) on CodePen.0 – – From the Pen displayed here, you can instantly see how dynamic and adjustable these charts…
  • Heres the CodePen so you can see it in action – – See the Pen JustGage Donut Charts With Pointers Static Demo by Danny Englishby (@DanEnglishby) on CodePen.0 – – Now, lets have some real fun, let us dynamically change the values of the gauges and watch them glide up…
  • Using the previous example snippets, we can add the following JavaScript – – The above additional script will set an interval every five seconds and refresh each chart on the page.
  • See the Pen JustGage Donut Charts Updating Values Demo by Danny Englishby (@DanEnglishby) on CodePen.0 – – I hope this article has got you excited with thoughts going through your mind of what you can do with them!

Tags:

Creating Gauge Charts With The JustGage JavaScript Library | Code Wall

Learn how to handle authentication with Node using Passport.js

Tags:

Learn how to handle authentication with Node using Passport.js

Top React Courses

Modern React with Redux (86,762 students enrolled)

By Stephen Grider
  • Build amazing single page applications with React JS and Redux
  • Master fundamental concepts behind structuring Redux applications
  • Realize the power of building composable components
  • Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
  • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

Learn more.


The Complete React Native and Redux Course (53,888 students enrolled)

By Stephen Grider
  • Create real-world native apps using React Native
  • Make truly reusable components that look great
  • Understand the terminology and concepts of Redux
  • Prototype and deploy your own applications to the Apple and Google Play Stores
  • Get up to speed with React design principles and methodologies
  • Discover mobile design patterns used by experienced engineers

Learn more.


Advanced React and Redux (35,016 students enrolled)

By Stephen Grider
  • Build a scaleable API with authentication using Express, Mongo, and Passport
  • Learn the differences between cookie-based and token-based authentication
  • Figure out what a Higher Order Component and how to use it to write dramatically less code
  • Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
  • Set up your own testing environment with Mocha and Chai
  • Realize the power of building composable components

Learn more.


React Redux React-Router: From Beginner to Paid Professional (11,715 students enrolled)

By Leonardo Daniel
  • Building your amazing web applications with React JS and Redux
  • Getting a high-paying job as a front-end developer
  • Getting experience through doing many exercises. Re-enforcing your knowledge of ES6, advanced JavaScript, Redux, React through attempting a lot of quizzes. Practice makes perfect.
  • Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.

Learn more.


React Native: Advanced Concepts (16,058 students enrolled)

By Stephen Grider
  • Make compelling applications using expert-level features of React Native
  • Create amazingly smooth and performant animations
  • Build new React Native apps with Expo
  • Understand the latest Navigation options for new React Native apps
  • Add logic to your Firebase backend with Google Cloud Functions
  • Update your users with cross platform Push Notifications
  • Handle your users going offline with Redux Persist

Learn more.


React JS and Redux - Mastering Web Apps (54,299 students enrolled)

By David Katz
  • Develop entire React JS and Redux applications from scratch.
  • Build applications that deal with APIs and web requests.
  • Discuss ES6 and advanced JavaScript.
  • Create web apps with full authentication, and real-time database.

Learn more.


React basic in just 1 hour (22,331 students enrolled)

By Leo Trieu
  • Taste of how to build your very first React component.
  • How to handle event in components.
  • Understand two key concepts of React: State and Props.
  • How to reuse and nest components.
  • How to transfer data between Parent, Child components.
  • How to work with Array, Form

Learn more.


Meteor and React for Realtime Apps (7,889 students enrolled)

By Stephen Grider
  • Create interactive web apps amazingly fast
  • Build amazing single page applications with Meteor and React JS
  • Master fundamental concepts behind structuring Meteor applications
  • Learn the true purpose of Meteor in a modern application
  • Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
  • Build and prototype interesting personal projects in a weekend

Learn more.


GraphQL with React: The Complete Developers Guide (14,683 students enrolled)

By Stephen Grider
  • Build amazing single page applications with React JS and GraphQL
  • Master fundamental concepts behind structuring GraphQL servers
  • Realize the power of building flexible data schemas
  • Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well
  • Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay

Learn more.


Essentials in JavaScript ES6 - A Fun and Clear Introduction (40,155 students enrolled)

By David Katz
  • Create ES6 applications from the ground up.
  • Use the terminal/command-line application and a code editor to code.
  • Look at ES6 code and understand keyword and concepts.
  • Create live development servers with Webpack.

Learn more.


The Full JavaScript & ES6 Tutorial - (including ES7 & React) (55,808 students enrolled)

By David Katz
  • Code in JavaScript like a pro.
  • Code in es6 comfortably, using all the new features.
  • Build es6 projects from the ground up using tools like webpack and babel.
  • Create a basic ReactJS application from scratch.

Learn more.