Your Choice JavaScript News

React News Saturday, February 17

React News TLDR / Table of Contents

  • Update to MIT license · facebook/react-native@26684cf
    • react-native – A framework for building native apps with React.
    • software, React Native software, Facebook, copyright notice, -For React Native
  • React Higher-Order Component Patterns in TypeScript
    • Higher-order components (HOCs) in React are a powerful tool for code reuse between components. However, a common complaint of developers using TypeScript is that they are difficult to set types for…
    • props, unwrapped component, HOC, TypeScript, object rest/spread
  • First impressions with Parcel JS – Jhey Tompkins –
    • You may have heard of Parcel already, you may have not. I hadn’t played with it yet so I set the timer for an hour and got under way ⏲Could I set up a few common projects in less than an hour using…
    • bundler, config bundler, new bundler, pretty awesome experience, main bundling features
  • How my friends and I grew our side project into a $17,000/month business
    • In 2014, my friends and I set out to build the best possible web design tools. We built UI kits, Admin Dashboards, Templates, and Plugins. We’ve always tried to create products that are helpful in…
    • Shit Done Kit, products, high quality freebies, Creative Tim, Big Bundle
  • danilowoz/react-content-loader
    • react-content-loader – :white_circle: SVG component to create placeholder loading, like Facebook cards loading.
    • component import, const, const MyFacebookLoader, ,
  • -Facebook, Inc. (Facebook) hereby grants to each recipient of the Software – – -(subject to the termination provision below) license under any Necessary – – -Claims, to make, have made, use, sell, offer to sell, import, and otherwise – – -transfer the Software.
  • For avoidance of doubt, no license is granted under – – -Facebook’s rights in any patent claims that are infringed by (i) modifications – – -to the Software made by you or any third party or (ii) the Software in – – -combination with any software or other technology.
  • -The license granted hereunder will terminate, automatically and without notice, – – -if you (or any of your subsidiaries, corporate affiliates or agents) initiate – – -directly or indirectly, or take a direct financial interest in, any Patent – – -Assertion: (i) against Facebook or any of its subsidiaries or…
  • Notwithstanding the foregoing, if Facebook or any of its – – -infringement against you in the first instance, and you respond by filing a – – -patent infringement counterclaim in that lawsuit against that party that is – – -unrelated to the Software, the license granted hereunder will not terminate…
  • -A Necessary Claim is a claim of a patent owned by Facebook that is – – -A Patent Assertion is any lawsuit or other action alleging direct, indirect, – – -or contributory infringement or inducement to infringe any patent, including a

Tags: software, React Native software, Facebook, copyright notice, -For React Native

  • An example might be a HOC which enforces that styles are set for a component via the style prop, a simple example of this being the following withBlueBackground HOC, which well use throughout this article, and, as the name suggests, ensures the background colour is blue for the wrapped component:Note:…
  • : React.CSSProperties; name: string;}The type variable P is then used to specify the props for the unwrapped component to be passed into the HOC:UnwrappedComponent: is just an alias for React.StatelessComponentP | React.ComponentP, which would allow either a stateless functional component or a class component to be passed into the HOC.Object.assign()…
  • You will also face this same issue if you want to destructure the props using object rest:In terms of usage, the HOC can then be used as if it were a plain JavaScript HOC, with the added bonus that the wrapped component is statically typed:Pattern #2: AddingPropsSome HOCs add props…
  • : React.CSSProperties; name: string;}This will be more useful when additional props are injected, and ones which arent standard React props such as style.As for the HOCs own props (WithBlueBackgroundProps) these are combined with the wrapped components props using a type intersection operator ():class WithBlueBackground extends React.Component P WithBlueBackgroundProps { …}This…
  • To demonstrate this with the withBlueBackground HOC, we will change it to require a component passed in that accepts a backgroundColor prop rather than setting the colour via style:Given we changed HelloProps to extend InjectedBlueBackgroundProps in pattern #2, no changes will need to be made to it, but the Hello…

Tags: props, unwrapped component, HOC, TypeScript, object rest/spread

  • I hadnt played with it yet so I set the timer for an hour and got under way Could I set up a few common projects in less than an hour using the new bundler on the block?For those in camp TL;DR Ive enjoyed my experience with Parcel so far….
  • Hot Module Replacement, Code splitting and the ability to bundle all types of static assets etc.The big selling point of Parcel though is that it offers a zero configuration experience.
  • In most cases, this will be index.html.I want to use Pug for my entry point, thats my markup language of choice.Running Parcel and pointing at that entry point didnt work for me After a quick search online, I found the parcel-plugin-pug package.
  • CSS injection is also there by default React projectsSetting up a React project using Parcel was much the same as setting up our general front end project.
  • But, I likely didnt need an hour to come to the conclusion that its pretty neat If you want to get started quick with a new project and dont want to get bogged down in configuring set up, I recommend Parcel to you.It lives up to everything it claims on…

Tags: bundler, config bundler, new bundler, pretty awesome experience, main bundling features

  • We also thought about different places where we could find web developers who could use our products, and we realized that hackathons were exactly what we needed.Presenting how our tools can help during the HackathonSubsequently we started talking to people that were organizing hackathons to offer them free licenses for…
  • How the business modelworksWe realized that the best business model for Creative Tim was freemium: we create high quality freebies that help web developers build great websites, then release the PRO versions for those freebies, which contain more elements, sections, plugins, and example pages.At this moment, we have 8 premium…
  • The freebies appear everywhere on different communities, blog posts, newsletters, and social websitesand they are driving all of our traffic.Our business model: create high quality freebies that help web developers build great websites, then release the PRO versions for those freebies which contain more elements.
  • Some examples:Paper Kit380 upvotes on RedditMaterial Kit560 upvotes on RedditLight Bootstrap Dashboard Angular210 upvotes on RedditMaterial Kit180 uvpotes on Hacker News (peak position 9 with over 14,000 users coming to our website in 1 day)Material Kit860 upvotes on Product Huntetc you got the idea5.
  • Since the prices for this Big Bundle is $299 (instead of $500) for the personal license and $669 (instead of $2,127) for the developer license, its a good source of revenue and a great deal for the web designers and agencies who are using our products for multiple clients.

Tags: Shit Done Kit, products, high quality freebies, Creative Tim, Big Bundle

    Tags: component import, const, const MyFacebookLoader, ,

    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.