This Week In React #7
19 projects and stories — 10 upcoming events!
This Week In React is a weekly publication highlighting interesting projects and active members from the React community.
🌟 A Study Plan To Cure JavaScript Fatigue
Sacha deftly outlines a 5 week plan for understanding the growing complexity in the Javascript community. This is a must read for all skill levels and especially important for those learning front end development.
📝 React.Js Forms — Controlled Components
This story goes in depth into the different types of controlled form components. If you’re looking for higher-level information about form components, check out the official ReactJS form component docs.
🏠 Symfony PHP + ReactJS
This tutorial demonstrates how to integrate React and Symfony PHP.
🖍 Creating Interactive React Components with SVGs
This tutorial will help you quickly grasp how to render SVGs with React.
🐛 Smalldots Modules (smalldots)
Smalldots provides a small list of lightweight React components that may be useful for small projects.
💌 Building a React Chat App: Infinite Scroll (Part 2)
The team at PubNub released part two of their chat app built in React. Part one can be found here.
🚦 Do I Even Need A Routing Library?
This is a question worth asking. Depending on the complexity of your application a routing library may not be necessary.
🎨 Sharing Styles with React and Aphrodite
Aphrodite lets you add styles to your React components. This guide shows you how you can use aphrodite in your project.
🗂 Visualize Your Component Hierarchy (react-component-hierarchy)
This simple CLI tool lets you visualize your component hierarchy.
📱 What I learned from building my first React Native App
Christoph shares lessons learned using React Native to build his mobile fitness app. He outlines several challenges you may encounter.
🗺 Blueprint to Becoming a React Native Developer
Share this story with a friend looking to become a React Native developer.
📑 A Massive Resource Listing React and React Native Examples
Check out this gist on Github.
▲ Build a Universal JavaScript App with Next.js
Prosper at Auth0 released a tutorial for building an app using Next.js.
✅ Lazy Registration With Redux And Sagas
In this story, Gosha explains how to use Redux and Sagas to enable lazy registration, meaning allowing non-signed in users use of your application or website, recording their actions, and only prompting them to login or create an account once they attempt to complete a purchase or other major actions. There are many benefits for allowing anonymous users, but there is added complexity.
🤖 Reactotron v1.3 Adds State Snapshot (reactotron)
Reactotron is a CLI and OS X app for inspecting your React/RN applications. Their newest release adds the ability to clear and restore state snapshots.
👀 A MobX introduction and case study
If you’ve spent any time in the React/RN community you’ll often see people mention MobX when comparing methods for managing state. This story covers what MobX and why you may want to use it in your application.
💅 Styled Components — Production Patterns
A list of benefits for using styled-components in your React/RN project.
🔑 Organizing Redux State Keys
Robin shares his approach for managing Redux state keys.
🔬 How To: Build a JS Stack From Scratch
Jonathan outlines how you can build your own JS stack from scratch. This is targeted at developers that want “to understand everything that’s happening under the hood” of contemporary JS frameworks.
ReelCrafter helps audio professionals share audio reels.
This week we’re interviewing Max Stoiber(@mxbstr) developer of react-boilerplate.
TWIR: First, please tell the community a little bit about yourself. Who are are you and where do you work?
Hey, my name is Max and I come from beautiful Vienna, Austria. I work as the dedicated open source developer at Thinkmill, a full-stack JavaScript agency from Australia. Please note that Austria and Australia are not the same country — no kangaroos in Austria! (you’d be surprised how often this confusion happens)
TWIR: What initially brought you to the React community? How long have you been active?
Max: My mentors during my internship in London at Animade, James and Simon. I had done two months of learning HTML, CSS and basic JavaScript, and was quite proficient in them. (as proficient as somebody can be after two months…). They suggested I try learning this cool new thing called React, and then maybe evaluate Flux to see if they should use it in their next project. So I spent a week or two learning React and Flux, and then built frankenSim [Ed: 😮] which was a huge success.
That was two years ago now, and since then I’ve barely done anything other than eat, sleep and react!
TWIR: To new members of the React community what is react-boilerplate and why did you build it?
Max: react-boilerplate actually came from the same internship, I built it to scratch my own itch! After frankenSim I built sharingbuttons.io and noticed that I spent the same amount of time doing the same exact setup as for frankenSim; so this time I copied the folder structure, added some .keep files and uploaded it to Github! That way, the next time I started a new React project, I would only have to do a git clone.
Since then it’s come a long way. It is now used in production by an unbelievable amount of companies, including a bunch who’s name you’d recognize, for important projects and products. It has evolved beyond just a folder structure, and is now a great setup for anybody who already knows React and wants to skip all the tedious configuration of tools and just get building their app.
If you’re new to the React community, please don’t use it. It’s very complex and overwhelming if you don’t know the tools involved and the tradeoffs they have. While we do have a lot of documentation, it’s not aimed at beginners. Instead, start off with create-react-app, and once you feel comfortable with React and Redux, slowly start stealing some parts of our setup for your own projects!
TWIR: Are you working on anything new or exciting or speaking at any upcoming events that you can talk about?
Yes, I am working on something new and very exciting together with Glen Maddern!
styled-components is a new way to style React applications and component libraries. Contrary to other styles-in-JavaScript methods, we allow you to write actual CSS, augmented with JavaScript. We also enforce best practices in your component system by removing the mapping between styles and components. This means you have to use components as a styling construct, instead of relying on class names, which is an amazing development experience.
We released it at ReactNL a few weeks ago, and it’s seen a massive amount of adoption in production environments already, which is quite humbling. Seeing people use something you made and love for serious projects is always an amazing feeling! I plan to work on it for the rest of the year, and probably even most of next year, to make sure it’s the very best it can be.
TWIR: Finally, are there any new React/RN projects that you’re most excited about or interested in?
Does styled-components count as an answer? 😉
I’m very interested to see where next.js goes. It seems like a well thought out solution to the old server-side rendering problem. If you take a look at the zeit.co homepage, which is built with next.js, the experience of using it is super nice and fast!
Projects mentioned:
- create-react-app — React apps with no build requirements!
- Styled Components — Visual primitives for components
- React Boilerplate — Offline-first React apps
- Next.js — Server-rendered universal apps (blog post announcing Next.js)
- Saturday November 5–6 — Hackathon — Buenos Aires at JPMorgan
- Monday, November 7, 2016 — React Sydney at BlueChilli
- Tuesday, November 8, 2016 — Portland ReactJS at New Relic
- Thursday, November 10, 2016 — React Israel at Klarna
- Thursday, November 10, 2016 — ReactJS Dallas
- Thursday, November 10, 2016 — ReactJS SF Bay Area at Trulia
- Thursday, November 10, 2016 — ReactJS Barcelona at Typeform
- Wednesday, November 16, 2016 — React Native SF at Five Stars
- Wednesday, November 16, 2016 — Phoenix ReactJS — Ryan Florence
- $ Wednesday, November 17, 2016 — ReactJS Spain at Redradix
- Wednesday, November 23, 2016 — React Native Berlin at Fy
Past
- Thursday, November 3, 2016 — React Paris at SFEIR
- October 26–28, 2016 — React Conf — Bratislava, Slovakia
- Wednesday, October 26, 2016 — GraphQL Summit, San Francisco
- Wednesday, October 26, 2016 — React Oslo at Aller
- Wednesday, October 26, 2016 — React Utah at MX
- Wednesday, October 26, 2016 — React Native Berlin at askCharlie
- Tuesday, October 25, 2016 — ReactJS Atlanta at General Assembly
- Tuesday, October 25, 2016 — ReactJS Hamburg at Finanzcheck
- Saturday, October 22, 2016 — ReactJS Bangalore at ClearTax
Do you know about a React event coming up in the next 2 months? community@thisweekinreact.com
This Week in React is a weekly publication that aims to provide interesting videos, links, and interviews to help you quickly catch up on the latest React community developments. Each post shall feature 3+ interesting projects and an interview with someone from the community.
