Building a Cryptocurrency App using React, React Router v4 and Laravel

Previous versions of React Router used a static routing approach for building single page applications where you would define a route to render a component against it after it matches the specified URL. This approach didn’t conform to the principles of React. React Router devs were not happy about it either. So they decided to change the API and switch to dynamic routing model where almost everything is a component in React Router.

In this tutorial, I’m using React v16.2.0, React Router 4.2.2 and Laravel 5.6.

After a fresh Laravel installation run php artisan preset react and npm install && npm run dev  to replace existing Vue scaffolding with React and install dependencies. Now add react router to your project by running npm install react-router react-router-dom --save-dev. Now we’ll be making some structural changed to our resources folder. Laravel resources folder has two subfolders js and scss. There are no hard and fast rules for structuring react apps but I like to keep JS and CSS files in the same folder. So I’ll be moving app.scss  and _variables.scss  files to js folder and remove it. Now rename js folder to src.

It will look something like this after making changes. We also need to modify our webpack.mix.config to make use of this structure. I wrote a very detailed tutorial on how to extract CSS from your react components with Laravel mix. This is how webpack.mix.js will look like.

We’re using extract-text-webpack-plugin to extract CSS to dedicated file because there’s no option available to do it automatically in laravel mix.

Now create a view under resources/views  directory and name it app.blade.php.

Now add a route to serve it against every incoming request.

All routes defined above this will return their specified responses. We’re rendering app.blade.php view against every incoming request and including all the necessary scripts to bootstrap our SPA so that react router can take care of routing and rendering of React components.

In our app.js file, we are requiring app.scss file which includes bootstrap. Bootstrap is already available in react preset. if it’s not installed, you can install it by running npm install bootstrap --save-dev.

On the second line, we are requiring bootstrap.js  file which includes bootstrap, jquery, and axios. Now run npm run dev and open your app in the browser and you’ll be presented with this example react component.

For our crypto app, I’m using coinmarketcap API to fetch cryptocurrencies data. Get rid of the example component and modify app.js  file.

We’re requiring React, ReactDOM and BrowserRouter. We’re using BrowserRouter instead of HashRouter because we’re rendering app view against every possible route and we’re sure about it. We use HashRouter in situations where we have limited access to the server or serving our app statically via index.html  file. We are rendering Root Component which is further divided into two components.

In componentDidMount()  lifecycle method, I’m fetching top 20 cryptocurrencies from API and updating Root component’s currencies state.  CurrencySidebar  component takes currencies prop and renders them.

In our CurrencySidebar component, we’re updating currencies state with props.  We are also implemeting  componentWillReceiveProps() lifecycle method because on the initial render props will be empty. Root component’s componentDidMount() is making an asynchronous ajax call to fetch currencies and when it gets a response, it will pass down new props to CurrencySidebar  component and we’ll update state with new props. When populating with data, it will look like this.

In our Root  component, we are rendering CurrencySidebar  for all paths starting with ‘/’.  We are rendering a list of currencies with clickable links to '/currencies/:id'  route in CurrencySidebar  component. <Link/>  lets us navigate without reloading the page.  We’ll render Currency  component only when user visits '/currencies/:id'  route with a valid cyrpto id. This is our Currency  component.

In our componentDidMount()  lifecycle method we’re calling  getCurrency(url)  method to fetch a single currency with matching id. We’are also implementing componentDidUpdate(prevProps, prevState) to handle a case where the user navigates through the list and click another currency. We are also checking location to make sure redirect happened. If there was a change, we’re calling API again with a new id and updating state with a new response. After applying some styling to our components in Currencies.scss  file.

Our crypto app is ready for display.

I’ve also created an example code GitHub repo. If you’ve any issue, please comment and I’ll try to help you.