background preloader


Facebook Twitter

A journey into Reactive User Interfaces 101. A journey into Reactive User Interfaces 101 Okay. Before we start, let’s identify who this post is for by sending out a quick spec: By the product spec, whenever a user has a role of “Administrator” their profile picture must be outlined in a blue color. If the user has a different role, remove that outline and add this blue color. If the user doesn’t have a role, return their outline to the normal gray color. Now as programmers, when we hear product specs like this we immediately start thinking of the WHO, WHAT, and HOW surrounding this. I’m more concerned with the HOW. If your first inclination was to use jQuery to find the user profile on the DOM, check if it had a class, remove said class and add a new class…this post is for you. Now, don’t get me wrong. What is a Reactive User Interface? Reactive User Interfaces are a declarative way of expressing your app’s visual representation of DATA. Okay, let’s implement the spec We’ll be using React and MeteorJS to do this.

Container Component. A production-ready realtime SaaS with webpack. A production-ready realtime SaaS with webpack I’m a huge fan of Meteor. It socketizes everything, transpiles your styles, and gives you a big chunk of code to push to a server. Sometimes though, you need something more flexible. Like any standard Saas, I needed a small landing page I could serve from a CDN, a portal that offered a realtime websocket experience, and an easy path to scale both vertically and horizontally. The end result is something I call Meatier, which I open sourced on github: The package solves a lot of problems (JWT authentication & authorization, scaling sockets, using redux as a client-side cache, storing socket state in redux, optimistic & realtime database updates, etc.) but for this entry, I decided to focus on webpack.

For this project, I used webpack 2 (beta). Building a production webpack config I’ll assume you already have a development config built. Using your router to chunk your site Great. Const assets = require('../.. A Reusable State Container with Meteor & React. A Reusable State Container with Meteor & React Today I’m going to show off a little component you can make to serve as a nice state container. We’ll mix the reactivity of Meteor and the components of React to build a predictable user interface. What are container components? A container does data fetching and then renders its corresponding sub-component. That’s it. The Goal Our goal here is to wrap some presentational components with a state container to serve props and render user interfaces Step 1 — Build the Container Component First we need to build our Container Component reactMixin(StateContainer.prototype, ReactMeteorData); We’ve created a container that takes a function to return a subscription as props, as well as a cursor to fetch data when subscriptions are ready.

Step 2 — Put the container on the page const PageComponent = class PageComponent extends React.Component { constructor() { super(); } Step 3 — Lets set up our props <StateContainer getSubscription={exampleSubscription} Great! Building a Blog with React | The Meteor Chef. What we're going to learn In this recipe, we'll work with HD Buff, a curated video streaming service to create a blog for their website using React. We'll see how to create a simple admin area, retrieve posts, and even handle things like Markdown directly from our React components! Pre-Written Code Heads up: this recipe relies on some code that has been pre-written for you, available in the recipe’s repository on GitHub.

During this recipe, our focus will only be on implementing a simple blog using React. Additional Packages This recipe relies on several other packages that come as part of Base, the boilerplate kit used here on The Meteor Chef. Prep Time: ~2-3 hoursDifficulty: AdvancedAdditional knowledge required: basic usage of React, understanding props and state in React, and using Flow Router with React. What are we building? HD Buff is a curated video streaming service (like In this recipe, we’ll be helping the HD Buff crew to build a simple blog using Meteor and React. Building Multi-Platform Native Apps with Meteor - Tom Goldenberg. Building Your Second React.js App — Learning New Stuff. Building Your Second React.js App Getting into more advanced features This is the second post in a series of tutorials on React.js.

The first one took you through building a very simple profile page with the popular Javascript library: This time we’ll introduce some more basic concepts: StateEvent handlersComponent life cyclesReact & API’s Looking at the project You’ll build an app which searches the iTunes API based on user inputs and displays the results on the page. If we break the UI into components it’ll look something like this: The red component App is the main wrapper for all the other components.

The Results component also has its own children called ResultItem (yellow). We can also visualize the component structure like this: --App-----SearchBox-----Results-------ResultItem Step 1: Download the template You’ll find the template for the app at this GitHub repo, in the index.html file. This is how it looks: Step 2: Adding State Step 3: Add Ajax Step 4: Passing the results down as props Great.

Click to Edit Fields in React | The Meteor Chef. What we're going to learn In this snippet, we'll learn how to implement a click-to-edit interface for items in a list using React. We'll see how to handle conditional rendering of input fields for editing, as well as how to make changes when a single field changes as well as when all fields change. When our application deals with long lists of data, managing the process of editing that data can be a pain, both for us and our users.

In some cases, the data in our lists is tabular, meaning our data more or less mimics tables or fields in our database. In our interface, if we want to edit this data we generally have to add a modal or redirect users to a new page to make changes which isn’t the best experience. Fortunately, we have another option: inline editing. Just getting started? If you’re just getting started with React, take a look at this recipe and this snippet before continuing with this snippet.

Installation Creating an Index component /client/components/index.jsx Simple! That’s it? Dynamic Fields Using Data in React | The Meteor Chef. What we're going to learn In this snippet, we're going to learn how to leverage reactive data in Meteor to generate DOM elements in Meteor. We'll learn about wiring up a set of React components to our database, allowing us to easily generate new DOM elements by storing placeholder data.

Forms are tricky. When we have a form with a static set of fields, all we really need to do is write our markup (or use a package) and be done with it. But what about dynamic form fields? These are fields that don’t exist now but the user can add later. There are several solutions to this problem. To demonstrate this, we’re going to build a simple invoicing app. To get started, we’re going to need to set up a few things. Set up The first thing we need to do is install a few packages. Terminal meteor add react This is the core React package offered by the Meteor Development Group. meteor add kadira:flow-router meteor add kadira:react-layout React Layout will help us to actually render our React components. Okay! Dynamic Fields Using Data in React | The Meteor Chef.

Getting Started with Meteor, React, and React Router. React.js and Meteor.js are great technologies for creating apps for the modern web. A recently announced feature with Meteor 1.2 is official React support. This means developers can now use React for handling client views without even needing to use Blaze or template files. I have spent a lot of time in the past few weeks learning React and using it in Meteor. Adding additional libraries for React can be troublesome if you aren't familar with the Meteor stack. In this post, I'm going to walk through how to create a Meteor app that uses React and React Router(a popular React routing library).

Additionally, you can view the code on Github. Step 1: Create Your App and Add React In your terminal run the following command: meteor create meteor-react-demo Change your directory to the app. cd meteor-react-demo Now that there's an official Meteor-React package, add it to your app. meteor add react Finally, move all of your code into folder called client/. Step 2: Add React-Router Node Package. How we Redux — Part 1 (Introduction) — Modern User Interfaces.

How we Redux — Part 1 (Introduction) For anyone new to React, Flux and other buzzwords, today I wanted to explain how we implement Redux, a certain flavor of Flux architecture, in MeteorJS. Over the past few weeks, the Meteor community has seen a surge of developers replacing the previous view layer, Blaze, which was predominantly “reactive” templating to React, JSX, and all the trinkets the React community has provided. If you want some insight into Templating vs. JSX, you can read my blog post introducing the change to JSX here. This blog post will be a series, this post being an introduction to high level concepts of Redux. Enter Redux If you want some more info on Redux, check this blog post by Dan Abramov here. One thing you’ll notice about Redux immediately is the “single state atom”. Interacting with your state this way allows your code to be more straightforward and can introduce some really cool concepts like time-travel debugging and reproducible error-reporting.

UI State. Meteor + React: Hello World. React for Meteor Developers. What is React? React is a JavaScript library built by a group of engineers at Facebook and Instagram. It describes itself as a "JavaScript library for building user interfaces". Whereas other JavaScript libraries like Angular and Ember contain features related to data fetching, data modeling, controllers, etc - React is only concerned with the "view" of your application. Does React Replace Meteor? Nope! Advantages over Blaze So if Meteor already has Blaze, why would you want to use React? Battle Tested React was developed out of the real-world experiences of the engineers at two of the world's largest consumer web applications: Facebook and Instagram. Predictable Anyone who has used Meteor for any amount of time has probably found themselves struggling to wrangle multiple "reactive" data sources. Focused React encourages you to write small, reusable components with a single focus.

Scalable Opinionated React Lessons Learned 1. Parents talk down to children, because children are dumb 2. React Native. Siphon | Build and publish React Native apps without installing Xcode. Spencer Dixon - Test Driven React Tutorial. Testing is an important part of the development cycle. There is a name for code without tests: legacy code.

When I first started learning React and JavaScript it was overwhelming to say the least. If you're new to the JS/React community you're probably feeling super overwhelmed as well. Thinking things like: Which build tool should I use? That's why I decided to write this post. All the code for this tutorial is available on my github located here. Let's get started! Setting Up Webpack This isn't a tutorial on how to use webpack so I won't go into great detail but it's important to understand the basics. It's an extremely powerful tool which is why we'll be using it. We often don't like things we're not good at or scared of. Here are some more resources to learn more about webpack if interested: NOTE: I recommend using node v5.1.0 if you're going to follow along with this tutorial.

First, lets install all webpack and babel dependencies. Npm i is an alias for npm install. Paste in the presets: