Interview of @hrmny_ about Parket, a light state management library inspired by mobx-state-tree #mobx #reactjs

  • I am currently working as a freelance full-stack developer.
  • Parket is a state management library; a well-known example would be Redux.
  • Parket lets you create models with a state, actions, and views; these can later be used by instantiating them and can be nested inside each other.
  • As you can see here, Parket doesn’t care what your action does or instead what it is; it just listens to state changes.
  • It’s always nice to see new approach to state management.


State management is one of those topics that divides opinions. So far we’ve seen a couple of option…
Continue reading “Interview of @hrmny_ about Parket, a light state management library inspired by mobx-state-tree

#mobx #reactjs”

Umbrella: 16.3 and 16.4 releases · Issue #12152 · facebook/react · GitHub

  • Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
  • Already on GitHub?
  • Sign in to your account

react – A declarative, efficient, and flexible JavaScript library for building user interfaces.
Continue reading “Umbrella: 16.3 and 16.4 releases · Issue #12152 · facebook/react · GitHub”

Why do we need to understand the ReactJs life cycle methods?

Why do we need to understand the ReactJs life cycle methods?  #javascript

  • When you build an application in ReactJs you will have to split the UI into reusable components and think about each of them in isolation.When the user interacts with our application in ReactJs, for example, by hovering, pressing a key, clicking… These actions trigger many other events on the UI…
  • So, why is understanding lifecycle methods so important?Let’s imagine that you are building an application in ReactJs, for example, a video player app, like Vimeo, Twitch or Youtube .
  • Now, your user is using the player app on his/her laptop and decides to search for a fun video to watch, found the video, and then selected to watch it.Let’s suppose that the player app is consuming only resources like network data and the battery power.After some time watching videos…
  • When we build an application in ReactJs , we can predict different type of actions by the user, placing some hooks and triggers.These triggers and hooks are available by component lifecycle methods in Reactjs.
  • They will help us to create the most efficient piece of the software as possible.To place correctly the hook methods into the components we need to learn more about the four stages of ReactJs component.The ReactJs component goes through the Four following is a little diagram to demonstrate those phases.InitializationIn…

Components are the core of ReactJs. When you build an application in ReactJs you will have to split the UI into reusable components and think about each of them in isolation. When the user interacts…
Continue reading “Why do we need to understand the ReactJs life cycle methods?”

Ext JS to React: Class Instantiation and Code Style

  • Ext JS components are really just JavaScript functions which allow you to use the keyword: – – This means each class is native JavaScript.
  • Meaning, JSX enables you to outline not only the HTML and React component structure, but also call other JavaScript functions or even execute code statements right from within the JSX body.
  • Here is an example functional React component: – – This code sample highlights one of the major differences between Ext JS and React.
  • JSX is a very common strategy when creating React components.
  • Instead, each component is instantiated by React itself when you include the component class in returned JSX (i.e. in the example above).

React enjoys the benefits of the latest ECMAScript conventions (with some transpiling magic from Babel) along with JSX syntax. In the following sections, we will look at how Ext JS components are instantiated along with how a functional component is used in a React app. We’ll also review common coding styles that differ between the two ecosystems. Just a note before we proceed, this blog post aims to discuss how React components are created and used, but doesn’t wade into the various ways components may be defined initially. We’ll dedicate our next blog post in the series to the topic of defining React components.
Continue reading “Ext JS to React: Class Instantiation and Code Style”

Interview of @matheusml about #redux zero, a light state management solution for #reactjs

  • Redux Zero is a library which offers a simple way to handle state in modern applications.
  • With Redux Zero your component can focus 100% on the UI and just call the actions to update the state: – – Last but not least, plug the whole thing in your index file: – – Redux is great, but in some cases, it’s way too much.
  • With Redux Zero you just have a store and some actions.
  • One of our developers here at Concrete, Miguel Albernaz, was using this gist as a state management solution instead of Redux.
  • Redux Zero is one of the lightest state management solutions I’ve seen so far.

Although using Redux is straight-forward once you understand the approach and its nuances, after a while it gets repetitive. It’s easy to end up with a lot of “boilerplate” code that wires all the logic together. For this reason, multiple solutions addressing the issue have appeared.
Continue reading “Interview of @matheusml about #redux zero, a light state management solution for #reactjs”

Creating React Native apps with Django rest-api

A app developer shares how to create React Native apps using Django

  • In this blog post, I am going to share basic steps for developing a React Native app with Django rest-api.
  • I have been mostly developing native mobile apps But sometimes it seems like time consuming to develop a simple app with same functionalities for both iOS and Android.
  • Finally, we create an api function in views.py which will server requests at /api/list end poin_t_ – – We are ready for creating our React Native app now.
  • You can try out expo APIs here – – In Short, React Native is powerful framework for building iOS and Android apps.
  • Find the full source code of React Native app (PyconLunch) on Github.

This blog post explains about creating a simple React Native app with modern tools and packages.
Continue reading “Creating React Native apps with Django rest-api”

Learn Redux by coding a Mini-Redux – Jakob Lind

Do you think Redux is complicated? Learn Redux by coding your own mini-redux  #reactjs

  • The whole point with Redux is to have one single source of truth for your application state.
  • The state is stored as a plain Javascript object in one place: the Redux Store.
  • When Redux is used with React, it is the React components that get notified when state changes, and can re-render based on new content in the store.
  • We can copy/paste that example to test our own Redux implementation: – – Get the full code to run it on your machine by signing up to my email list below!
  • In the next blogpost, we will code the connect function which binds your Redux store to React components.

There are lots of resources for learning Redux. There is the official documentation, examples, tutorials, blog posts, boilerplates, Youtube videos, podcasts, etc… The list goes on. Even though we have so many great resources to learn from, new developers coming in still sometimes gets confused. It’s an overwhelming amount of content and it can be difficult to filter out the relevant stuff.
Continue reading “Learn Redux by coding a Mini-Redux – Jakob Lind”

Changing Default Splash Screen In React Native

  • I remember when I wanted to add a splash screen to my React Native application, it took me a while to implement the feature.
  • I’ve decided to write a blog post about an easy way to add your customized splash screens to your React Native apps.
  • Follow these steps to create and run your app: – – Here is a screen shot of the default splash screen: – – – – Next, you need to generate your splash screen sizes for different mobile views.
  • Here a few examples of splash screen generator sites you can use: Ape Tools, TiCons.
  • Here are the steps to follow: – – I hope you were able to follow the steps to get your splash screens on your apps.

Step by step tutorial on adding splash screens to your applications.
Continue reading “Changing Default Splash Screen In React Native”

Creating React Native apps with Django rest-api

A app developer shares how to create React Native apps using Django

  • In this blog post, I am going to share basic steps for developing a React Native app with Django rest-api.
  • I have been mostly developing native mobile apps But sometimes it seems like time consuming to develop a simple app with same functionalities for both iOS and Android.
  • Finally, we create an api function in views.py which will server requests at /api/list end poin_t_

    We are ready for creating our React Native app now.

  • You can try out expo APIs here

    In Short, React Native is powerful framework for building iOS and Android apps.

  • Find the full source code of React Native app (PyconLunch) on Github.

This blog post explains about creating a simple React Native app with modern tools and packages.
Continue reading “Creating React Native apps with Django rest-api”

JavaScript Design Patterns – Meryl Dakin – Medium

JavaScript Design Patterns  #softwaredesignpatterns #mvc #react #javascript #reactjs

  • The gif below shows the interaction among these.MVC DemonstrationThe Controller (animalsController) updates the View (animalList)The View (animalForm) delivers User input to the ControllerThe Controller updates the Model (Animal) of changes based on User inputThe Model notifies the Controller of the changes so the Controller can update the View (animalList)MVC ComponentsModel- The model works with the database and API’s to call for and structure the data for the app.
  • It informs the Controller of the current state of the data so the Controller can serve that information to the View.View- The view is the user interface of the app.
  • When the Model gets user data, it can change the state of the app and pass the new state back to the Controller.Controller- The controller is the go-between from Model and View.
  • Component Architecture of ZooBookIn React, the components act like Views on steroids.The Components all represent a rendered piece of the website, but they also do the work of maintaining state and logic (without a state management tool like Redux).
  • — Thinking in React, React.js DocsComponent DemonstrationThe layers we have are performing the following roles:Presentational Components:App: Renders the NavBar and ZooContainerNavBar: Renders links around the site and the site titleZooForm: Renders form for User inputZooList: Renders container for animals to be appended into a listAnimal: Renders each animal in ZooList“Smart” Component (maintains state):ZooContainer: This layer is special.

As a developer with experience in Rails and vanilla JavaScript but new to React.js, the most intimidating shift is going from Model-View-Controller architecture to Component architecture. This post…
Continue reading “JavaScript Design Patterns – Meryl Dakin – Medium”