cassiozen / reactcasts

Source code for ReactCasts

ReactCasts

This repository has code and outlines for ReactCasts.

Full videos at the YouTube Channel: youtube.com/c/reactcasts.

Request A Screencast

I have some ideas for topics to cover, but if you want to see some topics covered in a future screencast, I'd like to hear from you.

Please submit an issue with the request a screencast label and make sure to include a good description on what you want to see!

You can also participate by adding your reactions and contributing to the discussion on suggested topics: https://github.com/cassiozen/ReactCasts/issues/labels/request%20a%20screencast.

Issues With Code, Documentation, etc...

If you see any problems with code, documentation, or anything else in this repository, please submit an issue with the bug label and I'll fix it as soon as I can. Pull requests are also welcome.

reactcasts's Issues

ReactCasts #12 - `NODE_ENV` is "undefined"

I initially hand-coded along with the video, but ended up with errors that I couldn't fix.

Assuming I still had a typo lurking somewhere, I cloned, installed, and tried to run your code directly, only to get the same errors.

Steps to reproduce:

1. git clone [email protected]:cassiozen/ReactCasts.git
2. cd ReactCasts/episode12
3. npm install
4. npm run start-dev

Initial Error that I'm getting if I do the above steps in Atom's platform-ide-terminal:
(Not sure why it makes a difference, but since it does, maybe it's an important clue. And, technically, I did steps 1 & 2 in Terminal, then did an atom ., then did steps 3 & 4 in Atom.)

    ERROR in ./src/browser/index.js
    Module build failed: Error: Using `babel-preset-react-app` requires that yo
u specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "de
velopment", "test", and "production". Instead, received: "undefined". (While pr
ocessing preset:/Users/metasean/dev/ReactCasts/ReactCasts/episode12/node_module
s/babel-preset-react-app/index.js")

Subsequent Error that I'm getting if I do the above steps in Atom's platform-ide-terminal:
AND
Error that I get if I do all of the above steps directly in a normal OS X terminal

/Users/metasean/dev/ReactCasts/ReactCasts/episode12/server.js:71
throw new Error("Module build failed: Error: Using `babel-preset-react-app` req
uires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid v
alues are \"development\",\"test\", and \"production\". Instead, received: \"un
defined\". (While processing preset:\"/Users/metasean/dev/ReactCasts/ReactCasts
/episode12/node_modules/babel-preset-react-app/index.js\")

FWIW: my node --version is v8.1.3

ssr authentication with passport.js

It's possible to pass req.user auth to the client side? or maybe a better choice is save the details in local Storage?

I don't want to use redux in the auth part.

If someone has a good example to auth in react ssr...

Performance Tuning

Possible Outline:

• Review how the reconciliation process works
• Review ShouldComponentUpdate and PureComponent
• Detecting performance bottlenecks with ReactPerf Addon

References:

• https://facebook.github.io/react/docs/perf.html
• Pro React Book, Chapter 7 😜

Redux Middleware API

Redux Middleware is an extension point that let's you insert some code that will get invoked between action dispatching, and the moment it reaches the reducer.

Redux middleware can be used for logging, crash reporting, talking to an asynchronous API, routing, and more.

Ideas for examples:

• Log middleware
• Persist (localstorage) middleware
• Analytics Middleware
• Fetch Middleware

References:

• http://blog.krawaller.se/posts/exploring-redux-middleware/

ES6 + React

There are a lot of cool new capabilities that es6 brings which compliment react nicely, spreading properties via {...props} for example. Other things that might be worth mentioning or exploring:

• decorators
• classes & class methods
• destructuring args
• {...rest} 😁

Using Portals

Sometimes you need to manage components that are outside of the parent and perhaps attached to the body, specifically thinking about modals, popovers, etc. https://github.com/tajo/react-portal is a reasonable implementation of this.

Untangling your Webpack config

Suggested by user luckyleprechaun98 over Reddit (https://www.reddit.com/r/SideProject/comments/58antx/react_casts_weekly_short_videos_with_tips_tricks/)

To be honest, the suggested title was “Unfucking your Webpack config“.

Using Ramda: Functional techniques and solutions in React/Redux screencast

Request a Screencast
Many people use array functions like filter, map, reduce etc.
Also a lot of people (still) use lodash as a utility library.
It would be nice to see your perspective on what Ramda would bring to the table in comparison and what code quality gains could be had by using this library instead.

Immutability

Immutability is a recurrent theme in the React ecosystem: State management libraries like Redux requires that you treat your data as immutable, or things will just not work. But even in plain React, with local component state, we're also encouraged to treat data as immutable.

Talk about immutability in plain Javascript AND/OR using libraries such as Immutable.js

Use Apollo / Relay with GraphQL

Request a Screencast

How to use Apollo / Relay with GraphQL in a React Redux app.

Why not react-router server-side rending plan

Why not react-router server-side rending plan

I like your movies

PropTypes

New React Developers are not using PropTypes, and the fact that it's now a separate package will only make it less and less used.

So, although this probably would not be a not very popular screencast, I think it's important to show what types on a broader sense are, and how one can use at least proptypes in JavaScript (since it has no types) to write better components.

Important topics:

• What are types
• How types can be useful (show example in typescript or reason)
• If you use Redux, you're already using types
• proptypes tutorial

Config setup for development/production

This could be a broad topic, but here is a list of things I had in mind:

• setup a config with dev/staging/prod constants (i.e. API root url, emails, etc)
• setup Webpack to use appropriate config upon each build (based on ENV variable)
• use the config constants in the app
  Bonus: review options for fetching data (fetchAPI, superagent, bluebird, etc)

I specifically looking for a clean way to organize my API layer and upon dev/staging/prod build use appropriate URLs.

Thank you

Server Side Rendering in React

Explaining how server side rendering would work for react and how to configure Server Side Rendering in a React Application.

React Casts #13 - authenticate initialAction request

If the server endpoints are secured and require authentication, the client side can send cookies / JWT to authenticate when they request something, but how would you authenticate a request dispatched when doing the initial render on the server ? (since the request is internal)

Data fetching best practices

It would be cool to see an overview of different solutions, two I recently came across and wanted to play with:

• https://github.com/ericclemmons/react-resolver
• https://github.com/RickWong/react-transmit

Introduction to `styled-components`

Request a Screencast
I've seen a lot of the community talk about styled-components. Can you give an intro to that?

• Article announcing v2 of styled-components
• Library Home Page

Thanks! Looking forward to seeing what you cover on this!

Redux: Flux Standard Action and Redux-Actions

Flux Standard Action is a common pattern for creating actions for Flux-like libraries (Redux Included). They're human friendly and help enable the creation of useful tools and abstractions.

redux-actions is one of such tools. It helps cope with Redux boilerplate in a functional way by providing utility functions to create and handle standard actions.

References:

https://github.com/acdlite/redux-actions (oficial repo)

Feed to follow new casts?

Hi guys,

I really like the ReactCasts episodes, would be nice if there was a feed I can follow to be notified of new episodes.

Ideally some RSS feed or email subscription.
Or at least, if you'd use a proper git release tag for each episode added, I can hook up to that.

Thanks!

Implement social login using Passport in react app powered by React-router.

Implementing social login while using node.js and server side routing is quite easy but implementing it with react-router and safely bypass all the security issues is a mess. Please try to record this cast asap.

Thank you very much.

Creating reusable components

In relation to request #22 "React in Production / Large App Overview", it would be interesting to see how you construct and deploy individual components that are reusable across applications (e.g. npm modules, but could be linked or included in other ways).

Of particular interest, most component tutorials I have seen have not acknowledged potential isomorphic/universal usage.

Financial Charts

I thought this would be good example of React's responsive UI integrated with streaming data feed.

React Native over-the-air updates

Talk about strategies for dynamic updating JavaScript in React Native Applications.

References:

• AeroFS's Auto Updater
• Microsoft's CodePush

Functional Reactive ReactJS

Request a Screencast

A quick intro to RxJS and some use cases where RxJS is preferred instead of the classical async.

Useful link: https://medium.com/@garychambers108/functional-reactive-react-js-b04a8d97a540

Animation in react native

Context - Part 2

Continuation of episode 4.

Should cover:
1 - Use a subscription model for updating context content
2 - Use HOC to make it easier to update a project in case the Context API changes

Code reuse with React native

Suggested by user luckyleprechaun98 over Reddit (https://www.reddit.com/r/SideProject/comments/58antx/react_casts_weekly_short_videos_with_tips_tricks/)

Styling in React (CSS modules vs inline styles solutions)

CSS Modules
Radium
JSX Style

Any other ideas or suggestions here?

Where to put business logic

This article provides some nice arguments for each approach, but I think it'd be nice to have a screencast about it. Thanks!

Discussion: Format to visually explain concepts

Hey Guys, I'm experimenting with different ways of explaining concepts visually.

Because what usually happens while I'm explaining something is that the video is showing a blank editor. This happened in almost all episodes so far.

This is my first try: If you have the time to take a look, I would love to hear your opinion:

(Disclaimer: The actual content I was explaining is not important - I just improvised something to show the new visual)

https://youtu.be/soMI7BAVtLU

(I'm specifically inviting all of you who have contributed so far: @markerikson, @neeldeep, @jpollard-cs, @asifmom, @pawel2105, @czanella, @zsherman, @thelastnode and @aconanlai)

Redux: Best way to architect reducers

Suggested by user luckyleprechaun98 over Reddit (https://www.reddit.com/r/SideProject/comments/58antx/react_casts_weekly_short_videos_with_tips_tricks/)

Recompose Basics

https://github.com/acdlite/recompose is a really nifty library for handling common tasks in react. I think it'd be cool to run through some basics and use-cases.

Undo/Redo in Redux

Hey, could you please make a video about Redux Undo/Redo . Been stuck with it.

Using web socket data feed

Splited #35 in two separate requests.

Original Message
“I thought this would be good example of React's responsive UI integrated with streaming data feed.”

Windowing, scrolling, virtualization

React can be pretty powerful for building performant scrolling experiences and there are a bunch of techniques out there that can help you pull it off.

Redux-saga

Have been digging into redux-saga a bit and it can be a little hard to wrap your mind around at first. I think a screencast on this would be pretty helpful.

React in Production / Large App Overview

Would be cool to see a review of a larger app, tools/libraries used, conventions, etc - could maybe show adding process of adding a new feature to the app.

Flux, Redux & cia.

I'd love to see a ReactCast about Flux, Redux & other ways to organize a big project that uses React. I like Flux & Redux and I understand the motivations behind them, but I'm not 100% sold on any of them.

Also, bug report: in IE9 + Windows Vista, the name of the channel appears as AngularCasts. Please fix.

Drag & Drop

I think it'd be nice to see a demonstration of how to handle this the react way™

Gist in FAQ leads to 404

• Do you want to Request a Screencast or report a bug?
  Bug

• If you're reporting bug, please provide the steps to reproduce.
  Go to https://github.com/cassiozen/ReactCasts/wiki/FAQ click the Gist link about atom's user CSS.
  Should it be linking to https://gist.github.com/cassiozen/d1011664f4afc7a3e5004e65e9b35a8d ?

  • Also, please mention your browser and operating system version.
    Chrome, OSX.

Idiomatic Endless Scroll

Endless scroll is an alternative to click-based pagination system. There are tons of Endless Scroll plugins and tutorials out there, but how about something in idiomatic React?

Code Splitting

React Error Boundaries

This is an awesome new feature of React 16.

Ref: https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html

Tests/Specs

What to test in components exactly?
Which is the better approach?

References:
The Right Way to Test React Components
Approaches to Testing React Components

Less tools and more concepts.

ReactCasts #13: get data by params

how i can pass a id params to requestInitialData(), to get a row by id?

Redux: Working with Derived Data & Selectors

https://github.com/reactjs/reselect provides a convenient way of caching data with redux, some explanation and examples would be nice.

Gatsby

React is awesome if you want to create a Single Page Application. But what if you just need a simple blog, or a landing page? Static site builders are awesome for this, and Gatsby is the most awesome static site builder using React components for pages.

Optimistic Updates in Redux

Big / Complex forms in React

Controlled form components are great for small forms, but what about the really big and complex forms? How to deal with validation? Which are the performance issues (if any)?

Test Driven Development

Possible Outline:

• Shallow intro to 1 or 2 of the main testing frameworks
• Component testing
• Examples of feature/Integration/End-to-end testing (is that a thing in React?)
• Example of plugging tests to existing code

References:

• Facebook test utils
• Rails has feature testing using rspec + capybara