Rendering a function with React – kentcdodds

  • But there are reasons for the API as it is and that’s not what we’re going over in this newsletter…With ReactSo thinking about this in the context of React:const getHomeContent = getContent(‘pages.home’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”About/aSo far so good.
  • Anyway, this will break the app:const getHomeContent = getContent(‘pages.typo’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// 💥 error 💥Again, this is happening because getContent(‘pages.typo’) will return the string {pages.typo} (to indicate that there’s no content at that path and the developer needs to fix that problem to get the content)….
  • The issue is that you can’t invoke a string but that’s what’s happening because getHomeContent is a string, not a function.A solution and a new problemSo the change I made this week makes it so when there’s no content at a given path, instead of a string, it returns a “sorta-curried”…
  • No problem.So now this wont throw an error, but we lose rendering the path if there’s no content!const getHomeContent = getContent(‘pages.typo’)const ui = ( a href=”/about” {getHomeContent(‘nav.about’)} /a)// that’ll get you:a href=”/about”/aAnd we want to make sure that we show the missing content so it’s more obvious for developers (yes…
  • Let’s rewrite the above to make this more clear:const getHomeContent = getContent(‘pages.typo’)const aboutContent = ui = a in this example is a function because the call to getContent had a typo, so we’ll never actually find content that matches the full path.

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This week I was working on an…
Continue reading “Rendering a function with React – kentcdodds”

Server-side rendering a D3 chart with React 16

  • You load the page, then you load the data, then you render your chart.
  • You can see my server-side code that reads a CSV file and renders the chart into a string on Github.
  • Adjusting to server-side rendering required a small mind shift in the way I built my chart.
  • Until data loads, the app renders a ; after that, it returns a chart component.
  • With the approach, you’re loading the fully rendered chart, replacing it with an empty component, then re-rendering it once data loads on the client.

Over the years I’ve helped over 10,000 engineers hone their craft. Engineers have used my books, articles, and talks to improve their technical skills, get promotions, change jobs, and ship their products faster.
Continue reading “Server-side rendering a D3 chart with React 16”

Building a React.js App: Component Validation with PropTypes

Building a React.js App: Component Validation with PropTypes by @tylermcginnis33  #React

  • So looking at how the repos component is being used, you’ll notice we’re passing in username and we’re passing in a repo .
  • Now you’ll notice we get this warning, “Failed propType required username was not specified in repos .”
  • We don’t have to have it required, but as we talked about earlier when we use repos, we basically need a username and a repos array for this, so let’s go ahead and now when we render our repos component, let’s go ahead and take out username and let’s see what happens.
  • If we come in and we just render the notes component list this,
  • So everything is working correctly, but now what we’ve done is we’ve made the userProfile , the repos , and the notes component all validate that they’re being used correctly .

In this video, we’ll add PropTypes to some of our existing components to ensure that each component gets the data it needs to function properly.
Continue reading “Building a React.js App: Component Validation with PropTypes”