A Solution To The React className Controversy – Burke Knows Words

  • People can be so cruel.Another one of these very difficult and sensitive topics is the use of className instead of class in React.Introducing Simple React Snippets: class to classNameNearly everyone has heard of the world famous Simple React Snippets for VS Code.
  • The set of React Snippets that is so good, Ryan Florence once said…And now, Simple React Snippets is even better because it has solved one of the most contentious, difficult and time consuming tasks in React.
  • We don’t go to bed when it gets dark because we have ELECTRICITY, and we don’t have to use Find and Replace to change class to className because Simple React Snippets will now do it for you.How It worksSimple React Snippets uses a very complicated and advanced algorithm to find any…
  • This will bring up the “React: class to ClassName” command.
  • It feels kind of like I’m inviting myself into your house.In any event, I’ll continue to work on that portion and once I’ve ironed out the edge cases, this generation might be the last to know the pains of having to change class to className.What a time to be alive!Grab…

The tech community is no stranger to controversy. Just the other week I was faced with an extremely awkward and difficult situation when someone I thought was a close friend (who I won’t name…
Continue reading “A Solution To The React className Controversy – Burke Knows Words”

React Native Fiber — a starter kit focused on animations

  • React Native Fiber — a starter kit focused on animationsFiber is an iOS and Android React Native theme heavily focused on animations.
  • Inspired by Fiber from Framer.I’m a strong believer that premium starter kits written in React Native are the fastest way to bootstrap a new project that works on both iOS and Android.
  • Next, I really wanted to provide a kit that is heavily focused on React Native animations and implemented: Fiber.
  • This new starter kit is the implementation of the Fiber UI kit from Framer.Fiber has been written using es6 and flow annotations for type checking.
  • The visual design can easily be customized and all aspects of the app are implemented: from navigation to data management.

I’m a strong believer that premium starter kits written in React Native are the fastest way to bootstrap a new project that works on both iOS and Android. And I’ve always been looking to implement a…
Continue reading “React Native Fiber — a starter kit focused on animations”

Vue vs React: Battle of the Javascript Frameworks

  • I’ve created two nearly identical sample applications, one in Vue and one in React, if you’d like to give either framework a shot in the context of the samples in this article.
  • The biggest difference is that React popularized a Virtual DOM (we’ll get into this later) and created a new syntax called JSX that allows developers to write HTML in JavaScript.
  • Unlike earlier JavaScript frameworks that had ‘batteries included,’ both React and Vue are fairly barebones with functionality like routing and state management handled by separate frameworks.
  • Both React and Vue are focused solely on the UI layer, and leave functionality such as routing and state handling to companion frameworks.
  • In Vue there’s no need to call a state management function like , as the data parameter on the Vue object acts as the holder for application data.

React vs Vue.js. Are you in the market for a shiny new JavaScript UI framework? Find out the main similarities & differences between these two popular ones.
Continue reading “Vue vs React: Battle of the Javascript Frameworks”

I interviewed @nemshilov about A+ Forms, his new form solution for #reactjs

  • Engineers think of forms as a bucket of input fields that spits out a blob of data which we then retrieve and send to the server.
  • I built A+ forms for the same reason, so my engineers and I don’t have to solve this problem over and over again and can focus on making what we want to develop.
  • Here are the next extensions that I’m planning to build: – – A+ forms have a bunch of standard fields out of the box, but they’re not tied to any particular UI component implementation.
  • Form management in native mobile apps is alien to us web developers.
  • If we re-implement those fields in React Native components, then engineers could have the same developer experience between web and native apps.

If you think about it, a lot of web development has something to do with forms. Every time you capture information, you most likely require a form. It’s one of the basic skills for a front-end developer.
Continue reading “I interviewed @nemshilov about A+ Forms, his new form solution for #reactjs”

React UI Frameworks, Compared – Gather Engineering

React UI Frameworks, Compared  #reactjs #semanticui #antdesign #react #javascript #reactjs

  • Created by Alibaba, Ant Design React includes a great many polished and usable components — probably more than any other React UI library.Ant Design (Date Range Picker)Component Breadth: A+Every component we needed is included.Quality of implementation: AGood-looking components, plenty of options and interoperability.Ease of re-styling: B+Themeable, but not built for overhaul.Typescript support: A+Written…
  • Typescript support: FDoes not appear to have any TypeScript typings.Quality of documentation: BInteractive examples of each component, but nothing else about the framework itself.Project health: B~1.5K Github stars, maintained by open-source contributors.Cost: FreeAn implementation of the popular Semantic UI framework, this library is polished has a lot to offer, but…
  • Type bindings are still in development, but are included for most components.Quality of documentation: A+Interactive examples of each component, clear navigation information on theming, component options, and sample layouts.Project health: B~1.5K Github stars, maintained by open-source contributors.Cost: FreeSencha’s React UI framework is costly each year, but its breadth of components,…
  • Ease of re-styling: A+Clear documentation on theming, four built-in themes (including Material Design and Bootstrap), and support for Sencha Themer.Typescript support: A+Written in TypeScript, with full bindings.Quality of documentation: AExamples of each component, with tons of options explained, but a bit confusing to navigate, and interactive examples are often limited…
  • It appears to simply be a set of wrappers for jQuery version.Kendo UI React (Dropdown)Component Breadth: A-Not as many components as the Angular/jQuery versions, but could be enough for many applications.Quality of implementation: ASeem robust, though the default style isn’t wonderful.Ease of re-styling: A+Clear documentation on theming, four built-in themes…

The open-source community around React is enormous, and we’re constantly seeing new solutions and approaches to solve the problems we have as developers. Looking into React UI libraries, we’ve come a…
Continue reading “React UI Frameworks, Compared – Gather Engineering”

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”

Creating a chat web app using Express.js, React.js & Socket.io

  • Implementing Send Message functionalityLet’s go back to our Client’s Chat.js Component and add the following functionality to our button:Now let’s create this.sendMessage function:in Constructor add the following:Great.
  • You are now sending the message to the server every time you click ‘Send Message’, and then your message input is cleared so you can write another message.
  • All we have to do now is tell the server to emit the message to everyone who’s socket is connected to our server.In app.js on the server side add the following code:What we are doing here is that we are emiting the info we received from the client (author and…
  • Now all that’s left to do is to catch that emit on the client side and add the message to our messages array.Back in the Chat.js component on the client side add the folloing in the constructor:I will now post how all the files should look like:Chat.jsapp.jsThis function will catch…
  • We already implemented a messages.map functionality so now every time you add a message you should see it in your chat.

In this article I will be creating a chat web app using Express.js, React & Socket.io. I will be using Bootstrap for styling. You will see how the final files should look like in the end. We will now…
Continue reading “Creating a chat web app using Express.js, React.js & Socket.io”