Boost Your User Experience with Lottie for React Native

Check it out:   #reactsharing #UX #Lottie #reactnative #tuts

  • Boost Your User Experience with Lottie for React NativeThis is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective.What is it all about Lottie?Lottie is a library for mobile devices that offers for the team a…
  • And we can always do GIF animations, right?But, as an experienced React Native and mobile developer, I can claim that none of these choices are able to offer you the same look feel that Lottie can.
  • The performance, all the available resources and the proud feeling your team‘s designers will reach with Lottie is the main reason I’m now writing this post.How to Get Started with Lottie for React Native?Either: npm i –save lottie-react-nativeOr: yarn add lottie-react-nativeAfter this, we need to link Lottie on our RN project:react-native…
  • It’s a simple check mark for use cases when the app has successfully completed a user’s action: like really that animation: it’s simple, self explanatory and it also gives a brief glimpse of what can be done with After Effects for Lottie.
  • Also, on Android devices some animations may freeze or be malformed from the original one.So, try to find a balance between using of Animated API and Lottie.

This is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective. Lottie is a library for mobile…
Continue reading “Boost Your User Experience with Lottie for React Native”

A new Coder Radio is OUT: @wespayne joins @dominucco on FOSS Burnout & the dark side of ope…

  • The Real Benefits of the Virtual DOM in React.js – – What React and the Virtual DOM give us, however, is a simpler way to think about updating the browser.
  • This is where the real benefits — both in performance and productivity — lie in React.

Wes joins Mike to chat FOSS Burnout & the dark side of open source communities, explain why React Native’s license might be more important & more!
Continue reading “A new Coder Radio is OUT: @wespayne joins @dominucco on FOSS Burnout & the dark side of ope…”

How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint

  • This helps us get a feel for what we’re going to need our components to render:
    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    For this application, we’re only going to need two React components, Todo / and TodoList /.

  • js

    import React from ‘react’;

    export function Todo(props) {
    const { todo } = props;
    if(todo.isDone) {
    return strike{todo.text}/strike;
    } else {
    return span{todo.text}/span;
    }
    }

    export function TodoList(props) {
    const { todos } = props;
    return (
    div className=’todo’
    input type=’text’ placeholder=’Add todo’ /
    ul className=’todo__list’
    {todos.map(t = (
    li key={t.id} className=’todo__item’
    Todo todo={t} /
    /li
    ))}
    /ul
    /div
    );
    }

    At this point, we can test these components by creating an index.html file in the project folder and populating it with the following markup.

  • /components’;

    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    render(
    TodoList todos={dummyTodos} /,
    the code with npm run build, then navigate your browser to the index.html file and make sure that it’s working.

  • Our dummy data is a great place to start from, and we can easily translate it into ImmutableJS collections:
    import { List, Map } from ‘immutable’;

    const dummyTodos = List([
    Map({ id: 0, isDone: true, text: ‘make components’ }),
    Map({ id: 1, isDone: false, text: ‘design actions’ }),
    Map({ id: 2, isDone: false, text: ‘implement reducer’ }),
    Map({ id: 3, isDone: false, text: ‘connect components’ })
    ]);

    ImmutableJS maps don’t work in the same way as JavaScript’s objects, so we’ll need to make some slight tweaks to our components.

  • The mapStateToProps function takes the store’s current state as an argument (in our case, a list of todos), then it expects the return value to be an object that describes a mapping from that state to props for our wrapped component:
    function mapStateToProps(state) {
    return { todos: state };
    }

    It might help to visualize this on an instance of the wrapped React component:
    TodoList todos={state} /

    We’ll also need to supply a mapDispatchToProps function, which is passed the store’s dispatch method, so that we can use it to dispatch the actions from our action creators:
    function mapDispatchToProps(dispatch) {
    return {
    addTodo: text = dispatch(addTodo(text)),
    toggleTodo: id

Dan Prince shows how to build a Todo app using React, Redux, and Immutable.js.
Continue reading “How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint”

‘REACT.JS’ — WHERE AND WHY TO USE IT? – Cubet Techno Labs – Medium

‘REACT.JS’ — WHERE AND WHY TO USE IT? @nodejs #NodeJS #webdev #javascript #reactjs @reactjs

  • One such example is when Code Academy adopted Facebook’s library, React JS to write JavaScript UIs , which lead to certain important discussion points regarding how React JS can be put to good use in case of larger and complex applications similar to Code Academy.What is React?Simply put, React is a UI library created at Facebook to cater the development of interactive and reusable UI components.
  • One of the USPs of React is that it can perform both on client side and rendered server side and also can work together.React is intended to make the overall process of building reusable, modular, user interface components intuitive and simple.
  • In place of the traditional approach of writing user interfaces, it treats every UI (User Interface) element as a contained state machine.Why use React for larger applications?React is very a lightweight and simple library which only deals with view layer.
  • You should think over the possible performance issues when you build a web application which has a higher user interaction and view updates.
  • React is expressively more SEO friendly than other JavaScript MVC frameworks since it is based on the virtual DOM.The Bottom LineReact is a powerful, lightweight, battle-tested library to build user interfaces with JavaScript.

The Web has gone far too long since HTML5 first came into the picture and people started observing JavaScript as a language which could be used for building complex apps. Most of the APIs have…
Continue reading “‘REACT.JS’ — WHERE AND WHY TO USE IT? – Cubet Techno Labs – Medium”

Inject Detect Progress Report – East5th – Medium

Inject Detect Progress Report  #saas #react #security #javascript #elixir #reactjs

  • Based on the current state of the system, the processing of a command will either return a list of events representing the changes to the system, or an error.Keep in mind that events don’t actually modify the system in any way (write to a database, etc…).
  • They just return a list of events, side-effect free.Diving into the code, a command is just an Elixir struct.
  • For example, here’s a command to toggle “alerting” on an application in Inject Detect:defmodule do defstruct application_id: nilendThe struct holds all of the information we need to carry out the command.
  • In this case, we just need the application_id of the application in question.Each command implements a Command protocol, which means it defines a handle function.
  • Command.handle takes in the command struct being handled and a “context” map, which in our case holds the currently signed in user.Our handle implementation for the ToggleAlerting command looks like this:defimpl InjectDetect.Command, for: do alias alias alias InjectDetect.State.Application def toggle_alerting(application = %{user_id: user_id}, command, %{user_id: user_id}) do case application.alerting do true – {:ok, command.application_id}]} false – {:ok, command.application_id}]} end end def toggle_alerting(_, _, _) do {:error, %{code: :not_authorized, error: “Not authorized”, message: “Not authorized”}} end def handle(command, context) do | toggle_alerting(command, context) endendIf the current user has permission to toggle alerting on the specified application, we return either a TurnedOffAlerting event, or a TurnedOnAlerting event.Otherwise, we throw an authorization error.

It’s been almost two months since I announced I was working on a security focused SaaS application called Inject Detect. For those that haven’t been following along, Inject Detect is a service…
Continue reading “Inject Detect Progress Report – East5th – Medium”

React Native with MobX — Getting Started – React Native Training – Medium

  • Our App component will have access to the store as props.
  • Let’s create the App component.
  • Now that we have a store created, let’s to into the index file of the app and change the entry point to use the store and add create the navigation.
  • The app will have two main components, one that will allow us to create new lists and one that will allow us to add new items to our list.
  • We will have access to our store methods as props from our store and will be using them to interact with our app state.

Here, we will combine MobX and React Native to create a simple list app. If you’re looking to see how to get started with MobX and React…
Continue reading “React Native with MobX — Getting Started – React Native Training – Medium”

Draft.js

Great talk on using and extending the excellent #reactjs Draft.js editor, at @BostonReactJS.

  • Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
  • Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
  • In Draft.js, everything is customizable – we provide the building blocks so that you have full control over the user interface.
  • ‘s a simple example of a rich text editor built in Draft.js:
  • Rich Text Editor Framework for React

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Continue reading “Draft.js”