608 Matching Annotations
  1. Last 7 days
  2. Jul 2020
    1. "Lifting State Up" is legitimately the answer to the state management problem in React and it's a rock solid one.

      lifting state up

    2. state more logically separated and located in the react tree closer to where it matters.

      State located closer to where it matters

    3. Sure you can hook up different reducers to manage different parts of your application, but the indirection of going through all these action creators and reducers is not optimal.

      On indirection through multiple action creators and reducers for managing different parts of an application

    4. consistently see developers putting all of their state into redux. Not just global application state, but local state as well. This leads to a lot of problems

      global vs local state management. Solutions are not one size fits all.

    5. One of the reasons redux was so successful was the fact that react-redux solved the prop drilling problem. The fact that you could share data across different parts of your tree by simply passing your component into some magical connect function was wonderful.

      Reasons why redux was so successful

    1. If you have an object of properties, you can 'spread' them on to a component instead of specifying each one: <Info {...pkg}/>
    1. Take the case of the <input> element in this component — we could add an on:input event handler that sets the value of name to event.target.value, but it's a bit... boilerplatey
    1. It’s like skipping a level. For instance: instead of having to pass, say, a “user” to a Layout and have the Layout pass the “user” to the NavBar, you can create a NavBar (with the user already set) and pass the whole thing into Layout. This can help avoid the “prop drilling” problem where you’ve gotta thread a prop down through multiple layers.
    1. One problem—not a fatal one, but still an issue with any virtual DOM—is that embedding SVGs directly into your app can be a resource hog. No matter how much you compress, no matter how logical and streamlined your components, if you need to load up hundreds of very-complex SVGs, React will need to track all of their nodes, and updating them becomes a chore.
    1. Applications built with just React usually have a single root DOM node
    2. Elements are what components are “made of”,
    3. a syntax extension to JavaScript
    1. We all are familiar; nowadays, mobile and mobile applications are more predominant than ever. This extensive popularity has been gained with the fact that smartphones have become much cheaper and faster.
  3. Jun 2020
    1. I was just expressing that, even thought I like React, I dread having to still manually handle everything, instead of just using a directive, a la Vue.JS. This is what I consider boilerplate. Hence my comment on how I could leave React for Svelte just because of that. Clearly a Svelte side-by-side code comparison shows a much cleaner code for Svelte.
    2. Man, just because it gets rid of SO MUCH boilerplate I want to switch already.It kills me everytime I work with forms in React. So much noise for such a simple task.
    1. Note that when you use &::before with content, you need to add quotes to the value of content, otherwise the text does not get applied correctly.

      &:hover{ background-color: ${props => lighten(0.7,themesMap.get(props.theme)!.secondaryColor)}; } &:before{ content: 'before'; }

    1. useCallback returns a memoized callback.

      useCallbak 可以直接看成回调函数,只是他是 memoized 过的

    1. const httpLink = new HttpLink({ uri: 'https://instagram-clone-3.herokuapp.com/v1/graphql' }); const authLink = setContext((_, { headers }) => { const token = accessToken; if (token) { return { headers: { ...headers, authorization: `Bearer ${token}` } }; } else { return { headers: { ...headers } }; } }); const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache() });

      concat two link

  4. May 2020
    1. const Hello: React.FC<Props> = ({ who }) => (  <p>Hello, {who}</p>);

      最简单的 FC props定义方式

    1. React Static is also a great replacement for the ever popular Create React App CLI. It provides a similar developer experience, zero-config environment, and features, but without boxing you in. If you ever need to customize your build system in React Static, there is no need to eject!
  5. redux.js.org redux.js.org
    1. functional programming utility, and is included in Redux as a convenience. You might want to use it to apply several store enhancers in a row.

      store enhancers for redux; All compose does is let you write deeply nested function transformations without the rightward drift of the code. Don't give it too much credit!

  6. Apr 2020
    1. SPAs are incredibly common, popularised by client-side web frameworks like Angular, React and Vue.js.


      • popularised by client-side web frameworks like Angular, React and Vue.js
      • real difference between the MVP app is shifting most of its work on the client side
      • there's client side MVC, MVVM (model-view-view-model) and FRP (functional reactive programming)

      Angular - client side MVC framework following its pattern, except it's running inside the users web browser.

      React - implementation of FRP. A little more flexible, but more concerned with state change events in data (often using some event store like Redux)

    1. Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. That's why using async directly in the useEffect function isn't allowed.

      async and useEffect

    1. Behind the scenes, when a Python, R or Julia engineer creates a Dash app, they are actually creating a React Single Page Application (“SPA”).
    2. With Dash, any open-source React UI component can be pulled from npm or GitHub, stirred with water, transmogrified into a Dash component, then imported into your Dash app as a Python, R, or Julia library. C’est magnifique! 👨‍🍳 Dash makes the richness and innovation of the React frontend ecosystem available to Python, R, and Julia engineers for the first time.

      Dash components are based on React

    1. Taro 的组件编译后就是小程序的自定义组件,而小程序的自定义组件的初始化时是可以指定 data 来让组件拥有初始化数据的。开发者一般会在组件的 constructor 中设置一些初始化的 state,同时也可能会在 render 中处理 state 与 props 产生新的数据,在 Taro 中多出的这一次提前调用,就是为了收集组件的初始化数据,给自定义组件提前生成 data ,以保证组件初始化时能带有数据,让组件初次渲染正常。


    1. It’s still a good idea to keep your code in three different buckets, and keep these buckets isolated from each other:Display/UI ComponentsProgram logic/business rules — the stuff that deals with the problem you’re solving for the user.Side effects (I/O, network, disk, etc.)

      How do I organize my code like this? What's the directory structure look like.

    1. 。如果同一个文件夹下有同名而不同作用的js文件,则通过中缀(小写)进一步区分


    1. When a React component dispatches actions, how can another service catch the actions, accumulate and group them, then redispatch a single action?

      Catching actions to accumulate and group them

    1. JSX 的属性都采用双引号


    2. 扩展名:React 组件使用.jsx扩展名;文件名:文件名使用帕斯卡命名。 例如: ReservationCard.jsx。引用命名:React 组件使用帕斯卡命名,引用实例采用驼峰命名


  7. Mar 2020
    1. Inputs are collected in standard React fashion with some hooks:

      To be honest, I'm not the most well-versed in best practices surrounding the new React hooks, so I could be wrong here / doing things in a convoluted way. The code here is a carry-over from the template I mention

      (this comment is also a test of hypothes.is annotations on my blog!)

    1. To do that, the react-redux library comes with 2 things: a component called Provider, and a function called connect.

      react-redux带来两样东西: 一个叫Provider的组件 一个叫connect的函数

    1. useEffect serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API


    1. Newer versions of TypeScript can now infer types based on your React.PropTypes (PropTypes.InferProps), but the resulting types can be difficult to use or refer to elsewhere in your code.


    1. Every useState() call gets its own “memory cell”.

      Hooks proposal relies on call order, isolating multiple name state variables from each other.

    2. point of supporting multiple useState() calls is so that you can extract parts of stateful logic (state + effects) out of your components into custom Hooks which can also independently use local state and effects

      Reasons to avoid managing state via a single object instead of discrete state variables

    3. array destructuring syntax to name useState() state variables but these names are not passed to React. Instead, in this example React treats name as “the first state variable”, surname as “the second state variable”, and so on. Their call index is what gives them a stable identity between re-renders

      Stable identity of useState variables between re-renders

    1. The combination of WordPress, React, Gatsby and GraphQL is just that - fun

      Intriguing combination of technologies.

      Keep an eye on the post author, who is going to discuss the technologies in the next writings

  8. Feb 2020
    1. Today in this article, We are going to talk about a much-debated topic React Native vs Flutter. We will go through some points and know where React native is still better and where Flutter outmaneuver its nemesis.

  9. Jan 2020
    1. const mapStateToProps = state => ({ todos: getVisibleTodos(state.todos, state.visibilityFilter)})const mapDispatchToProps = dispatch => ({ toggleTodo: id => dispatch(toggleTodo(id))})export default connect( mapStateToProps, mapDispatchToProps)(TodoList)

      Example of passing state to the component.

    1. npx create-react-app my-app

      This builds out a nice template project to get started with all the tooling and setup already done for you.

    1. Instead of allowing any and all components to fetch and manipulate data, which can make debugging pretty much suck, we want to implement a pattern that's in line with the Single Responsibility Principle, and that keeps our code DRY.
  10. Dec 2019
    1. Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.

      key point!

    2. What does useEffect do? By using this Hook, you tell React that your component needs to do something after render

      key point!

    3. In React class components, the render method itself shouldn’t cause side effects. It would be too early — we typically want to perform our effects after React has updated the DOM.

      key point!

    4. Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook. The useSomething naming convention is how our linter plugin is able to find bugs in the code using Hooks.

      as can be seen above, indeed nothing explicetly tells that the function is a special kind of hook. its just a function...

    1. Places To Hire Top React Developers In 2020

      It becomes even more crucial to select great people when you are hiring for a new business. Hiring top react developers has become even more difficult in the last few years because of its growing popularity and usability amongst companies of all sizes.

    1. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects

      key point. this means that all those small messing of variables in code that gets rendered into the template of the component? this is all 'side effects', and of course we do this all the time...

    1. React Native vs Flutter vs Xamarin: A Comparative Guide [2020]

      The most popular cross-platform frameworks are React Native, Xamarin and Flutter. But, which to select out of three? We’ll go through each one of them and by the end of this article, you will get the one which suits best for your business.

    1. If you need more advanced React-integration, like server rendering, redux, or react-router, see shakacode/react_on_rails, react-rails, and webpacker-react.
    1. server-side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup. Check out the reference implementations, bit by bit.
    1. I love this library. Migrated from CRA to nwb. That didn't work out. Neutrino was very easy to setup with almost the exact setup I had with CRA but with far more customization. Again, thank you. Have a good day
    1. Second, there are some fantastic projects out there like Create React App, preact-cli, nwb, and much more that avoid the boilerplate problem but at the expense of some other tradeoffs. Your configuration could be black-boxed and not able to be modified. They could force you to eject your configuration, making maintenance of the entire build dependency tree and configuration your responsibility again, and also preclude future configuration updates.
    1. make stylable all of the visual states of your application - no clicking around required - just jump right to the state

      Storybook value proposition: state inventory without requiring interactions

    2. The easy, functional-programming concept that a component can receive both functions AND data as arguments

      Injecting a function, a fp concept, to enable testing

    3. in React, the component doesn't encapsulate completely around the lookup method. It provides a default implementation but allows its environment to override it

      React functional component receives method to enable testing

  11. Nov 2019
    1. const setRefs = useRef(new Map()).current; const { children } = props; return ( <div> {React.Children.map(children, child => { return React.cloneElement(child, { // v not innerRef ref: node => { console.log('imHere'); return !node ? setRefs.delete(child.key) : setRefs.set(child.key, node)

      Illustrates the importance of having unique keys when iterating over children, since that allows them to be used as unique keys in a Map.

    1. Wow, looks like a lot of duplication in https://github.com/constelation/monorepo/blob/master/packages/Style_/src/index.native.tsx compared to https://github.com/constelation/monorepo/blob/master/packages/Style_/src/index.tsx to handle differences in props on the different platforms such as backfaceVisibility.

      And even structure/shape differences like:

      const style = { ...styleFromProps, ...this.props.style, ...Child.props.style }


          propsToPass.style = [styleFromProps, this.props.style, Child.props.style]

      Is there no way to remove this duplication?

    1. // require('hammerjs') when in a browser. This is safe because Hammer is only // invoked in componentDidMount, which is not executed on the server. var Hammer = (typeof window !== 'undefined') ? require('hammerjs') : undefined
    1. In fact, React itself now makes use of render props in its own context API
    2. For example, if you were to add a className prop to the top or bottom <div> in the above demo, the <List> component would remove it in place of the top or bottom class. You can see this in the following example, where I’ve added the highlight class to the top two rows, but only the middle row is actually highlighted.To fix this, you’ll need to append a string to the className instead of replacing it.
    3. here’s how you’d use React.Children.toArray() with React.cloneElement() to add top and bottom classes to the List component’s children.
    1. It is used to expose internal data from within a render prop component for making it accessible to other components within the render prop component's composition.
    2. However, in this case you would lose the possibility to render something in between. You are strictly coupled to the higher-order component's render method. If you need to add something in between of the currency components, you would have to do it in the higher-order component. It would be quite similar as you have done it previously by rendering the currency components straight away in the Amount component. If using a render prop component instead, you would be flexible in your composition.
    3. For the sake of completeness, the following code demonstrates that the problem could be solved with a higher-order component (HOC) as well:
    4. That's especially useful when combining it with React's slot pattern, which is used for passing multiple composed components to different places within a (render prop) component, but then advancing it with a render prop function to pass the state from the render prop component to the composed components.
    5. However, again you would have to lift state up to the App component in order to pass the amount to the currency components. As you can see, the component composition on its own doesn't help us to solve the problem. That's the point where React's render props pattern comes into play which enhances React's component composition with an important ingredient: a render function.
    6. But it's not that simple, because the currency components don't know about the amount now. You would have to lift the state from the Amount component to the App component.
    1. Component Registration components A map of component names to plain JavaScript components. frameworkComponents A map of component names to framework (React, Angular etc) components.
    1. When the grid is initialised, it will fire the gridReady event. If you want to use the API of the grid, you should put an onGridReady(params) callback onto the grid and grab the api from the params. You can then call this api at a later stage to interact with the grid (on top of the interaction that can be done by setting and changing the props).
    1. whenever there's a lot going on, computers (but mostly humans) will get stuff wrong. In the 6 lines of our component, rendering 2 node types, we change syntaxes from JS to JSX, and back, 8 times! Count them - it's like JS(JSX(JS(JSX(JS))))! This is not the simplest code we can write.

      render() {

        { languages.map(item => (
      • {item}
      • )) }