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”

React Animations 101: CSS transitions – Bjorn Holdt – Medium

React Animations 101: CSS transitions  #javascript #animation #css #react #reactjs

  • Examples with React and CSS transitionsHow do we use CSS transitions in react?Progress bar example (Codepen)Let’s start off with a progress bar first.
  • progress { transition: width 100ms ease-in-out;}Without CSS transitions whenever the progress bar updates, it would expand to its new width immediately.
  • In this case, when the navigation bar is visible the slideIn class is applied, when it is not visible the slideOut class is applied.The Navigation Bar Component (on codepen)const Navbar = ({ visible }) = ( div id=”navbar” className={visible ?
  • slideIn { transform: { transform: translateX(-220px);}Codepen exampleWe use the transform property in CSS to position the navigation bar.
  • slideOut will move the element completely out of view again.With the CSS transition, we tell the browser whenever there is a change to the transform property (in this case when the element’s position is changed), animate the change over 400ms.

If you were to follow my learning path to get a navigation bar animation working with react, you will end up with a combination of react-motion, ReactCSSTransitionGroup, yet-another-react-animation…
Continue reading “React Animations 101: CSS transitions – Bjorn Holdt – Medium”