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”

Bundling React Native during Android release builds

Bundling #reactnative during Android release builds

  • Again, the sample project is the key, look at the sample app’s build.gradle file.Notice the config section:/** * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets * and bundleReleaseJsAndAssets).
  • By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server.
  • * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle * bundleAssetName: “”, * * // the entry file for bundle generation * entryFile: “”, * * // whether to bundle JS and assets in debug mode * bundleInDebug: false,…*/These values allow…
  • gradle file, we were able to hook into the bundling command on all our release builds.Our config:// Configures the bundleJS commands for React-Nativeproject.
  • ext.react = [ // whether to bundle JS and assets in debug mode bundleInDebug: false, // whether to bundle JS and assets in release mode bundleInRelease: true, // the root of your RN project, i.e. where “package.json” lives root: from: “path to RN this, we can correctly build our signed,…

I would have expected this to be a straightforward, well documented workflow, but was unfortunately a bit disappointed. It took a bit of digging to finally automate bundling process within our release
Continue reading “Bundling React Native during Android release builds”

React Router DOM v4 Tutorial (with Examples) • techiediaries

#React Router DOM v4 Tutorial (with Examples)  #reactjs #javascript #Programming #coding

  • The < Route > component is one of the most useful components of React Router v4 and the idea behind it is simple, wherever you want to render something when only there is a match with the location’s path you can use a Route component.
  • We can just append the name to be used for the variable plus a colon : to the end of the route’s path, for example: – – When there is a path match an object which has the following properties will be created and passed to the component: – -…
  • First we import the necessary routing components such as Route and BrowserRouter – – Next we create the base layout component, besides common HTML tags we also use React Router v4 components Link and Route: – – Next we create our pages: – – And finally we create the App…
  • In our example app we used the prop exact in the Route for component HomePage – – That’s because React Router v4 uses inclusive routing instead of exclusive routing used by React Router v3 so without exact property the home component will be rendered with all other components, for example…
  • You can also navigate inside your React application using methods from the history object, for example: – – Which are equivalent to: – – Whenever you want to redirect to another location, you can place component which is when rendered will redirect to the location specified in to prop that…

In this tutorial we are going to get you started with react-router-dom using an example React application showing you how to use different concepts such as Link and NavLink for creating links (instead of anchors) in the React way, Switch and exact for enabling exclusive routing and browser routing history.
Continue reading “React Router DOM v4 Tutorial (with Examples) • techiediaries”

Simple React Router Example – Dan Buda – Medium

Simple React Router Example  #router #reactjs #react #reactjs

  • One of the things I love about React is how easy it is to make components and bring them all together.We’ll need to import a few things from React React Router Router to be able to make it all work.
  • And in our Link tags, we’ve included a to= and a path name that will be used in our Router code.So now for the Router:We use ReactDOM.render to tell our app how the navigation all fits together.
  • First, we want to use browserHistory in the main Router tag, and give our Router a starting point:So our App component, which will house our other components, is set up as the parent route that will use the path of just “/”.
  • Now we can add our Home component using IndexRoute to tell our Router that Home should load first upon getting to the site.The Home component/route is set up inside the App route because we want to set it as a child of App.
  • And now we can add our 2 link pages to the router:They are also added as children of the App component.

Just the basics of using React Router (version 2.8.1 — v4 just came out and I’ll monkey with that soon). So you can use React Router to handle all of your navigation, and once getting used to it, it…
Continue reading “Simple React Router Example – Dan Buda – Medium”

Creating your first React component – Paritosh Pundir – Medium

Creating your first React component  #javascript #es6 #programming #react #reactjs

  • If you already understand how the setup process works continue reading, otherwise check this post: Quick guide to starting with React js using ES6Here is the code on our main react file, where we will call our first component.Code on Github to follow alongmain.jsxNow lets create a new folder Component and than create FirstComponent.jsx inside it.
  • js go ahead and use it, things will work the same way.In this file we will first import React and Component from react to use it for creating our first react component.import React, {Component} from ‘react’;With react and component ready for use, now go ahead and create a simple ES6 class as follows:class FirstComponent {}At the moment this is an ES6 class but not a react component, so lets extend it to make it a react component:class FirstComponent extends Component {}Now we have a react component but it is of no use.
  • React components has a function called render() which generates the view of our page.
  • Lets go ahead and create one h1 element that our component will render:class FirstComponent extends Component { render() { return ( h1I am the First Component/h1 ); }}We are almost done, but still we need to export this class.
  • So the final code looks like this:Now lets use this component in our main.jsx, just import it from the path and use it as you would use a HTML tag (don’t forget to close it with / ).

In a recent post we learnt how to get started with react and setting up webpack and react modules. If you already understand how the setup process works continue reading, otherwise check this post…
Continue reading “Creating your first React component – Paritosh Pundir – Medium”

react-codemod/React-PropTypes-to-prop-types.js at master · reactjs/react-codemod · GitHub

  • * This source code is licensed under the BSD-style license found in the

    * LICENSE file in the root directory of this source tree.

  • An additional grant

    * of patent rights can be found in the PATENTS file in the same directory.

react-codemod – React codemod scripts
Continue reading “react-codemod/React-PropTypes-to-prop-types.js at master · reactjs/react-codemod · GitHub”

Playing with D3 Version 4, React, React-Motion – Chris Roth – Medium

Playing with D3 Version 4, #reactjs, React-Motion – Medium

  • We just set up a component with an svg container.
  • Live Example (sorry, direct links to the examples are currently broken)
  • Example 3: An animated path using react-motion
  • All three examples provide different findings, see summary at the bottom.
  • The example provides a way to animate the graphs in React.

Here we present 3 examples, combining the power of the new d3 Version 4 modules and React (and React-Motion, and Redux). Based on the new d3 modules by Mike Bostock, we wanted to find out a bit about…
Continue reading “Playing with D3 Version 4, React, React-Motion – Chris Roth – Medium”

React Routify by rwhitmire

React Routify
 A routing library for #ReactJS applications


  • import React , { Component } from ‘ react ‘ import { Router } from ‘ react-routify ‘ const Home = () => < div > home < / div > const About = () => < div > about < / div > const NotFound = () => < div > 404 < / div > const routes = [ { path : ‘ / ‘ , component : Home }, { path : ‘ /about ‘ , component : About }, { path : ‘ * ‘ , component : NotFound } ] class App extends Component { render () { return ( < div > < nav > < a href = " / " > home < / a > < a href = " /about " > about < / a > < / nav > < Router routes = {routes} / > < / div > ) } }
  • commits \/ ( \d + ) \.\. ( \d + ) / , component : Commits }, { path : ‘ * ‘ , component : NotFound } ]
  • Use higher order components for nesting.
  • Route information can be accessed via props.route
  • React Routify is maintained by rwhitmire This page was generated by GitHub Pages .

Continue reading “React Routify by rwhitmire”