Mark Erikson markerikson

[1:24 PM] mezzopiano: Hi everyone!

I'm building a tree component, and would like to move from a nested representation of the (redux) state to a flat one (in which each node stores the ids of directly nested nodes) because it will make the code simpler (other components access the same data, and even for the tree itself reducers will be simpler because they do not have to traverse the entire structure).

My question is this: This will (I think) require a transformation from the flat to a nested data structure (which I'm worried would break immutability), or individual components (tree nodes) pulling data from the store directly. Which approach would you recommend? Is this a bad idea overall?

Any comments, pointers and suggestions are much appreciated. Thanks a lot!
[1:24 PM] acemarke: @mezzopiano : as it turns out, my own app uses exactly that approach
[1:24 PM] acemarke: each individual tree node is itself connected
[1:25 PM] acemarke: the parent passes in the item's ID as

JSX

[8:52 PM] acemarke: okay. It's important to understand that when you write JSX syntax, like , that gets transformed into normal Javascript
[8:53 PM] acemarke: for example, <MyComponent a={123} b="someString" c={aVariable} /> actually becomes React.createElement(MyComponent, {a : 123, b : "someString", c : aVariable})
[8:53 PM] acemarke: in JSX, angle brackets like <> begin JSX syntax, but curly braces like { } actually escape back to normal Javascript
[8:54 PM] acemarke: for example, I could replace the a prop with, say, <MyComponent a={100 + 20 + 3} />

Computed Properties

8:55 PM] acemarke: so. THAT is an example of a new feature in Javascript ES6
[8:55 PM] acemarke: "computed object properties"

11:02 PM] localjo:: I'm trying to improve my ability to debug a React app. Right now I'm just using console.log all over the place to inspect what's going on and it's slow and tedious. I'd like to take advantage of Chrome Devtools to set breakpoints and step through code, but I'm having trouble because most of the time Devtools is stepping through a bunch of internal React functions and I get completely lost. Is there an easier way to step through just my own code?
[11:08 PM] acemarke: what kinds of stuff are you trying to debug?
[11:08 PM] localjo:: I know Devtools has a blackboxing feature, but the docs for that are outdated.
[11:08 PM] acemarke: in theory, one of the advantages of React is that it should be easy to trace dataflow
[11:09 PM] acemarke: but yeah, my experience is that stepping into React itself is not anything that's going to help
[11:09 PM] localjo:: Hmm, I can't even trace things like what's happening that's preventing a component from re-rendering wh

[7:53 PM] acemarke: webpack-dev-server is a dev server. Not an app server
[7:54 PM] acemarke: it's a compiler process
[7:54 PM] acemarke: more specifically, it's a small Express app that uses the webpack-dev-middleware and webpack-hot-middleware plugins
[7:55 PM] acemarke: it loads a Webpack config, creates a Webpack compiler instance, and passes that to webpack-dev-middleware
[7:55 PM] acemarke: WDM then passes an "in-memory filesystem" to the compiler, compiles your bundle into memory, and starts watching your source files on disk
[7:55 PM] acemarke: when the files change, it recompiles
[7:56 PM] acemarke: when a request for the bundle comes through Express, the middleware checks the request, sees that it matches the bundle name (or other output), and responds to the request with the in-memory file
[7:56 PM] acemarke: if you've got a backend app server, you can set up WDS to proxy other requests to that
[7:56 PM] acemarke: it's also entirely possible to w

[6:34 PM] marekweb: I started using ES6 classes for my React components because ES6 is the new hotness and all that, but I'm realizing that I can't actually name any advantages, and I have to bind methods manually. So why use classes over React.createClass?
[6:34 PM] acemarke: a few reasons
[6:35 PM] acemarke: first, classes are an official part of the language
[6:35 PM] acemarke: second, that means that tooling understands the syntax
[6:35 PM] acemarke: third, createClass is eventually going to be deprecated
[6:36 PM] acemarke: there's various solutions to the method binding issue
[6:36 PM] acemarke: the suggested one is to use the "class properties" syntax, which isn't yet final, but I think may have recently hit stage 3
[6:37 PM] acemarke: ah... no, looks like it's still stage 2. Object spread hit stage 3, that's what I was thinking of
[6:37 PM] acemarke: that said, class properties are well supported in Babel, and used in tools like create-react-app
[

Here's a sample scenario. Let's say we're using a "feature-first" folder structure based in /src, and we're trying to use index.js files to re-export files deeper in the hierarchy as a way of defining a sort of "public API" for a given feature folder. A sample of this might look like:

/features/A/ComponentA.jsx

export default ComponentA = () => (
    <div>Component A</div>
);

/features/A/actions.js

	import {fk, many, Model} from 'redux-orm';

	class Book extends Model {
	static get fields() {
	authors: many('Author', 'books'),
	publisher: fk('Publisher', 'books'),
	}

	static parse(data) {
	/*

	// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
	// My basic render function structure:
	function RenderLogicExample({
	someBoolean, // 1) Destructure values from `props` object
	someList,
	}) {
	// 2) Declare state values
	const [a, setA] = useState(0);
	const [b, setB] = useState(0);

	function createStore(reducer) {
	var state;
	var listeners = []

	function getState() {
	return state
	}

	function subscribe(listener) {
	listeners.push(listener)


	// Reusable utility functions
	function updateObject(oldObject, newValues) {
	// Encapsulate the idea of passing a new object as the first parameter
	// to Object.assign to ensure we correctly copy data instead of mutating
	return Object.assign({}, oldObject, newValues);
	}

	function updateItemInArray(array, itemId, updateItemCallback) {
	const updatedItems = array.map(item => {