Release 2.6.0 · atlassian/react-beautiful-dnd · GitHub

Drag and drop for mobile web📱with #reactjs just got a lot more beautiful🤘

  • We have really sweated the details to bring you a drag and drop experience that works out of the box which is initiative for users, respects standard touch interactions as much as possible, and looks amazing .
  • These are used to start and manage part of the touch interactions.
  • Styles are applied by default to s to facilitate a better touch device drag and drop experience.
  • Getting dragging working on touch devices is no easy feat.
  • The quality of this release would not have been possible without close examination of how others have already tackled this problem.

react-beautiful-dnd – Beautiful, accessible drag and drop for lists with React.js
Continue reading “Release 2.6.0 · atlassian/react-beautiful-dnd · GitHub”

Sprinkle a bit of Reason into Create React App

  • So you’ve decided to hop on the hype train and you want to try it out in your app, the thing is you already have a big project using and don’t want to have to rewrite it from scratch or eject and have to manage everything yourself.
  • Enter reason-scripts, it’s the equivalent of react-scripts and it’s easy enough to move from one to the other, the great thing is that your JavaScript code and code are interoperable, so you can migrate your components one at a time, instead of doing a great big rewrite, awesome!
  • If you’re looking for an introduction to Reason, I would recommend starting with the docs.
  • For and , I would start with: – – A ReasonReact Tutorial by @jaredforsyth – – A First Reason React app for Javascript developers by @ur_friend_james – – This part is the easy part!
  • Start by moving from react-scripts to reason-scripts.

So you’ve decided to hop on the Reason hype train and you want to try it out in your app, the thing is you already have a big project using Create React App and don’t want to have to rewrite it from scratch or eject and have to manage everything yourself.
Continue reading “Sprinkle a bit of Reason into Create React App”

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”