Your Choice JavaScript News

React News Saturday, February 10

React News TLDR / Table of Contents

  • Development Driven Testing (ReactJS) – Ahsan Naveed –
    • Apparently it is a thing — while constructing UI’s with React we need to have components before we test the expected UI behavior. There is still some TDD involved as you develop components you want…
    • UI behavior, over-all development workflow, static components, minimal user interaction,
  • jamesknelson/mdxc
    • mdxc – Use React Components within Markdown.
    • mdx, export default function, mdxc, mdxc import Content, react
  • React, Redux and JavaScript Architecture
    • Whether you use them or not, React and Redux are important. They have changed the way we think about structuring front-end web applications. They can be very powerful. But they are not magic. JavaScript code does not automatically become better just because it uses React. It is easy to write…
    • state, React, Redux, toggle button, component
  • React Native Authentication in Depth – React Native Training –
    • Over the past year or so, I have been working with many companies around the world as a consultant with React Native Training. By far the number one question was how to properly implement real world…
    • React Native, React Native app, Cognito User Pool, React Native Training, react native project
  • Announcing Let’s React — a new React Native newsletter
    • When I started developing iOS apps, I made sure to subscribe to the best newsletters I could find. Every week, I would get awesome curated content from NatashaTheRobot, Dave Verwer, Indie iOS Focus…
    • React Native, iOS developer friends, React Native Newsletter, React Native aficionados, iOS apps
  • How I Reduced the Size of My React Native App by 86%
    • I borrowed 25$ from my friend to start a Play Store Developer account to put up my first app. I had already created the app, created the assets and published it in the store. Nobody wants to download…
    • app, todo list app, , ,

Score: 543.3823529411765
URL: https://medium.com/@coding.you/development-driven-testing-reactjs-ef1ad419262e
Tweeted At: Fri Feb 09 23:25:00 +0000 2018
Publish Date: 2018-02-09T04:00:19.441000+00:00
Author: Ahsan Naveed

  • Development Driven Testing (ReactJS)Apparently it is a thing — while constructing UI’s with React we need to have components before we test the expected UI behavior.
  • There is still some TDD involved as you develop components you want to make sure that the HOC’s you are developing/engineering works the way you want them to work.
  • The normal workflow of structuring these components will be, to have the site running on localhost:port and thinking the code as you go.
  • If you would like to implement feature x in your web application it would be a good idea to see if there exists a package that can x-ify your app for you.Finally, would like to share the article below: the article above, the most important advice is to construct the…
  • My personal advice extends the advice above i.e. implement static components and then write tests to validate their UI behavior and then do whatever the senior developer says.

Tags: UI behavior, over-all development workflow, static components, minimal user interaction,

Score: 528.4812822562571
URL: https://github.com/jamesknelson/mdxc
Tweeted At: Fri Apr 07 15:54:17 +0000 2017
Publish Date:
Author: jamesknelson

  • MDX is a simpler way to write content for your React applications.
  • While standard Markdown compiles to a string of HTML, MDX compiles directly to JavaScript.
  • If you’re writing a React app, MDX is both easier to use and more flexible than standard Markdown.
  • You can try your hand at MDX using the online demo, or the old fashioned way: – – Other ways to use MDX include: – – For details, jump to the usage section – – Let’s go over some of the basics — we’ll leave out the boilerplate on the…
  • Because an MDX file compiles to a React Component, you’ll need to use React-style attributes like (as opposed to ).

Tags: mdx, export default function, mdxc, mdxc import Content, react

Score: 402.6657289126016
URL: https://jrsinclair.com/articles/2018/react-redux-javascript-architecture/
Tweeted At: Fri Feb 09 09:15:10 +0000 2018
Publish Date: 2018-01-08T00:46:55+00:00
Author: James Sinclair

  • In the code above I’ve used the class, but we could just as easily write something like this: – – So, we’ve stored the state of our button in two places.
  • For a larger project, we want to separate our component’s state from the DOM.
  • Why would we want to do that our component’s state from its DOM representation?
  • In the example above, our toggle button state happens to control two things in the DOM.
  • Still, this code doesn’t store our state in the DOM.

Tags: state, React, Redux, toggle button, component

Score: 378.81029871977245
URL: https://medium.com/react-native-training/react-native-authentication-in-depth-8d8c2e4ad81b?linkId=47925259&sc_campaign=Mobile_Blog&sc_channel=sm&sc_content=sm-dabit3-blog&sc_country=Mobile&sc_geo=GLOBAL&sc_outcome=awareness&sc_publisher=TWITTER&trk=_TWITTER
Tweeted At: Fri Feb 09 16:03:00 +0000 2018
Publish Date: 2018-02-06T15:32:36.146000+00:00
Author: Nader Dabit

  • By far the number one question was how to properly implement real world user authentication.There are many reasons for this, but it really comes down to two major ones in my opinion:Many developers companies are coming into React Native from the web where routing and navigation differ substantially.State management matters…
  • js.Analytics, for receiving the analytics sent from your app.Hosting and Streaming for easily hosting your app in the cloud.If you do not already have the aws-amplify library installed, it will install itFinally, we will enable user sign in by running the following command:awsmobile user-signin enableawsmobile pushHere is a full videowalk…
  • js with the following information:const config = { identityPoolId: ‘Cognito Identity Pool ID’, region: ‘Region’, userPoolId: ‘Cognito User Pool ID’, userPoolWebClientId: ‘Cognito App Client ID’}To see this manual configuration step by step, check out the following video:Implementation of Sign Up with MFANow that the project is set up, we can go…
  • js configuration object in to our App.js file and configure Amplify to work with the configuration:// App.js, below React Native Importsimport Amplify, { Auth } from ‘aws-amplify’import config from we need to create two class methods to handle the sign up process.The user needs to sign up (with username, password,…
  • existing imports commented out Button, TextInput} from ‘react-native’Now, let’s update the UI to have a SignUp Button, a TextInput, and a Confirm User button.Let’s change the render method to return the following:render() { return ( View style={styles.container} Button title=’Sign Up’ / TextInput placeholder=’Input Code’ onChangeText={value = this.onChangeText(value)} style={styles.input} / Button…

Tags: React Native, React Native app, Cognito User Pool, React Native Training, react native project

Score: 150.91347522236342
URL: https://medium.com/@kenzai/announcing-lets-react-a-new-react-native-newsletter-bcd8308e4eb?source=twitterShare-695782484bda-1518226623
Tweeted At: Sat Feb 10 01:37:07 +0000 2018
Publish Date: 2018-02-06T17:43:18.242000+00:00
Author: Kenza Iraki

  • Announcing Let’s React — a new React Native newsletterWhen I started developing iOS apps, I made sure to subscribe to the best newsletters I could find.
  • I would enthusiastically read every email and share the best articles with my iOS developer friends and colleagues.Since starting React Native, I found myself reading these newsletters less and less.
  • I subscribed to the existing React Native Newsletter, and while it did provide me with great content (that I faithfully read every month), I felt like I needed more.
  • This is what inspired me to start a new newsletter focused on React Native.
  • It will be released bi-weekly (aka every other week), and will be curated by me for now, but I am open to other React Native aficionados joining me in this endeavor as co-curators!

Tags: React Native, iOS developer friends, React Native Newsletter, React Native aficionados, iOS apps

Score: 123.58200253485424
URL: https://medium.com/@aswinmohanme/how-i-reduced-the-size-of-my-react-native-app-by-86-27be72bba640?source=rss——react_native-5
Tweeted At: Sat Feb 10 01:04:20 +0000 2018
Publish Date: 2018-02-09T19:05:20.468000+00:00
Author: Aswin Mohan

  • How I Reduced the Size of My React Native App by 86%How and Why You Should Do ItYep that’s how me measure thingsI borrowed 25$ from my friend to start a Play Store Developer account to put up my first app.
  • I had already created the app, created the assets and published it in the store.Nobody wants to download a todo list app that costs 25mb of bandwidth and another 25 MB of storage space.So today I am going to share with you how I reduced the size of Tet from…
  • Each binary weighs around 25 MB regardless of your app.So the first thing I did was to migrate my existing Expo app to React Native.Migrating to React Nativereact-native init a new project with the same nameCopy the source files over from Expo projectInstall all dependencies of the Expo project except Expo…
  • git folder into the new project.Download the signing key of your Android app from Expo using exp fetch:android:keystore and set it upBuild and test your appThis reduces the size to around 7.5 MB, thin but we can go thinner.Reducing size of React Native App (Android)This is what you have been…
  • This reduces the app size by a tad bitSet def = true .

Tags: app, todo list app, , ,

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.