Your Choice JavaScript News

React News Thursday, February 8

React News TLDR / Table of Contents

  • facebook/react-native
    • react-native – A framework for building native apps with React.
    • newest Android SDK, Fix broken buck, iOS UI Manager, Update repo docs, JS debugger CORS
  • Introducing reactjs-popup 🎉 — Modals, Tooltips and Menus — All in one
    • Reactjs-popup is a simple and very small (3 kb) react popup component, with multiple use cases. we created reactjs-popup to create a color picker for our project picsrush a new online image editor…
    • npm repository, new online image, Complete component API, Reactjs-popup Component API, popular bundlers
  • $5K Bounties! Urgent Tasks Before KickStarter – React Devs — Steemit
    • Details Utopian.io is looking for 2 or more React Developers to join urgent development streams, necessary ones… by utopian-io
    • StoryFull component, contribution details, inline editing functionalities, urgent development streams, Kickstarter campaign
  • Developing Games with React, Redux, and SVG – Part 1
    • In this series, you will learn how to make React and Redux control a bunch of SVG elements to create a game. The knowledge acquired throughout this series will also allow you to create other types of animations that are orchestrated by React and Redux, not only games.
    • SVG, SVG canvas, following code, svg components, elements
  • Introducing Rekit Studio: a real IDE for React and Redux development
    • We’re very excited to announce the stable release of Rekit Studio, a complete IDE for React, Redux and React Router development! Though it’s maybe new to some of you, it has helped us build…
    • Rekit Studio, project, code, ,
  • Infinite scroll techniques In React –
    • In this tutorial, Ogundipe explains two methods of implementing infinite scroll in React
    • infinite scroll, event listeners, web design technique, React applications, render function
  • Redux-Actions through Example: Part 1 –
    • This series assumes that you are already familiar with both React and Redux; and just maybe have gotten tired of writing boilerplate Redux code. note: If you are interested, I have written a series…
    • return state, export const, export const getCounter, export const incrementCounter, export const decrementCounter
  • necolas/react-native-web
    • react-native-web – React Native for Web
    • Google Chrome, latest Safari, old versions, Reload, Firefox

Score: 2685.3556913995
URL: https://github.com/facebook/react-native/releases/tag/v0.53.0
Tweeted At: Mon Feb 05 17:07:12 +0000 2018
Publish Date:
Author: facebook

  • grabbou released this Jan 10, 2018 · 206 commits to master since this release – – This changelog has been prepared by Ryan Turner (@turnrye) – thank you for your time and making such a detailed changelog – – Welcome to the January 2018 release of React Native.
  • If you would like to help us with the next release changelog, please contact @grabbou – – Below is a list of the remaining, low-level changes that made it into this release of React Native.

Tags: newest Android SDK, Fix broken buck, iOS UI Manager, Update repo docs, JS debugger CORS

Score: 431.85843856195726
URL: https://hackernoon.com/introducing-reactjs-popup-modals-tooltips-and-menus-all-in-one-227de37766fa?gi=eb75686faf94
Tweeted At: Wed Feb 07 17:36:37 +0000 2018
Publish Date: 2018-02-02T23:16:46.774000+00:00
Author: Youssouf El Azizi

  • Introducing reactjs-popup 🎉 — Modals, Tooltips and Menus — All in onereactjs-popup Home page article is about giving you a simple overview of what you can do with reactjs-popup and how to use it effectively.Today, we are excited to announce reactjs-popup 1.0.Reactjs-popup is a simple and very small (3 kb) react popup component, with multiple…
  • How can reactjs-popup help you in your next react project?If you need to create a simple modal, tooltip or a nested menu this component is your best choice to start with.
  • It will work correctly with all popular bundlers.npm install reactjs-popup –save#using yarnyarn add reactjs-popup -SNow you can import the component and start using it :import React from “react”;import Popup from “reactjs-popup”;export default () = ( Popup trigger={button Trigger/button} position=”right center” divPopup content here !!
  • /div /Popup);You can also use it with function as children pattern.import React from “react”;import Popup from “reactjs-popup”;export default () = ( Popup trigger={buttonTrigger/button} position=”top left” {close = ( div Content here a className=”close” onClick={close} times; /a /div )} /Popup);Complete component API : Reactjs-popup Component APIUse Cases 🙌ALL in one demoreactjs-popup demo (Modal,tooltip,Menu)What’s…
  • The next version of reactjs-popup will support creating Simple Toast with full customization,But our big deal is to add Animation API to the component so fell free if you have any ideas 💪.Thanks for reading!

Tags: npm repository, new online image, Complete component API, Reactjs-popup Component API, popular bundlers

Score: 429.2751182108627
URL: https://steemit.com/utopian-io/@utopian-io/usd5k-bounties-urgent-tasks-before-kickstarter-react-devs
Tweeted At: Sat Jan 20 13:49:52 +0000 2018
Publish Date:
Author:

  • In order to be ready for the possible pick in contributions after launching the Kickstarter campaign, Utopian.io is looking to improve the moderation system.
  • Moderators should be able to edit: – – The functionality needs to be integrated in the contribution details, StoryFull component by integrating inline editing functionalities for mods.
  • On every contribution (not task requests) Moderators should fill a short questionnaire, made ad hoc for every contribution category.
  • On every profile of every enabled Moderators, there should be a tab to see which contributions a Moderator has rejected/accepted/pended, sortable by date “since” and “until” and by status are some minor and major bugs affecting the Utopian.io Frontend.
  • Landing join.utopian.io, Login / Logout Procedures, Auth verification on front and API, New sections for TOS, Privacy Policy, Wallet, FAQ.

Tags: StoryFull component, contribution details, inline editing functionalities, urgent development streams, Kickstarter campaign

Score: 188.7689906141939
URL: https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/
Tweeted At: Wed Feb 07 19:29:04 +0000 2018
Publish Date: 2018-02-06T00:00:00+00:00
Author: Bruno Krebs

  • TL;DR: In this series, you will learn how to make React and Redux control a bunch of SVG elements to create a game.
  • You don’t have to have deep knowledge about the JavaScript programming language or how React, Redux, and SVG work to follow this series.
  • The very first thing you will do to create a game with React, Redux, and SVG is to use to bootstrap your project.
  • This file can contain the following source code: – – For now, your reducer will simply initialize the app’s state with a saying that it’s easy to integrate React and Redux.
  • As you will see in this series, creating SVG components with React is quite easy.

Tags: SVG, SVG canvas, following code, svg components, elements

Score: 172.43255252466622
URL: https://medium.com/@nate_wang/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542
Tweeted At: Thu Feb 08 09:38:08 +0000 2018
Publish Date: 2018-02-08T04:06:02.221000+00:00
Author: Nate Wang

  • As an IDE, besides code editing, Rekit Studio provides the capability of code generation, dependency diagram, refactoring, build, unit tests and a meaningful way of code navigation.
  • That’s what makes Rekit Studio different from other code editors like Sublime Text, VS Code.See the quick demoBefore the introduction you may want to see a quick demo video about how to use Rekit Studio to manage Redux actions.From the video we can see with Rekit Studio, all you care about…
  • I introduced the practices in two previous articles:Based on the pattern, Rekit Studio knows which files are components, which are actions, where routing rules are defines and so on.
  • Then the project explorer could show the project structure in a meaningful way like below.Project ExplorerRekit Studio knows feature of those project elements, like which actions are asynchronous (with blue mark ‘A’); which components connect to Redux store (with green mark ‘C’); which components are managed by React Router (with…
  • This will cause our project becomes hard to maintain in a short time.Now with Rekit Studio, you can right click a component or action to move, rename or delete it just like you do with other IDEs like Eclipse for Java, Visual Studio for .Net.

Tags: Rekit Studio, project, code, ,

Score: 159.8055500734831
URL: https://blog.logrocket.com/infinite-scroll-techniques-in-react-adcfd7ff32bd?gi=94d57fa421f7
Tweeted At: Wed Feb 07 10:05:35 +0000 2018
Publish Date: 2018-02-06T15:05:10.457000+00:00
Author: Ogundipe Samuel

  • This determines when the scroll has reached the bottom of the div and then performs actions accordingly.In this tutorial, I will explain two methods of implementing infinite scroll in React:The first method describes implementing everything from the ground upThe second method uses an already available infinite scroll library/componentA basic understanding…
  • The items hold the number of items available to be shown as li tags while the loading state will show when the infinite loader is fetching more items.Next, create a function that renders all items:This function loops through the number of items present and create a li tag showing the…
  • Define the ComponentWillMount method:In the method above, a scroll listener was added to the myscroll ref which references the div being targeted.
  • In your application, you probably want to make a fetch or axios call to your server and then change state.But no matter your use case, the concept remains the same.Here is what the final component should look like:Using an infinite scroll libraryWhile the first method showed how relatively easy it is…
  • Instead, there is hasMoreItems which is used to tell the Infinite scroll component to detach the event listenerAn alteration to the loadMore function, which sets the hasMoreItems state to false once the items his 200ConclusionAnd there you have it, two different methods that allow you to implement infinite scroll in…

Tags: infinite scroll, event listeners, web design technique, React applications, render function

Score: 132.2866263070996
URL: https://codeburst.io/redux-actions-through-example-part-1-f5b2dc71de06?gi=4f5d002cc
Tweeted At: Wed Feb 07 19:13:28 +0000 2018
Publish Date: 2018-02-03T20:08:01.718000+00:00
Author: John Tucker

  • Redux-Actions through Example: Part 1Writing concise Redux code with redux-actions.
  • I applied this optional setup to the supplied examples.We install the necessary dependencies:yarn add prop-typesyarn add reduxyarn add react-reduxnote: Create-react-app itself adds the prop-types package but does not properly add it to package.json.We now write a simple React / Redux application using the duck pattern; i.e., the meat of the…
  • yarn add redux-actionsThe only file that we change is { createAction, handleActions } from ‘redux-actions’;// ACTION CREATORSexport const incrementCounter = const decrementCounter = REDUCERSexport default handleActions({ [incrementCounter](state) { return state + 1; }, [decrementCounter](state) { return state – 1; },}, 0);// SELECTORSexport const getCounter = state = state.counter;Let us break…
  • — Eric Elliot — Composing Software: An IntroductionLikewise we simplify the reducer (with same REDUCERSexport default (state = 0, action) = { switch (action.type) { case COUNTER_INCREMENT: return state + 1; case COUNTER_DECREMENT: return state – 1; default: return state; REDUCERSexport default handleActions({ [incrementCounter](state) { return state + 1; }, [decrementCounter](state) {…
  • Second, the usage of the square brackets is the ES2015 computed property feature (which calls the toString method); mapping the action strings to functions.Next StepsHaving gotten the gist of redux-actions, we implement more common patterns in Redux-Actions through Example: Part 2.

Tags: return state, export const, export const getCounter, export const incrementCounter, export const decrementCounter

Score: 1278.6351429910924
URL: https://github.com/necolas/react-native-web/releases/tag/0.4.0
Tweeted At: Wed Feb 07 00:45:47 +0000 2018
Publish Date:
Author: necolas

    Tags: Google Chrome, latest Safari, old versions, Reload, Firefox

    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.