Your Choice JavaScript News

React News Sunday, February 11

React News TLDR / Table of Contents

  • Managing User Permissions in your React app – DailyJS –
    • In authenticated frontend apps, we often want to change what’s visible to the user depending on his role. For example, a guest user might be able to see a post, but only a registered user or an admin…
    • user permissions, CASL, active user permissions, permission rules,
  • React’s ⚛️ new Context API – DailyJS –
    • It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API! OH, AND IT USES A RENDER PROP! NOTE: This is a cross-post from my newsletter. I publish each email to my blog…
    • Context API, new Context API, , ,
  • Firebase + React Native (Building an Inventory App)
    • If you don’t want to read this and just want to view the code then it can be found here. This walk-thru assumes you know the basics of firebase. Open up your new project in your Text Editor of choice…
    • import React, import { View, config);, export default, little title bar
  • tcodina/todo-app
    • todo-app – Simple ReactJs todo app ✍
    • Google Chrome, latest Safari, Reload, tab, session
  • React Native Newsletter
    • Free occasional summary of React Native news, articles, issues & pull requests, libraries and apps curated by @infinite_frank and @GantLaborde.
    • React Native news, React Native Newsletter, apps, Twitter,

Score: 1050.9558543075148
URL: https://medium.com/@sergiy.stotskiy/managing-user-permissions-in-your-react-app-a93a94ff9b40
Tweeted At: Sat Feb 10 02:52:06 +0000 2018
Publish Date: 2018-02-05T07:03:43.451000+00:00
Author: Sergii Stotskyi

  • It makes managing active user permissions very simply, and allows to rewrite previous example to this:if (ability.can(‘delete’, post)) { button this is the first time you hear about CASL, you may want to read “What is CASL?”
  • The permission rules for this app are:a user can read and create any todo for any usera user can update or delete only todos which are assigned to him (“me” option in dropdown)I’ve used React.js with CASL to make these rules easy to implement and scale upon, in case other…
  • If we didn’t do this, any todo could be updated or deleted by any user, not just the assignee.Checking Permissions in ReactAt first, you may think that integration will be quite easy: just import created ability, addifs around some components in render function and we are done.
  • In our case we need to re-render components when ability rules are changed, because we will need to update permission rules when user does login or logout (or login under another account).
  • It will be possible to utilize updated event in 1.1.1 version of CASL.The only thing which is left is to wrap your UI components in Can checks and that’s it.To play around with your permissions logic, just open Dev Tools and type:ability.update([]) to reset all permissions (i.e., readonly mode);ability.update([{ subject:…

Tags: user permissions, CASL, active user permissions, permission rules,

Score: 662.7886757990867
URL: https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b
Tweeted At: Sun Feb 11 14:55:06 +0000 2018
Publish Date: 2018-02-05T14:01:01.009000+00:00
Author: Kent C. Dodds

  • Here’s the simplest useful example I can come up with:Here’s an even simpler version so you don’t have to open the codesandbox:const ThemeContext = ThemeProvider extends React.Component { state = {theme: ‘light’} render() { return ( ThemeContext.Provider value={this.state.theme} {this.props.children} /ThemeContext.Provider ) }}class App extends React.Component { render() { ThemeProvider ThemeContext.Consumer…
  • The React team will remove the warning about context being an experimental feature because it’s now a “first-class feature” of the framework.
  • But even when we do feel it, we’ll have a solid, core React API to lean on to help us avoid the problem.Practical ContextOne question that I’ve seen a lot about the new context API (or the render prop pattern in general) is how to compose providers and consumers together….
  • Here’s an example:const ThemeContext = ThemeProvider extends React.Component {/* code */}const ThemeConsumer = ThemeContext.Consumerconst LanguageContext = React.createContext(‘en’)class LanguageProvider extends React.Component {/* code */}const LanguageConsumer = AppProviders({children}) { return ( LanguageProvider ThemeProvider {children} /ThemeProvider /LanguageProvider )}function { return ( LanguageConsumer {language = ( ThemeConsumer {theme = children({language, theme})} /ThemeConsumer )} /LanguageConsumer…
  • react-fns: Browser API’s turned into declarative React components and HoC’s by Jared Palmer 👏react-composer: Compose render prop components (what I use in the codesandbox above) by jmeasreact-contextual: Tiny helper around Reacts new context API by Paul HenschelSome tweets from this last week:P.

Tags: Context API, new Context API, , ,

Score: 194.65958174904944
URL: https://medium.com/@keheira/firebase-react-native-building-an-inventory-app-baea00b3d629?source=rss——react_native-5
Tweeted At: Sun Feb 04 00:29:24 +0000 2018
Publish Date: 2018-02-03T22:18:39.056000+00:00
Author: Keheira tha Dev

  • /components/Button’;import * as firebase from ‘firebase’;const config = { apiKey: authDomain: databaseURL: projectId: “inventoryapp-f69f2”, storageBucket: database = firebase.database();export default class App extends Component { /*Setup and state*/ constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) = row1 !
  • == row2 }) }; this.itemsRef = } componentDidMount(){ } componentDidUnMount(){ } render() { return ( View style={styles.container} Header title=”Inventory Simple”/ ListView enableEmptySections={true} style={styles.listview}/ Button title=”Add Item” / /View ) } renderItem(item) { const onPress = () = {}; const onLongPress = () = {}; return( ListItem item={item} onPress={onPress} onLongPress={onLongPress}/ );…
  • S.: run npm install if you get an error.Now that we know this looks pretty decent let’s update our renderItems listenForItems, and addItems method so that we can add random stuff….renderItem(item) { const onPress = () = { Alert.alert( ‘Delete Item’, ‘delete ‘ + item.title + ‘ ?’
  • , [ {text: ‘Cancel’, onPress: () = console.log(‘cancel Pressed’), style: ‘cancel’}, {text: ‘OK’, onPress: () = ], {cancelable: false} )};const onLongPress = () = { AlertIOS.prompt( ‘Edit Item’, ‘current item is ‘ + item.title, [ {text: ‘Cancel’, onPress: () = console.log(‘cancel Pressed’), style: ‘cancel’}, {text: ‘OK’, onPress: (text) = text})},…
  • title, _key: child.key }); }); this.setState({ dataSource: }); });}addItem() { AlertIOS.prompt( ‘Add Item’, null, [ {text: ‘Cancel’, onPress: () = console.log(‘cancel Pressed’), style: ‘cancel’}, {text: ‘OK’, onPress: (text) = this.itemsRef.push({ title: text})}, ], )}…And that’s it!

Tags: import React, import { View, config);, export default, little title bar

Score: 773.275287105927
URL: https://github.com/tcodina/todo-app
Tweeted At: Sat Feb 10 22:01:25 +0000 2018
Publish Date:
Author: tcodina

    Tags: Google Chrome, latest Safari, Reload, tab, session

    Score: 81.15436123348019
    URL: http://reactnative.cc/
    Tweeted At: Sun Feb 11 00:22:29 +0000 2018
    Publish Date:
    Author:

      Tags: React Native news, React Native Newsletter, apps, Twitter,

      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.


      Comments are closed, but trackbacks and pingbacks are open.