Introducing form-for. ReactJS Forms Made Easy – Pedro Silva Moreira – Medium

Introducing form-for. #ReactJS Forms Made Easy

  • Binding componentsAs you can see on the code above, each field has a type set to it; some even have a couple extra properties.Now, we need to tell form-for what components to render.
  • I created a package for bootstrap components that makes your life veeery easy.
  • Building the formNow, let’s put together the User, the bootstrap components and the Form and Field tags.4.
  • The code is very straight forward, just like the one you saw above.And if you want more sandbox examples, I have two others in my profile: MobXFormFor goes really well with MobX.
  • If you don’t like comment too, lemme know how you think it could be

I’ve been coding for a few years and played with a few technologies. In this path, I’ve become a big fan of a Rails gem called simple_form. I’m also a fan of React. With these two in mind, I decided…
Continue reading “Introducing form-for. ReactJS Forms Made Easy – Pedro Silva Moreira – Medium”

MobX (with Decorators) in create-react-app

MobX (with Decorators) in create-react-app  #MobX #ReactJS

  • If you are using create-react-app as your application boilerplate, you most likely run into the questions of how to setup MobX and how to use decorators in create-react-app.
  • After scaffolding your application with create-react-app on the command line, you can install mobx and mobx-react: – – Whereas the former is used as your state management solution, the latter is used to connect the state layer to your React view layer.
  • The current situation is that the maintainers of create-react-app are holding decorators back until Babel supports them in a stable stage: – – But what if you want to use decorators for your create-react-app + MobX application right now?
  • Fortunately there exists one sample project that already demonstrates how to use MobX with decorators in a Next.js application.
  • After showing all these different alternatives, using MobX with or without decorators in a plain React, a create-react-app or Next.js application, you have no excuse anymnore to give MobX as alternative to Redux a shot.

Everything to know about using MobX with and without decorators in a create-react-app with React. MobX doesn’t need necessarily decorators. But you can activate them by ejecting your application …
Continue reading “MobX (with Decorators) in create-react-app”

My brother @djirdehh and I will be giving a talk about building React Native apps with an offline-first pattern ✨

  • • (Optional) – Drinks after the meetup at a local bar We’re open to suggestions on content, format and style so that we’re not wasting your time 🙂

    Our Goal each month is to have a mix of beginner, intermediate and advanced content.

  • Certain months may have a theme and others, we’ll simply try to find interesting talks to share with the group.
  • Food & drinks will be provided at each meetup.

Hey All,
• 6:00 – 6:30pm – Networking
• 6:30 – 8:00pm – Three Lightning talks
• 8:00 – 8:30pm – Networking and other announcements
• (Optional)
Continue reading “My brother @djirdehh and I will be giving a talk about building React Native apps with an offline-first pattern ✨”

Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component hierarchy.No pass-through props, where a component forwards props to its children despite not needing them for its own rendering.Easier to test / re-use / write storybook stories for the dumb components that are only interested in rendering.Dumb components are completely decoupled from Redux, allowing for re-usability if the consumer decides to change state frameworks (to MobX or relay for example).
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”

Let’s React differently – Antonios Liakakis – Medium

Let’s React differently  #react #reactjs

  • Keep your folder structure as flat as possible.The project I am talking about had too many folders and too many components.
  • After that it is very difficult to manage.Do not write verbose code based on what you are seeing in the webI understand that all of us are learning React from the web either following tutorials or examples written from other fellow web developers.
  • If you have a simple app why not use setState?Even if you have a larger project did you checkout MobX?
  • Redux can lead to quite a complex code structure, especially if you add RxJS.
  • Webpack 2 is way easier and simple and with two config files and minimum amount of code you can do wonders.Wrapping upThere is a fine line for a React project therefore please have a look at the following starter project

In a previous article I was more or less explained what happened in a large scale application using React ( However, now after the project…
Continue reading “Let’s React differently – Antonios Liakakis – Medium”

7 tips of using MobX – Huiseoul Engineering

7 tips of using MobX  #javascript #react #mobx #reactjs

  • These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
  • In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
  • MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
  • Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
  • It might be better solution than MobX if you are working with explicitly time-based data among other situations.Redux is a predictable state container for JavaScript appsHappy coding!

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…
Continue reading “7 tips of using MobX – Huiseoul Engineering”

Michel Weststrate’s response to Can someone give an example on how to mimic MobX, just using Vanilla JavaScript?

Is it possible to mimic #MobX using only vanilla #JavaScript?  #frontend #ReactJS

  • Then there would be a function (computed) that you would need to subscribe to the correct event emitters to fire them whenever a value changes.
  • After that, create a nice api around all that, so that the event emitters are hidden inside property getters / setters.
  • Then you just have the raw inefficient basics covered; you would need to make sure after that that no events are fired if the values don’t actually change even if they are recomputed, and that if a computed value depends on another computed value, the event emitters, which are completely unaware of each other, are triggered in the right order 🙂
  • The rough equivalent of MobX without MobX would be to have an event emitter for each object property, array entry etc. that lives in your state.
  • Never miss an answer from Michel Weststrate , when you sign up for Hashnode.

I have begun to learn the flux architecture, reading about which, I have found Mobx, whose idea is good.
But before starting with the lib
Continue reading “Michel Weststrate’s response to Can someone give an example on how to mimic MobX, just using Vanilla JavaScript?”