Simple Guide to Creating a Single Page App with React Router

  • Below, you’ll see dom appended to signify the web version.npm install –save react-router-domUsing ES6 modules, you can import the components that we need:import { BrowserRouter, Route, Link } from ‘react-router’;// wrap your App component in the BrowserRouter BrowserRouter App //BrowserRouterWrapping your application in the BrowserRouter component will give your child components access to props from the native browser history API which allows the components to modify and match against url paths.
  • With that in mind, we can move on to the Route and Link components.RouteEach Route component will have a prop that represents the path to match against.
  • For example:BrowserRouter div Route exact path=”/” component={Home} / Route path=”/about” component={AboutMe} / Route path=”/contact” component={Contact} / Route path=”/projects” component={Projects} / /divBrowserRouter /***Take note of the fact that you’ll need to wrap any routes up in a div as the BrowserRouter component can only have one child node.Above, you’ll see that we have three routes each with a path and a component prop.
  • Remember that these aren’t routes in terms of static routing — they are simply conditionally rendering based on a pattern match from the location in the browser’s native APIs.LinkBecause we don’t want the page to load when we click on a link to a different part of the page, we can’t use your standard anchor tags for links.
  • The Link is set up how you’d expect following the conventions that we’ve already seen.BrowserRouter div Link to=”/”Home/Link Link to=”/aboutAbout Me/AboutMe Link to=”/contactContact/Contact Link to=’/projectsProjects/Projects Route exact path=”/” component={Home} / Route path=”/people” component={People} / Route path=”/contact” component={Contact} / Route path=”/projects” component={Projects} / /divBrowserRouter /There’s also a NavLink component that has useful properties for showing which link is currently active, so that’s something to explore if you’re looking for that kind of styling.That’s it!

Here’s a quick setup guide to creating a basic single page app with React. The goal of this post is not to get into the finer details of React Router, but rather to get you off the ground. As always…
Continue reading “Simple Guide to Creating a Single Page App with React Router”

Redux Devtools for Dummies – tyler clark – Medium

Redux Devtools for Dummies  #react #development #testing #redux #javascript #reactjs

  • In my opinion, this is the most robust and easiest to set up.npm install –save redux-devtools-extensionimport { composeWithDevTools } from ‘redux-devtools-extension’; into the store file.Finally compose your store with the imported module:import { composeWithDevTools } from store = createStore(reducer, composeWithDevTools( // other store enhancers if any));I recommend using this option over the others because it helps avoid issues with isomorphic applications.
  • Check out the additional features you can add and remove to the console hereHere is how one would add in those customized features:import { composeWithDevTools } from composeEnhancers = composeWithDevTools({ // Specify custom devTools options});const store = createStore(reducer, /* preloadedState, */ composeEnhancers( // other store enhancers if any));Also, if you do not have enhancers/middleware in your application, there is a more straight forward approach:import { devToolsEnhancer } from store = createStore(reducer, /* preloadedState, */ devToolsEnhancer( // Specify custom devTools options));Notice that we are using devToolsEnhancer here rather than composerWithDevTools.
  • If you installed everything correctly in your store initialization, it will show you something like this:If there is an error in your set-up, including exceptions thrown from your code, you will see this:Let’s break down whats happening in each section of the dev tools.Left-Side Console ToolsThe left hand column of the dash is showing in real time the actions that are firing on the current page (as defined by the action creator types).
  • The skip will cross out the action and show you your app without that action.Right-Side Console ToolsThe four tabs at the top right are in my opinion the most helpful of the tools.DiffThe right side of the console has multiple options to see the state of the application and the relation of each action to the state.When an action is selected in the left hand side of the console, the Diff option will show only what that individual action changed in the state tree.ActionClicking on the Action tab will show the individual action type and any data it is carrying along to the reducers.In the example above, this action has a type features/FETCH_SUCCESS and also carries data, the requested features to the reducer.
  • Including all of the combined reducers and their corresponding data branches.The Raw tab shows the action creator in a code view.StateThe state tab shows the entire state tree at the time of the action selected in the left hand side of the console.TestBack to the upper tabs, there is a test option.

Do you take one look at the docs and just give up? Did you know that you can completely control the currently running application’s actions/state through these tools? The first step is the easiest to…
Continue reading “Redux Devtools for Dummies – tyler clark – Medium”

Best practices for JavaScript function parameters

  • The problem with passing an object as a parameter to a function is that it’s not clear what values you should put into it.
  • One common thing in FP is to partially apply your functions, which is much harder to do if your function takes its parameters as an object.
  • While separate parameters are a good starting point, we run into trouble as soon as the function has optional parameters.
  • For functions with a single optional parameter, the solution is simple:

    Best practice: optionals come last

    However, if we have more than one optional parameter, the problem is… what if we only need to pass one optional parameter?

  • You can pass in parameters easily as an object, but the properties for the object can be easily seen from the function’s signature.

From time to time, people ask things like “should I use objects to pass function arguments”. I’m sure you recognize the pattern, as it’s common with many libraries:
Continue reading “Best practices for JavaScript function parameters”

a command line tool for developing React Native apps #webdev #reactjs #reacnative

a command line tool for developing React Native apps

#webdev #reactjs #reacnative

  • Haul is a drop-in replacement for CLI built on open tools like Webpack.
  • It can act as a development server or bundle your React Native app for production.
  • Start by adding Haul as a dependency to your React Native project (use to create one if you don’t have a project):

    If you’re on a React Native version >= 0.43, add the following in somewhere before the statement:

    To configure your project to use haul, run the following:

    This will automatically add the configuration needed to make Haul work with your app, e.g. add to your project, which you can customise to add more functionality.

  • Next, you’re ready to start the development server:

    Finally, reload your app to update the bundle or run your app just like you normally would:

    Check out the docs to learn more about available commands and tips on customizing the webpack configuration.

  • Haul uses a completely different architecture from React Native packager, which means there are some things which don’t work quite the same.

haul – Haul is a command line tool for developing React Native apps
Continue reading “a command line tool for developing React Native apps

#webdev #reactjs #reacnative”

React, Firebase & Me – Crystal Tate – Medium

React, Firebase & Me  #api #react #javascript #firebase #womenintech #reactjs

  • For my quarter 1 project, I decided to make a web app using React for my frontend and Firebase for my backend — two technologies I knew nothing about.
  • Galvanize gave me this confidence, by the way.The other students in my class were wrestling with code and working towards their project goals.
  • I had yet to commit one line of code, while the other students were approaching their MVPs.I didn’t want to abandon my goal of using React for this project; but I wondered who I thought I was.
  • I’d essentially learned to make delicious code bread, yet I was attempting to make code puff pastry for my project.
  • I was able to make even more progress on my project at school.

Life as a student at Galvanize is incredibly rewarding and truly challenging. Each day we’re tasked with much more than the day before, and somehow we keep moving along. Tuesday was totally defeating…
Continue reading “React, Firebase & Me – Crystal Tate – Medium”

Getting Started with React Native and Flow – React Native Training – Medium

Getting Started with React Native and Flow 📱👌 #javascript #react #reactnative #flowtype

  • Using the Flow server For a large project, you probably only want Flow to recheck files incrementally when they change.
  • To get started, we first need to make sure we either have flow set up in our project at node_modules/bin/flow (as we have already done above) or installed globally.
  • To stop the server, we can run node_modules/.bin/flow stop to stop the server.
  • In our project, we start the server by running node_modules/.bin/flow , which we’ve saved as an npm script npm run flow .

Flow allows us to easily add static type checking to our JavaScript. Flow will help you prevent bugs and allow for better code documentation among other things. A lot of the React Native…
Continue reading “Getting Started with React Native and Flow – React Native Training – Medium”

Introducing React Komposer 2 – Hacker Noon

Introducing React Komposer 2: Feed data into #ReactJS components by composing containers

  • I released React Komposer in January as a way to bind data to React UI components.
  • Version 1.x came with a set of utility composers which helps you to use React Komposer with popular data sources.
  • Now you can start using React Komposer 2 and let me know how it works for your app.
  • Even we are not using that prop for data loading.
  • Now with 2.x you could ask React Komposer to watch only a set of props you want.

I released React Komposer in January as a way to bind data to React UI components. It was a universal tool which you could use with any kind of data source, whether it’s a promise, Meteor, redux, Rx…
Continue reading “Introducing React Komposer 2 – Hacker Noon”