DEV Community: Andreas Reiterer

How to fix the Whitescreen After a Static Deployment with create-react-app

Andreas Reiterer — Tue, 13 Nov 2018 19:25:50 +0000

It’s one of the most annoying situations after deploying a static React app: After all that work, you finally deployed your app for production. But as you visit the site – instead of your freshly deployed app – you see … nothing.

A blank, white, screen.

The reason for this could be practically everything. For example, a critical error somewhere in your JavaScript, who knows?

To find out what’s wrong, it’s always a good idea to open your browser’s console and check it for error messages.

`Loading failed for the <script> with source ...`

A very common thing you might see there in a “white-screen-situation”, is that your app failed to load the JavaScript bundle – and that’s what we’re going to fix today.

Now let’s have a look where the files actually live. In my case, I put them into a sub-directory react-app, so the correct URL is https://www.andreasreiterer.at/react-app/static/js…

If you check the DOM of your index.html, you’ll see, that the JavaScript bundle’s links are absolute URLs – from the root of your application:

<script src="/static/js/1.3aec9dfa.chunk.js"></script><script src="/static/js/main.72f93e60.chunk.js"></script>

And that’s the root of our problem. Your app does not know it’s own location to build absolute URLs.

Webpack’s publicPath Setting

There is the publicPath setting in your Webpack configuration to tell an app what its root path is. In our example, that would be https://www.andreasreiterer.at/react-app/

If set correctly, it will base links like above from that URL – and your application will load like expected.

If you created your React app with create-react-app, you probably can’t access your webpack configuration. (Except you’ve ejected, but that’s not relevant for now)

_ So where do we put that information? _

I’ll tell you the secret sauce: It’s called “homepage” and it lives in your package.json

Specifiying “homepage”

If you’re using create-react-app, you won’t have to deal with Webpack configs. (Which is nice 😜 ) Instead – ejected or not – we just have to specify “homepage” in our package.json:

The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. (If you want to know more about the publicPath setting, have a look at the Webpack documentation)

Now that we told your app it’s base URL, run npm run build again and copy the app to your web space to find your app up and running.

Note : If you experience routing-issues with react-router on your static deployment, this article might be helpful for you.

Wrapping up

The next time you get a white screen after deploying a React app, remember the steps you’ve learned today:

Check the browser’s console for errors
Does the app link to the wrong bundle?
Update the “homepage” setting in your package.json
Build your app again and put it on your web space
Success!

Don't miss my next post!

Did you like this article? Sign up to my newsletter and get my future blog posts delivered right into your inbox.

Photo by Andrew Guan on Unsplash

The post How to fix the Whitescreen After a Static Deployment with create-react-app appeared first on Andreas Reiterer.

How to fix BrowserRouter for React Apps on Apache

Andreas Reiterer — Mon, 12 Nov 2018 05:27:58 +0000

While learning React, most people develop and test their apps locally. I mean … they’re just demo apps for learning purposes right? Nobody wants to see stuff like that, so why even think of deploying the apps somewhere?

But then comes the day where you try to deploy a React App to a web server, so you could show it to the people out there: “Look! I made this!”. And that’s how it was for me too.

Deploying a static React bundle to an Apache web space

I already had a web space, so it was obvious for me to put it up there. Because I used create-react-app, all I had to do was running npm run build and copy the contents of my app’s build folder to said web space.

YEAH! After all that hard work I just deployed my first React app!

I started clicking through several routes and everything seemed fine, until I refreshed the page or tried to access a route directly. I got a 404 error.

“But it works like a charm locally – why doesn’t it on my web space?”

Does that sound familiar to you?

Why is BrowserRouter not working?

Some research brought up several solutions. One of them:

“Use HashRouter instead of BrowserRouter”

Okay that would be an easy one. But since I wanted the app to support the browser’s history, that was no option. So let’s dig deeper and have a look at the reason for the error.

When you’re visiting a route of your app directly, e.g. via https://myapp.com/route/123 Apache tries to map that URL to a file in the public folder. In this case it looks for /route/123.html which obviously doesn’t exist – therefore the 404 error.

To avoid that, we have to tell Apache to redirect all requests to our index.html so our app can perform some routing magic for that URL.

Fixing the app’s routing

Now here’s how to finally fix the routing. To tell Apache to redirect requests to index.html where our app lives, we have to modify the .htaccess file. If there is no such file in your app’s folder yet, just create it.

Then be sure that you put in those 4 lines that will magically make your routing work.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

After we put that .htaccess file into the same directory as the index.html, Apache will redirect each new request directly to your app.

Bonus: Deploying the React app to a sub directory

If you’re deploying your app into a sub directory, so it’s accessible e.g. via https://myapp.com/the-app, you’ll soon notice that there is another issue. Each click to a new route will transform the URL to something like https://myapp.com/route-abc – which will break again after a reload. But there is a simple fix for that:

BrowserRouter has a prop called basename where you can specify your sub-directory path:

<BrowserRouter basename="/the-app">

From now on, each Route like /contacts will result in an URL like http://myapp.com/the-app/contacts.

Wrapping up

Today you learned how to fix routing with BrowserRouter for React Apps deployed to Apache. You learned, why you even get the 404 error in the beginning, and that you can overcome that error by redirecting all requests back to index.html.

The next time you’re facing routing issues with a React App on Apache, head back to this article and try putting the redirect script to the .htaccess file.

Do you know more issues with hosting a static React app on Apache? Leave a comment at the bottom.

Don't miss my next posts!

Photo by Stef Westheim on Unsplash

The post How to fix BrowserRouter for React Apps on Apache appeared first on Andreas Reiterer.

How to Test Your Presentational Components with Jest

Andreas Reiterer — Mon, 26 Mar 2018 20:34:15 +0000

Did you ever ask yourself, if it makes sense to test presentational components, or if it’s just too time consuming? Good news, you’re not alone! That’s why I put together three ways to create useful Jest tests for your presentational components without spending too much time.

“Does it make sense to test static components that only render a UI?”

The answer is: It depends. It might not be too useful if you only test if your JSX is rendered correctly, or if componentDidMount was called correctly. However, there are cases, where you really want to test your component, as well as the one or other quick-win, that can help you to avoid some nasty bugs later on.

In this post we will discuss some ways to introduce basic tests to your app. Please note: This is not meant to be a full blown in-depth article about the secrets of unit testing and how to achieve 100% code coverage. However, some testing is better than no testing – and the kind of tests that we’re discussing in the next sections might still save you some hours of debugging and bug fixing – without being too complicated and time consuming.

Test Conditional Rendering

If your component renders different content or child components, depending on the props that were passed, it is a good idea to test, if your component actually renders as intended.

To assert your rendered components with Jest, you can use enzyme or React’s TestUtils. For this example we use enzyme but feel free to use whatever library suits you best.

import React from "react"; import { shallow } from "enzyme"; import ContactListWithLoadingIndicator from "./ContactListWithLoadingIndicator"; import LoadingIndicator from "./LoadingIndicator"; import ContactList from "./ContactList"; const dummyFunc = () =\> {}; const dummyArray = [{ id: 1, firstName: "Max", lastName: "Mustermann", street: "Duck Creek Road", house: 2561, zip: 94107, city: "San Francisco", phone: "650-795-0470", email: "max.mustermann@internet.com" }, { id: 2, firstName: "Maxine", lastName: "Musterfrau", street: "Duck Creek Road", house: 2562, zip: 94107, city: "San Francisco", phone: "650-795-0471", email: "maxine.musterfrau@internet.com" }]; test("ContactListWithLoadInd shows LoadingIndicator when loading", () =\> { const contactList = shallow( \<ContactListWithLoadingIndicator isLoading={true} contacts={dummyArray} /\> ); const loadingIndicator = contactList.find(LoadingIndicator); expect(loadingIndicator).toHaveLength(1); }); test("ContactListWithLoadInd shows ContactList when not loading", () =\> { const contactList = shallow( \<ContactListWithLoadingIndicator isLoading={false} contacts={dummyArray} /\> ); const list = contactList.find(ContactList); expect(list).toHaveLength(1); });

In this example we created two unit tests. The first one, renders our <ContactListWithLoadingIndicator> with isLoading={true} to check, if it renders a <LoadingIndicator>, while in the second test case, we check if it renders the <ContactList> component when it’s not currently loading.

Add Basic Component Tests

“It only renders some UI, it can’t break, so I don’t need to test it”

Imagine the following scenario: Months after you created your app, you get a change request, that requires you to change a certain object at one point. Chances are, that other components might be dependent on this object and are now breaking, because of your change. You won’t know if it actually broke something, until you clicked through your whole app. And with “whole app”, I mean each possible combination of components was rendered. Or … you could just hope that nothing else depends on the object you changed.

Sounds like a lot of fun, heh?

You can avoid the necessity of clicking through all possible paths of your app. To do so, we can add basic component tests for each of your components.

To do so, you have to create mock objects for everything you pass down the props of the component. Then you simply render it with ReactDOM inside a Jest test, and if it can’t be rendered for some reason, the test will fail.

import React from "react"; import ReactDOM from "react-dom"; import ContactDetailView from "./ContactDetailView"; const dummyFunc = () =\> {}; const dummy = { id: 1, firstName: "Max", lastName: "Mustermann", street: "Duck Creek Road", house: 2561, zip: 94107, city: "San Francisco", phone: "650-795-0470", email: "max.mustermann@internet.com" }; test("ContactDetailView rendered correctly", () =\> { const div = document.createElement("div"); ReactDOM.render( \<ContactDetailView contact={dummy} onDelete={dummyFunc} onEdit={dummyFunc} /\>, div ); });

“But how would I notice that my app breaks from a changed object, if I always pass a correct object in the test?” – You might think right now.

You’re right. The above example renders a component and it’s child components. It only covers errors caused by changes that were made to the component or it’s children. However, if you change the props of a component, you also have to update the tests of this component. So if some child components depend on your changed object that was passed down through props, this test won’t pass, unless you fixed all the child components. As you can see, this small test might save you some hours bug fixing.

Add Basic Jest Snapshot Tests

Snapshot tests are a powerful tool to exactly compare the rendered markup with a previously saved snapshot.

Let’s have a look how we can create a snapshot for our ContactDetailView

import React from "react"; import ContactDetailView from "./ContactDetailView"; import renderer from "react-test-renderer"; const dummyFunc = () =\> {}; const dummy = { [... cropped for brevity ...] }; test("ContactDetailView matches the Snapshot", () =\> { const component = renderer.create( \<ContactDetailView contact={dummy} onDelete={dummyFunc} onEdit={dummyFunc} /\> ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); });

As you can see, we first render our component with renderer.create. The first run will create a new snapshot, file that contains the exact markup of the rendered component. Now each time the test is executed, it compares the rendered markup with the snapshot.

Snapshots are a good way to perform a very detailed check, if something in your components changed. This is especially useful to test presentational components.

However, there are caveats: Each time you change the component, you will have to generate a new snapshot by running jest -u to overwrite the existing snapshot. At this point it’s necessary to manually check how the markup has changed and if it’s really correct. You really don’t want your test to run against an incorrect snapshot. Usually you should check the snapshot before committing the file.

Note: Snapshot tests are worth nothing if you don’t take the time to manually check the changes in your snapshot files.

Wrapping Up

Congratulations to your new skill! You just learned three ways to add basic unit tests to test presentational components for your React components.

Testing Conditional Rendering
Basic Component Tests
Basic Snapshot Testing

Did you like this post? Subscribe to my newsletter and get more like that delivered directly to your inbox.

3 Quick Wins to Test Your Presentational React Components with Jest

Andreas Reiterer — Mon, 26 Mar 2018 20:34:15 +0000

“Does it make sense to test static components that only render a UI?”

The answer is: It depends. It might not be too useful if you only test your JSX, or if you called componentDidMount correctly. However, there are cases, where you really want to test your component, as well as the one or other quick-win, that can help you to avoid some nasty bugs later on.

In this post we will discuss some ways to introduce basic tests to your app. Please note: This is not meant to be a full-blown in-depth article about the secrets of unit testing and how to meet 100% code coverage. However, some testing is better than no testing – and the kind of tests that we’re discussing in the next sections can save you some hours of debugging and bug fixing – without being too complicated and time-consuming.

Test Conditional Rendering

If your component renders different content or child components, depending on which props you passed, it is a good idea to test, if your component actually renders as intended.

To assert your rendered components with Jest, you can use enzyme or React’s TestUtils. For this example we use enzyme but feel free to use whatever library suits you best.

import React from "react";
import { shallow } from "enzyme";
import ContactListWithLoadingIndicator from "./ContactListWithLoadingIndicator";
import LoadingIndicator from "./LoadingIndicator";
import ContactList from "./ContactList";

const dummyFunc = () => {};
const dummyArray = [
  { 
    id: 1, 
    firstName: "Max", 
    lastName: "Mustermann", 
    street: "Duck Creek Road", 
    house: 2561, 
    zip: 94107, 
    city: "San Francisco", 
    phone: "650-795-0470", 
    email: "max.mustermann@internet.com" 
  }, 
  { 
    id: 2,
    firstName: "Maxine", 
    lastName: "Musterfrau", 
    street: "Duck Creek Road", 
    house: 2562, zip: 94107, 
    city: "San Francisco", 
    phone: "650-795-0471", 
    email: "maxine.musterfrau@internet.com" 
  }
];

test("ContactListWithLoadInd shows LoadingIndicator when loading", () => { 
  const contactList = shallow(<ContactListWithLoadingIndicator isLoading={true} contacts={dummyArray} /> ); 
  const loadingIndicator = contactList.find(LoadingIndicator);

  expect(loadingIndicator).toHaveLength(1);
});

test("ContactListWithLoadInd shows ContactList when not loading", () => { 
  const contactList = shallow(<ContactListWithLoadingIndicator isLoading={false} contacts={dummyArray} />);
  const list = contactList.find(ContactList);

  expect(list).toHaveLength(1);});

Add Basic Component Tests

“It only renders some UI, it can’t break, so I don’t need to test it”

Imagine the following scenario: Months after you created your app, you get a change request, that requires you to change a certain object at one point. Chances are, that other components might depend on this object and are now breaking, because of your change. You won’t know if it actually broke something, until you clicked through your whole app. And with “whole app”, I mean each possible combination of components that our app might be able to render. Or … you could just hope that nothing else depends on the object you changed.

Sounds like a lot of fun, heh?

You can avoid the need of clicking through all possible paths of your app. To do so, we can add basic component tests for each of your components.

To do so, you have to create mock objects for everything you pass down the props of the component. Then you simply render it with ReactDOM inside a Jest test, and if it’s not possible to render for some reason, the test will fail.

import React from "react";
import ReactDOM from "react-dom";
import ContactDetailView from "./ContactDetailView";

const dummyFunc = () => {};
const dummy = {
  id: 1,
  firstName: "Max",
  lastName: "Mustermann",
  street: "Duck Creek Road",
  house: 2561,
  zip: 94107,
  city: "San Francisco",
  phone: "650-795-0470",
  email: "max.mustermann@internet.com"
};

test("ContactDetailView rendered correctly", () => {
  const div = document.createElement("div");
  ReactDOM.render(
    <ContactDetailView
      contact={dummy}
      onDelete={dummyFunc}
      onEdit={dummyFunc}
    />,
    div
  );
});

“But how would I notice that my app breaks from a changed object, if I always pass a correct object in the test?” – You might think

You’re right. The above example renders a component and it’s child components. It only covers errors caused by changes to the component or it’s children. However, if you change the props of a component, you also have to update the tests of this component. So if some child components depend on your changed object through props, this test won’t pass, unless you fixed all the child components. As you can see, this small test might save you some hours bug fixing.

Add Basic Jest Snapshot Tests

Snapshot tests are a powerful tool to exactly compare the rendered markup with a previously saved snapshot.

Let’s have a look how we can create a snapshot for our ContactDetailView

import React from "react";
import ContactDetailView from "./ContactDetailView";
import renderer from "react-test-renderer";
const dummyFunc = () => {};
const dummy = {
   [... cropped for brevity ...]
};
test("ContactDetailView matches the Snapshot", () => {
  const component = renderer.create(
    <ContactDetailView
      contact={dummy}
      onDelete={dummyFunc}
      onEdit={dummyFunc}
    />
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

As you can see, we first render our component with renderer.create. The first run will create a new snapshot, file that has the exact markup of the rendered component. Now each time we execute the test, it compares the rendered markup with the snapshot.

Snapshots are a good way to do a very detailed check, if something in your components changed. This is especially useful to test presentational components.

Note: Snapshot tests are worth nothing if you don’t take the time to manually check the changes in your snapshot files.

Wrapping Up

Congratulations to your new skill! You just learned three ways to add basic unit tests to test presentational components for your React components.

Testing Conditional Rendering
Basic Component Tests
Basic Snapshot Testing

As mentioned in the beginning of this post, there are a lot more ways to test your components in detail. However, if you’re concerned about the necessary time effort to add testing to your app, those three approaches are a quick way to cut the risk of adding new bugs. So next time you consider skipping testing to save time, try your favourite approach and cut the risk of adding new bugs!

*Do you write unit tests? Why? Why Not? I’d love to hear about it! Leave a comment and tell me about your test experience and how you approach this subject in your projects. *

Did you like this post? Sign up for my newsletter and get more articles like that delivered directly to your inbox.

How and Why to Bind a Callback Function in React Components

Andreas Reiterer — Wed, 07 Feb 2018 19:40:56 +0000

This might sound familiar to you: You run your React app after you made some changes to test your new functionality and get an error message like this: “ this.setState’ is not a function “. It’s probably because you forgot to bind a callback function before passing it down a prop. Today you’ll learn why you need to bind, and how to bind a callback function in React.

Handling the this keyword is causing a lot of headaches for many developers. That’s because in JavaScript it is not always clear what this is actually referring to. Especially, when you’re working with callback functions.

If you ask yourself, why you even have to bind callback functions and when you actually have to do this, this article is for you: Today we’re going to learn about binding the this keyword in React components.

TL;DR: Binding callbacks is a JavaScript thing. It’s necessary because you have to tell your callback what it’s context is. Bind your callbacks in React either in the constructor or by using the public class fields syntax.

Why we Need to Bind: The Basics of `this`

First of all, it’s not a React thing that you’ve got to bind this. In fact, it’s related to the way JavaScript works. this is a special keyword inside each function that refers to the current context. You might already have seen this in other programming languages.

In JavaScript, however, the value of this depends on how the function was called, not where or when it was defined. Also, it is not affected by scope, like a variable would be. This means, that whenever you pass a function down another function, this will not refer to the same value.

function myFunction() {
 console.log(this);
}

// Calling the function normally
myFunction(); // 'this' will refer to 'window'

// pass the function to an object and call it as an object method
var myObj = { doSomething: myFunction};
myObj.doSomething; // 'this' will refer to 'myObj'

If you want to learn more about this, I recommend having a look at the MDN documentation.

But what does all of that have to do with binding this, you ask? Well – it’s possible to tell a function what it’s this should refer to – and that’s what you’re doing with binding this. Let’s have a look at that.

How to Bind `this`

If you bind a function, you can set the value of this for later, so it doesn’t matter anymore where exactly your callback function is called. You can achieve this by calling bind(this) for your function:

function myFunction() { 
  console.log(this); 
}

// bind(this) creates a new function where the value of 'this' is fixed
var boundFunction = myFunction.bind(this);

// It's also possible to replace the function by it's bound version
myFunction = myFunction.bind(this);

Calling bind(this) on a function returns a new (bound) function that has the value of this already defined. This way, if you would pass it to another object, or down a prop inside a React component, the value of this inside this component will not change anymore.

Now let’s have a look at how we can bind this inside a React component.

Binding `this` in a React Component

The best way to show the different approaches is an example. Have a look at the components in the following code sample:

const AddComponent = ({onAdd}) => {
 return (
   <div>
     <button onClick={() => {onAdd("item")}}>Add</button>
   </div>
 );
}

class MyListComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     myObjects: []
   }
 }

 handleAdd(newObject) {
   this.setState((prevState) => (
     Object.assign(
       {}, 
       this.state, 
       { myObjects: [...prevState.myObjects, newObject] }
     )
   ));
 }

 render() {
   return (
     <div>
       <AddComponent onAdd={this.handleAdd} />
       {this.state.myObjects}
     </div>
   )
 }
}

What we have here is a simple Component that holds a list of items. A child component adds items to this list with the help of a callback passed through props. So far so good. If you execute the above example, you’ll get an error because this is undefined.

The error you get, when you call a callback function without binding ‘this’

In the following sections, I’m going to explain the recommended ways to bind this to avoid such errors.

Using The Public Class Fields Syntax

It’s worth to note that the class fields syntax are not standardized yet. But they are already so widely used that if there would be syntax changes, it probably won’t take long for a proper frictionless migration strategy to appear.

When using the class field syntax, you’re going to transform your callback to a public field of your class. Doing so will bind the this of the callback automatically to the class it was defined in. This allows you to pass the callback to your child component without having to bind it separately in your constructor.

handleAdd = (newObject) => {
   this.setState((prevState) => (
     Object.assign(
       {}, 
       this.state, 
       { myObjects: [...prevState.myObjects, newObject] }
     )
   ));
 }

Binding `this` Inside the Constructor

One of the easiest ways to bind this is to do so in your parent component’s constructor by calling .bind(this) for your callback function:

constructor(props) {
  super(props);
  this.state = {
    myObjects: []
  }

  this.handleAdd = this.handleAdd.bind(this);
}

That’s it! Basically, you just have to bind every callback function inside the constructor and you’re safe to go.

If you have a lot of callback functions you can probably imagine how big your constructor could get. If you compare this to using the public class fields syntax, you’ll notice that this approach means a bit more typing for you and a potentially bigger constructor.

Alternatives and Their Caveats

In the previous sections, I explained the recommended ways of binding this. However, if you don’t like the above-mentioned approaches, here are some more – if you are okay with their caveats.

Binding Directly Inside a Prop

Instead of binding the callback function in your constructor, you can do so while passing it through a prop:

<div>
   <AddComponent onAdd={this.handleAdd.bind(this)} />
   {this.state.myObjects}
 </div>

Note: Whenever your component is re-rendered, bind(this) returns a new function and passes it down your component tree. This may lead to unnecessary re-rendering of your child components. Down the road, this can have a massive impact on your app performance.

Passing an arrow function to props

Instead of using the class field syntax, you could directly pass an arrow function down your props:

<div>
  <AddComponent onAdd={(obj) => this.handleAdd(obj)} />
  {this.state.myObjects}
</div>

Note: Like in the previous example, this creates a new callback each time your component is re-rendered and may cause unnecessary re-rendering of your component tree. Again a performance impact that you might not want to put up with.

Wrapping Things Up

We won’t get around binding callback functions, since it’s how JavaScript works. But now that you know why we have to bind this – and how to do it in React components, I hopefully made your life a bit easier.

As always there are different ways to solve this issue. But from the four mentioned approaches, I’d suggest sticking to the recommended options:

Using the class field syntax
Binding this in the constructor

Doing so might save you from unexpected performance issues. After you get used to using one approach, you won’t even think about it again.

Action Steps

Still not sure what’s the best approach for you? Take some time and try both of them! After you spent some time trying and practicing, you might notice that you like one approach more than the other – you’ll never know just by reading without trying it.

Now get your hands dirty and find your favorite approach!

Stay Updated

Do you want to upgrade your React skills? Stay informed about new articles by subscribing to my Newsletter

5 UI Libraries to Use With React

Andreas Reiterer — Mon, 22 Jan 2018 19:47:04 +0000

If you’re a developer who – like me – is not a good designer or a CSS pro, you might know how troublesome it can be to put together the design for your React app. You spend a lot of time tinkering with the styles, but in the end, it just doesn’t look quite nice.

This is not only annoying, it’s demotivating … after all, you just want to have a good-looking app that is also responsive to support mobile devices. How hard can it possibly be?

If this sounds familiar to you, I can assure you’re definitely not alone.

Use UI Libraries to Style a React App

Styling a web app is a huge pain for many developers. Maybe that’s why there are so many UI libraries out there in the wild. Here are some examples of libraries for styling React apps for you to try out:

React-Bootstrap

You might already know the Bootstrap Framework. It helps you to create responsive grid layouts on your website and offers a whole lot of controls like buttons and form elements. React-Bootstrap offers the functionality of Bootstrap through handy-to-use React components.

Website: https://react-bootstrap.github.io

Semantic UI

Semantic focuses on making front-end development a better experience for developers. You can not only use it with React, but it also supports other frameworks like Angular or Ember.

Website: https://react.semantic-ui.com/

Material-UI

If you want to build a React app that complies with Google’s Material Design, this might be worth a look. Material-UI provides a bunch of React components that you can use and customize for your app.

Website: http://www.material-ui.com

Rebass

Rebass provides React components for primitive UI elements like grid layouts, buttons or boxes. It is built with styled-components, which allows you to customize all the provided elements and use real CSS in your code.

Website: http://jxnblk.com/rebass/

Atlaskit

Atlaskit is Atlassian’s (Jira, Confluence, Trello) official UI library and complies to their own Design Guidelines. It is also built with styled-components and provides a lot of customizable UI elements in form of React components.

Website: https://bitbucket.org/atlassian/atlaskit-starter/

Get your hands dirty

All of the above-mentioned libraries are a bit different. The best way to find out which library actually suits your needs, or which one you’re the most comfortable with, is to try them out :

Find a mini example project (e.g.: Build a static Twitter card component)
Open your Code Editor of Choice
Build the example project once with each of the above libraries

Spend some time with each of the libraries. You’ll soon see which library you’re the most comfortable with, or which one you like best. If you create the same project with each of them, you can directly compare the differences.

Did you like this article? Sign up for my newsletter so you get all my future posts delivered directly to your inbox!

A React Beginners Roadmap through the React Eco System

Andreas Reiterer — Thu, 26 Oct 2017 17:22:50 +0000

React beginners often have a hard time learning React, since the React ecosystem seems huge. You will inevitably stumble upon stuff like Redux, Webpack or Babel very early. At this point I was so overwhelmed because I had no clue where to start first.

It was even more confusing that I didn’t even know the problems that those tools tried to solve. Today I know better and I’m going to tell you that there is no need for any of these – at least not yet.

This post appeared first on my blog.

Introduction

I’m writing this for everyone who is just starting out – React beginners, or newbies in web development. However, I assume that you have at least some basic knowledge of HTML, CSS and JavaScript.

This post is designed to be a roadmap that guides you step by step from the entry level to more sophisticated topics – it helps you to focus on things that matter – instead of wasting time worrying about things that you don’t need yet. The roadmap will not contain detailed explanations of all of the different topics. In-depth content will be covered in future posts and extra detailed content about all of this will be part of my new project: React for Noobs – a no-confusion guide for React beginners.

But enough of that – the next sections will show you, what to focus on to improve your knowledge in React and it’s eco system without pain.

Prerequisites

Before starting with React, you should have at least a basic knowledge about HTML, CSS and JavaScript. That said, have a look at ECMAScript6 (ES6) – when working with react, you will need at least

This should be enough to begin with the basics.

Basics for React Beginners

When getting started with React, I strongly suggest that you start with the official tutorial. You’ll learn everything you need to understand the bare basics of React.

In the next sections, I’ll provide some additional thoughts to some of the stuff that you see in said tutorial.

create-react-app

This awesome tool makes bootstrapping a new application a LOT easier. It saves you from fiddling around in configurations that might just confuse you a lot. So for now, stick with create-react-app and be happy to bootstrap a new application with just one command.

Components

In React, everything is structured in components. So as soon as you know how to work with JSX, make yourself comfortable with passing data into components: props , managing state inside a component and also lifting state to a parent component. Learn how to properly handle events or pass functions as props (see “Lifting State Up”). Also don’t forget that a little styling won’t hurt :)

The next step is then to learn how to do conditional rendering and how to render Lists and Forms, as well as how to compose your components.

If you learned all of the above, you should create a small application on your own to strengthen what you’ve learned. Something small and simple. Back then, I just built a Tweet component that should look exactly like the one you see on Twitter. All you have to do is to create the necessary components, put in some static data and play around with it. You could also extend it to be a list of tweets.

If you feel comfortable enough, you can focus on more advanced stuff.

Advanced React

Now that you’re able to create useful components, it’s time to have a look at PropTypes. Also, as you might want to get your data from a remote server or API, make yourself familiar with Life Cycle Methods and how to fetch data from a server. Note: You can use React with any REST backend / API you want – there is no restriction.

You might want to split your app into different screens. To handle the transitions, you will need React Router. Alternative solutions for that exist, however, I suggest to start with react router, which seems to be the go-to solution in the community.

If you don’t have already, also have a look at how to handle forms, especially have a look at uncontrolled components, which you’ll need most of the time when working with forms.

Tip: Use functional components over class components everywhere you can. This also means, you should try to keep as many components stateless as you can. You’ll be thankful later when you didn’t spread your state over your whole application – especially if you have to do some refactoring. For further reading, I recommend Dan Abramov’s article about Presentational and Container Components.

Error Boundaries were introduced with React 16. They catch JavaScript errors and avoid crashing the whole application. Instead, React will display a fallback UI instead of the failed child component tree.

To avoid errors in the first place, have a look at Jest – . All the apps that were created with create-react-app support testing with Jest. The cool thing with Jest is, that you can test snapshots of React component trees. That makes creating tests a lot easier.

What now?

Now you know a lot about React. You should be able to create some complex applications that are communicating with a backend server or API.

At a certain point you might realise that managing state gets harder, the more complex your application is. You should now have a look at state management with Redux or MobX. I’d suggest you try both and decide what fit’s best. Many React Beginners stumble over Redux relatively early in their React career and then try to put it into all of their applications. Most of the time this will just add complexity – instead of taking it away.

In some cases you want to render your React App at a Server. This might be necessary out of SEO or performance reasons. I put this here, because I truly believe that React Beginners shouldn’t be thinking about Server Side Rendering.

If you want to change something in the build process or in the hidden configuration files (thanks to create-react-app), you can eject it. I do not suggest that for React Beginners, because you will instantly add a lot of complexity to your application. So prepare yourself for that by familiarizing yourself with Webpack and Babel. Their configuration files will lie around in your application folder, you should know what they do.

Wrapping Up

React Beginners often have a hard time getting into it. Once you got the basics and an idea how to proceed step by step, it gets a lot easier. I hope that this guide helped you to understand what you – as a beginner – really need, and what you should postpone to later.

I want to make the life of React beginners a bit easier. That’s why I recently started working on React For Noobs. It is a step by step guide that takes React Beginners by the hand and guides them step by step from Noob to Pro.

React for Noobs - A Guide from Noob to Pro

There is even more ...

Do you want to learn more about React and it's ecosystem? Good news! Subscribe to my newsletter to get more articles delivered right into your inbox, for free!

Thanks for reading the article until the end! I would appreciate if you let me know what you think. Leave a comment, contact me on Twitter or send an email to hi@andreasreiterer.at – I’m happy to respond to any message I get.

Validating Props easily with React PropTypes

Andreas Reiterer — Fri, 22 Sep 2017 18:32:05 +0000

React PropTypes are a good way to help you catching bugs by validating data types of values passed through props. They also offer possibilities to flag props as mandatory or set default values. They provide a great benefit with little effort.

Header Photo by Fré Sonneveld on Unsplash

Introduction

If you want to pass any value to a component, you won’t get around props. They are the component’s interface to get data passed down the component tree. When your application got bigger and more complex, you or one of your colleagues may want to reuse some existing components. Maybe you wrote the component a long time ago, so you have to find out, how to use it and which props are required.

To find that out, you have a look the source code of said component and have a look at all occurrences of this.props. You can imagine that this can take some time, depending on the component. But now that you know which props are mandatory, you can start – but wait, do you know what to pass down? Is it just a string or is an object required? You see, it’s not that easy. But there is a solution for that: React PropTypes.

What the heck are React PropTypes?

PropTypes not only help you to catch bugs, but also serve as a handy documentation on how a component has to be used in terms of passing props. Let’s have a look at a small example:

import React from 'react';
import PropTypes from 'prop-types';

const Person = (props) => <div> 
  <h1>{props.firstName} {props.lastName}</h1>
  {props.country ? <p>Country: {props.country}</p> : null}
</div>;

Person.propTypes = {
  firstName:PropTypes.string,
  lastName:PropTypes.string,
  country:PropTypes.string
};

export default Person;

As you can see, I created a little component to show a person’s name and it’s country. We show the first and last name as a header, and add a paragraph with the country, but only if it is set. For the beginning, I just created the PropTypes to define the type without caring about mandatory props.

So what does it do? PropTypes define the type of a prop. So each time, a value is passed through a prop, it get’s validated for it’s type. If you pass a value through a prop with a different data type than it is specified in the PropTypes, an error message will be printed in the console of your browser:

The error message you get, when you pass a value with a wrong data type

If you set up your PropTypes like that, you already got the first benefits:

You can easily catch bugs caused by passing data in the wrong data type (e.g.: An object instead of a string)
Someone that uses your component can see all available props including their desired data type at one place.
Some code editors support code completion for props, so you can see the available props while typing in the component in a tooltip.

Now that we know what PropTypes are, and what they are good for, let’s see what else they could do.

Data Type Validation

As shown in the example above, React PropTypes are used for data type validation. That’s what they are made for. I think most of the time you might check for basic data types.

Basic data types, arrays and objects

Here is an example for basic data types and :

Person.propTypes = {
  email: PropTypes.string,
  age: PropTypes.number,
  worksRemote: PropTypes.bool,
  updateCallback: PropTypes.func
}

Further types that can be used are:

PropTypes.array,
PropTypes.arrayOf(PropTypes.string),
PropTypes.object,
PropTypes.objectOf(PropTypes.number)

Complex data types

It is even possible to validate a plain JavaScript object against a certain shape:

Person.propTypes = { 
  car: PropTypes.shape({
    registrationNumber: PropTypes.string,
    year: PropTypes.number
  })
}

What you’ve just seen is an example on how to validate an object, that has been passed through the “car” prop. If you pass an object with a field “year” that is a string, you’ll get an error message. That’s great!

Specifying a Range of Valid Prop Values

From time to time you might want to have a prop value passed, that is exactly one out of a given set of values. Doing so, could look like this:

Person.propTypes = {
  gender: PropTypes.oneOf([
    'female', 'male'
  ])
}

If you now pass “unknown” through the “gender” prop, your browser will show an error because it didn’t comply with the specified PropTypes:

The passed property did not comply to the specified set of values

Apart from specifying the exact values, you can also specify a set of types for the prop:

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
])

Flagging Props as Mandatory

This is another important topic. If you want to require anyone who uses your component to always pass a certain prop, you can flag it as mandatory. See how you could do that – it’s easy! 😊

You remember the example right at the beginning of this post? I’ll show it again, but now we mark the first and the last name as required :

[...]

const Person = (props) => <div> 
  <h1>{props.firstName} {props.lastName}</h1>
  {props.country ? <p>Country: {props.country}</p> : null}
</div>;

Person.propTypes = { 
  firstName:PropTypes.string.isRequired, 
  lastName:PropTypes.string.isRequired, 
  country:PropTypes.string 
}; 

[...]

That was easy, wasn’t it? You can chain “isRequired” to any given PropType data type, which will result in an error message, if the prop is not provided.

Set Default Prop Values

If you want certain props to have default values if nothing is provided, you can do this by defining defaultProps:

Person.defaultProps = {
  country: 'Austria' 
}

The above makes sure that every time someone usese the “Person” component and does not provide a country, the person automatically becomes an Austrian! 😁

Wrapping up

React PropTypes are a great way to validate your component inputs. But also, if someone is going to use your component, it provides a quick overview of all the available props and the expected data types.

So in your next component, try to use PropTypes to avoid some nasty bugs and improve the reusability of the component a lot.

Did you like this post and want to read more? Sign up for my newsletter.
You will get all my future posts delivered directly into your inbox, and you can unsubscribe at any time.

The post Validating Props easily with React PropTypes appeared first on Andreas Reiterer.

A developer’s way into modern web development

Andreas Reiterer — Thu, 21 Sep 2017 19:27:24 +0000

I developed enterprise software (.NET) for about six years, when I started to dive into web development. Today I’m going to tell you about the journey, what I could have done better, and what I plan for theÂ future.

How everything started

I always liked the idea of becoming a web developer. At 14–18, when I was still in schoolÂ¹, I liked to fiddle around with HTML and CSS and build smaller websites with it. Altough I wasn’t very good at it, it catched my interest. Then I started working as a software developer for enterprise software and didn’t do much regarding web development for the next few years, until I had to write a thesis for my part time study, where I chose to write about JavaScript Frameworks, and how they affect software quality of single page applications in comparison to using Vanilla JavaScript.

Angular and the MEANÂ stack

I thought if I just focus on doing one tutorial after another, I would be able to create something on my own soon

I really liked what I learned while writing that thesis, so I continued learning about AngularJS (back then it was Angular 1) and focused on doing tutorials to learn more about it. At some point I decided that I want to know how to build a backend to a simple angular app. This was also the point when I discovered something called the MEAN stack. I was amazed how all of this works together. I liked it. So I did a bunch of full stack tutorials. I thought if I just focus on doing one tutorial after another, I would be able to create something on my own soon. Oh boy I was soooo wrong.

Angular 2

After spending some months doing tutorials in the evening some days a week, Angular 2 was in late beta and there were rumors that the first release candidate would be published soon. Okay… new is always better (wink ;)), so I had a look at Angular 2 which was a great experience. I liked the concept of components and the whole thing felt a bit cleaner to work with. So again, I did a bunch of tutorials until a colleague told me about an idea and asked if it was possible to build it. The first time since I started learning about web development, I could build something real. Something that could be useful some day. Almost every workday after work I would come home and spend the evening trying to build that web application with that MEAN stack I learned before. And suddenly I realized that I don’t know shit about how to do all of those things. Basically everything I learned in all those tutorials was lost.

I told myself that was because I just have to get used to all that new stuff and it will get better if I build more and more things. Over the next months, I spent a massive amount of time on relearning everything, and growing my application step by step. All of that, while having to keep up with regular updates to the Angular 2 release candidate. Almost each of them had a lot of breaking changes, which meant a lot of work for me as a beginner.

React

One sunny day when another Angular 2 RC was released with a backlog of breaking changes, it was enough. I threw everything away, just to learn ReactJS and start all over again. My friends told me good things about React before and it is backed by Facebook, so what could possibly go wrong? (I feared that small frameworks may get abandoned, so I focused on the ones that are backed by big companies) Learning React was awesome. Within short time I was able to build some cool little stuff and run it locally. Learning was a lot easier and faster this time because I already knew the JavaScript basics. Now that I was comfortable with the new framework, I focused on learning how to make a production ready web application with React, MongoDB, NodeJS and Express. (Of course that was too much new technologies for a beginner)

I was overwhelmed of how much stuff you need to get that thing up and running. Apparently, Webpack and Babel were things you must know to create a state of the art application so I tried to get into that. Fortunately that was around the time when create-react-app was released. Yippieh! No longer fumbling around with cryptical configs! Now I could just focus on learn how to get this thing running because create-react-app can also be used for creating production ready applications.

Since that day I’m building little things for myselfâ€Š–â€Šthings that never got published because I never finished them. All for the purpose of learning and building experience. And although I still don’t know everything about React, web development, backend development, I’m comfortable enough with it to create something real, something shippable, which I’d like to do in near future.

Now why did I tell you all of this? Because I made a terrible mistake. A mistake that held me back from gaining experience and growing faster into my desired role of a web developer: I did one tutorial after another. As soon as I finished one, I already started the next one without even thinking about what I just learned.

Takeaways - What could I have done better?

I wrote this article for people who think about becoming a web developer but don’t know where to start. As the way I did it in the beginning was not a good one, I want to tell you how to do better.

Don't do too much tutorials

Takeaway number one of this article: Don’t focus too much on tutorials. They are great for getting a glimpse of a concept. But after you finished it, think about what you learned. Try to build something small on your own where you use this newly acquired skills. E.g.:Â Dave CeddiaÂ wrote in one of hisÂ articles, you should copy existing things. Start small, but build something. It’s all about the practice.Â When following a tutorial you will think you understand, but as long as you don’t build something on your own, you don’t.Â Newly acquired skills have to be practiced, otherwise you will simply forget them.

Get an overview, start with the basics and build!

Before starting, think about what you want to do. Which framework do you want to learn? What about the eco system?

For example, if you want to learn React, I would recommend to start at the basics. If you don’t have experience withÂ JavaScript, learn the basics. LearnÂ ES2015/ES6, you will need it. After that, make yourself familiar with theÂ NPM package managerÂ orÂ Yarn. Choose the one which feels the best for you.
Now that you covered the basics, have a look at the official tutorial forÂ ReactÂ it covers a lot of things that you’ll need later. As soon as you finished, think of something small, and build it. Visit a page you are familiar with (e.g. Twitter, Facebook, etc.) and build a component that shows a tweet or a facebook entry. Try to copy it as exact as possible. Then, try to render a list of posts / tweets. If you managed to do that, you could try to connect your app to the Twitter or Facebook API (or maybe you find another API). That’s a good point to learn about how APIs work and how to use them within your project.

The key is to know when you need to know what. Start at the basics and try to use as much as you can in smaller projects. Don’t think of a fully grown scalable full stack application ready to use by a hundred thousand users. Just create something small for practicing and throw it away afterwards. If you are comfortable enough with what you do, level up and add some difficulty. Be it a connection to an API or server side rendering with code splitting. Just keep improving and growing.

Wrapping up

I love to learn about new technologies. But at some you are just overwhelmed by the amount of new frameworks and libraries. That was the moment for me where I realized that I just can’t learn and try everything. So I sticked to the basics and improved all the way until today. And there is still so much to learn. I never really learned about server side rendering, so that’s what I’m going to do in the future. It looks like I will have to learn about Webpack and Babel first, because Webpack’s code splitting functionality. And the most important thing: I will learn all of this by building my own stuff. As soon as I’m comfortable with it, I’m going to write about it. That’s how I manage to keep things stuck in my head.

EDIT: As a more detailed extension to this article, I would totally recommend to readÂ this articleÂ byÂ Gosha Arinich. (TL;DR: Learn one thing at a time, practice with learning projects, don’t care about best practices in the beginning, don’t try to keep up with every new library or concept) I wish I had read such an article before I started :-D

PS: I also want to add, that although I switched from Angular to React, I don’t think that Angular is bad. Both are great frameworks and I think each of them solves a lot of problems. Also I’m going to have a look at Angular in the next months since I get to use it in my daytime job. I’m really looking forward to get a better comparison now that I have more experience.

Call to Action

You also want to get a better developer? I'm sharing what I know on my blog, and if you subscribe to my weekly newsletter, I will deliver tips and tricks about web development right into your inbox.

This article was originally published at http://www.andreasreiterer.at

[1] I went to a school called HTL (Hoehere Technische Lehranstalt) is a secondary education school that permits students to acquire the university entry qualification and professional training at the same time. Iâ€˜m not sure if something like this exists outside of Austriaâ€Š–â€Šat least not with that name.

How to use React Lifecycle Methods

Andreas Reiterer — Fri, 15 Sep 2017 20:43:59 +0000

React lifecycle methods can be confusing if you don’t know which one to use for your particular use case. Today I’m going to show you, which lifecycle methods exist, and how to use them correctly.

Introduction

React components have several “lifecycle methods” that allow us to execute actions (e.g.: fetching data from a server) at particular times. When I started learning React, I found it hard to figure out which lifecycle method i should use for certain actions. If this is the case with you too, this article should serve as a handy guide.

I will start with an overview of all lifecycle methods and explain in which order they are called. Then I’ll handle each of them with a short explanation and some example use cases. In the end, you should have a better understanding of when to use which life cycle method.

The Lifecycle of a React Component

Let’s begin with the lifecycle of a component according to the React docs. There are three particular stages in the lifecycle of a component, that are important for our lifecycle methods, which I will explain:

Mount
Update
Unmount

Mount

When React creates an instance of a component and inserts it into the DOM (mounting), the following methods are called:

constructor()
componentWillMount()
render()
componentDidMount()

Update

If props or state of a component are changed for whatever reason, an update of the component is performed. However, this means that the component has to be re-rendered, which causes the following methods to be called:

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

Unmount

At some point our components will be removed from the DOM again. That process is called unmounting and means that the following method is called:

componentWillUnmount

React Component Lifecycle Summary

I hope I could give you a short overview of the life of a React component and the calling order of lifecycle methods. Just for a compact overview, here’s a list of all lifecycle methods in the correct order.

componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

You can see, they’re not that many. However, it is important that you choose the right one for different use cases to prevent side effects or errors.

Lifecycle Methods

In this section, we are going to explore the different lifecycle methods. I will explain each of them in detail and I’ll do my best to provide different example use cases for a better understanding.

componentWillMount()

componentWillMount()

Whenever React renders a component, it’s going to call c_omponentWillMount_ first. Note that this method is only called once in a life of a component, and this is right before it is initially. Therefore, there is no access to the DOM.

Note: Because componentWillMount is called before the render() method, this is the only lifecycle method that is called on the server side, when you use serverside rendering.

Alternatively to this lifecycle hook, the React docs recommend using the constructor instead.

State

You can use this.setState(…) inside this method. However, be aware that it may not trigger a re-rendering when you set the state synchronously.

If you can, I would suggest to set the default state inside the constructor instead of setting the state here.

Use cases

I did not find much example use cases for componentWillMount. Some people suggest to use it for doing some configuration of the root component that you can only do at runtime (e.g.: setting up a Firebase connection)

componentDidMount

componentDidMount()

Whenever this method is called, React has already rendered our component and put it into the DOM. Therefore, if there is any initialization you want to perform that relies on the DOM, do it here and now.

State

You can set the state with this.setState(). Whenever you do this, it will also trigger a re-render of the component.

Use Cases

You can use componentDidMount to fetch data from a server with AJAX calls. Also if you need to initialize anything that relies on the DOM, you can do this here (e.g. initializing third party libraries like D3). And last but not least, you can add event listeners inside componentDidMount.

componentWillReceiveProps

componentWillReceiveProps(nextProps)

Whenever a component receives a new set of props, this method will be called first. Also, please note, that React calls this method, even when the props have not changed. So whenever you use this method, be sure to compare this.props to nextProps to avoid setting the state unnecessarily.

React doesn’t call this method in the mount process. Instead, it only calls this method, if some of the component’s props may update.

State

You can set the state by using this.setState()

Use Cases

If you have a state that is a calculation from multiple props, you could do the calculation here. Don’t forget to check if your relevant props have really changed (compare this.props to nextProps)

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)

By default, this method is not implemented, so every update of state or props causes a render, even if the props didn’t change. However, if you want to avoid possible unnecessary renders, you could handle this here. Returning false means, that React will not execute componentWillUpdate(), render() and componentDidUpdate().

This method is not called for the initial render.

Note: According to the React docs, React may treat shouldComponentUpdate like a hint instead of strictly following it’s return value. This means, it could be possible that the method returns false but React still decides to re-render the component.

State

You can’t call setState here. Also, it wouldn’t make much sense to do so. If you want to set the state because of changing props, use componentWillReceiveProps instead.

Use Case

As already mentioned, you can check, if the update of props or state really affects the output of the component. To do so, you could do a comparison of the current props/state to the next props/state. If the component shouldn’t update, just return false and the component won’t update.

Note: This might lead to serious side effects. React also provides another solution for this use case: If you notice that a certain component is slow, you can inherit it from React.PureComponent instead of React.Component. It will perform a shallow comparison for props and state, which might work for most of the use cases I can imagine right now.

componentWillUpdate

componentWillUpdate(nextProps, nextState)

This method is invoked right before rendering. Like shouldComponentUpdate, it is called whenever new props are passed to the component, or the state is changed.

This method is not called for the initial render.

State

You can’t call setState here. Again, if you want to set the state because of changing props, use componentWillReceiveProps instead.

Use Cases

You can perform preparations that need to be done before updating the component. This lifecycle method is called right before render(), so you should not do anything that relies on the DOM – it will soon be outdated.

Common use cases seem to be:

set a variable based on state changes
dispatching events
starting animations

componentDidUpdate

componentDidUpdate(prevProps, prevState)

Yay! Everything went well, and React updated our component. Directly after rendering, React also calls componentDidUpdate.

This method is not called for the initial render.

State

You can use setState here.

Use Cases

If there is something you have to do with the DOM right after the component has been updated, this is the time and place for it. A good example for this would be the update of a 3rd party UI library like D3 to pass on the new data.

It is also a good place to perform network requests , as long as you compare the current state/props with the previous state/props to avoid unnecessary network requests.

componentWillUnmount

componentWillUnmount()

Right before React unmounts and destroys our component, it invokes componentWillUnmount.

State

You can’t set state before unmounting the component.

Use Cases

Use this hook to perform clean up actions. This could be

removing event listeners you added in componentDidMount (or elsewhere)
cancelling active network requests
invalidating timers
cleaning up DOM elements that you created in componentDidMount

Wrapping up

Today you’ve learned, that the lifecycle of a React component consists of three stages: Mounting, Updating and Unmounting.

Also you’ve learned that React calls a certain set of lifecycle methods at each of those stages. You can use them according to the use case you want to fulfill.

Thank you for reading this article. I really hope you enjoyed it. Also, I would really appreciate it if you share this article with your friends.

If there is something you want to add, or if you just want to chat about dev stuff, hook me up on Twitter, or send an email to hi@andreasreiterer.at.

Call to Action

You also want to become a better developer? I'm sharing what I know on my blog, and if you subscribe to my weekly newsletter, I will deliver more tips and tricks about React and other web development articles right into your inbox.

The post How to use React Lifecycle Methods appeared first on my blog.

A Simple Cheatsheet for Flexbox

Andreas Reiterer — Wed, 16 Aug 2017 15:00:38 +0000

An overview on how to use the flexible box layout (short: flexbox)

I spent the last days wrapping my head around flexbox , and how to use it correctly. Maybe you can relate to when I say, that it is not that easy to understand how it exactly works, or why some CSS rules don’t behave as expected under certain circumstances.

For me the following articles helped a lot to understand how flexbox works and what to consider when using it:

In this article, I just want to give a summary of what I think is important to know. So please keep in mind that this will not be an exhaustive description of all possible CSS rules and scenarios.

What’s flexbox?

Flexbox is a layout mode which is designed for laying out more complex applications and webpages.â€Š–â€Šw3.org

When using the flexbox layout model we distinguish between the two main elements: flex container and flex items.

The flex container is the parent element of your flex items. You set display: flex or display: inline-flex on this element to activate the flex layout mode.

Before outlining the details of a flex container or flex items, I want to talk about the terminology of the flex box layout model, which I found somehow confusing in the beginning. Here’s what I found about that in the flexbox specification:

An illustration of the various directions, sizing and positioning terms as applied to a â€˜row’ flex container.

First of all, in flexbox layout there is no horizontal or vertical. Instead, we orientate ourselves by a main axis and a cross axis.

Flex items are always laid out along the main-axis. In the image above, you can see, that the main-axis for a row flex container goes from the left end of the flex container ( main start ) to the right end ( main end ).

Basically, a column flex container is just a row flex container tilted by 90 degrees to the right.

An illustration of the various directions, sizing and positioning terms as applied to a â€˜column’ flex container.

For a column flex container things would look a bit different.

As you can see in the image on the left, as soon as you use flex-direction: column, the main-axis points towards the bottom of the screen, while the cross-axis goes from the right end to the left end of the flex container. So basically the whole picture is just tilted to the right, by 90 degrees.

This helped me a lot to orientate myself within a column flex container, since the CSS properties change their effective direction between row_and _column flex containers.

Now that’s all we need for now. In the following sections I’m going to describe the different CSS rules which are applicable for flex container and flex items.

The Flex Container CSS Rules

Let’s start with the CSS rules which are used on the flex container. I included some screenshots and put the respective CSS setting into the caption of the images.

flex-direction

This rule determines if the flex-items are aligned in a row or in a column. Additionally, there is an option to align them in reverse order, heading from main-end to main-start.

flex-direction: row; (default)

flex-direction: column;

flex-wrap

If you add more flex-items to a line, you will get to the point where there is not enough space for more. Since the flex-items shrink by default (see: flex-shrink the flex-items section) the items will get smaller the more items you add. By using flex-wrap you can control this behaviour if the items should stay in the same line (this is the default behaviour; flex-wrap: nowrap;) or wrap to the next line ( flex-wrap: wrap; or flex-wrap: wrap-reverse;)

flex-wrap: nowrap; as as applied to a â€˜row’ flex-container

flex-wrap: wrap;

flex-flow

This is the first shorthand I will show you today. You can combine the CSS rules flex-direction and flex-wrap within one single CSS rule. The following list should speak for itself:

flex-flow: row wrap;
flex-flow: row wrap-reverse;
flex-flow: column wrap;
flex-flow: column wrap-reverse;

justify-content

To position the flex-items alongside the main axis, you can use justify-content:

justify-content: flex-start; (default behaviour)

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content; space-around;

align-items

Now that you learned about justify-content to lay out items along the main axis, this is an easier one. align-items is used to align items along the cross-axis on the current line.

align-items: flex-start; (default behaviour)

align-items: flex-end;

align-items: center;

align-items: stretch;

align-items: baseline;

As you see, align-items also allows to stretch items to use the available space in the current line, as well as align-items: baseline;aligns items along the bottom line of their first line of text.

But what do you do if you don’t want to align the items within one line, but rather align the whole bunch of items within the available space of the flex-container? That’s what align-content is used for.

align-content

Let’s have a look how we can align the whole bunch of flex-items within our flex container:

align-content: flex-start; (default behaviour)

align-content: flex-end;

align-content: center;

align-conent; stretch;

That was a rather short overview of what you are capable to do with flex-container CSS rules. In the next section I’m going to show you how you can adjust the behaviour of flex-items.

The Flex Item CSS Rules

In the last section you learned how to align all flex items at onceâ€Š–â€Šeither within their line or within the available space of their flex container. Now it’s time to have a look at flex-grow ,flex-shrink ,flex-basis and the flex shorthand for those three rules.

flex-grow

Defines if items cang row to use the available space along the main-axis. The default value is 0, which means that flex-items don’t grow automatically. In the following pictures you can see which effect flex-grow has on flex items in a â€˜row’ and in a â€˜column’ container.

flex-grow: 0; (default behaviour) in a â€˜row’ container

flex-grow: 1; in a â€˜row’ container

flex-grow: 0; (default behaviour) in a â€˜column’ container

flex-grow: 1; in a â€˜column’ container

With flex-grow it is also possible to let certain items grow more than others.

Example: We have three items. Two of them have flex-grow set to 1, while one of them got flex-grow set to 2.

What happened here? First of all, all flex-grow values of a line are added, which results in a total of 4 which represents 100% of our available space.

Then each item is sized according to the relational size of its flex-grow setting to the sum of all flex-grow settings of said line. According to that calculation, the first two items get 25% of the available space and the third one gets 50%. Please note that I did not consider the padding and margin which is set in the image.

flex-shrink

By default, the shrink rule is set to 1. This means that as soon as the window is resized, the flex items will shrink if necessary. Possible values are 0 and 1.

Example: The flex item of the following picture has a width of 500px. With flex-shrink set to it’s default value 1, resizing the window means that the item will shrink to less than 500px width. When setting flex-shrink to 0, the item will not shrink and would exceed the window size and a scrollbar appears.

The item has a width of 500px. (Sidenote: flex-grow is switchedÂ off)

flex-shrink is turned onâ€Š–â€Šresizing the window also resizes theÂ item.

flex-shrink turned off. The item exceeds the window (scrollbars omitted in thisÂ picture)

flex-basis

The flex basis defines the initial main-size of a flex item. This setting will be evaluated before the available space is distributed to flex-grow, or the items are resized by flex-shrink.

The initial main size of the flex item before free space is distributed to the flex factors.â€Š–â€Šw3.org

flex-basis accepts either a length in px || em || rem or percentages, as well as auto.

If flex-basis is set to auto, the width will be calculated based on content size. So the more you increase the content of a flex item, the bigger it gets.

As soon as you set a fixed size to flex-basis, the content of the item will adjust to fit into the item.

flex-basis: auto;

flex-basis: auto; with moreÂ content

flex-basis: 100px;

The flex shorthand

Because it is way more comfortable to set the above rules all at once, there is a shorthand to do so: The default setting for this is flex: 0 1 auto;

With the shorthand you define flex-grow with the first , flex-shrink with the second , and flex-basis with the third argument.

It is also possible to omit the last parameter: flex: 0 1 which defaults flex-basis to zero_._

The following pictures show some examples how you can arrange flex-items using the flex shorthand.

flex: 0 1 auto (default behaviour)

The item size is defined by its content.

flex: 0 1 auto; (default behaviour)

flex: 1 1 auto

flex: 1 1Â auto;

flex: 0 0 auto

This is the same as the example in the above section “flex-shrink”. Shrinking is turned off, which leads to the item overflowing the window size.

flex: 0 0Â auto;

Relative size of flex-items

To use the same “relative” sizing technique I described in the section “flex-grow”, you have to set flex-basis to zero. In the next picture, the first item has flex: 2 1 0; while the second item has flex: 1 1 0;

The first item got 2/3 of the available size while the second one gotÂ 1/3

Conclusion

Well that article grew a bit bigger than it was planned, but in the end, I hope you enjoyed the read. Maybe this article can serve as a handy guide to look up the different CSS rules if you want to brush up your knowledge, as this is something one might not memorize completely.

As I said in the beginning, this was never meant to be an exhaustive list of scenarios and rules which can apply, if you are interested in this in detail, I would suggest to read the articles I mentioned in the beginning of the article, as well as parts of the specification (if you don’t want to read the whole thing)

At first, I planned to also create this as a handy cheatsheet, but then I found a really good one by Chris Coyier which I want to share with you:

A Complete Guide to Flexbox

Call to Action

You want to learn more about web development and become a better developer? Good news! Subscribe to my weekly newsletter and I will deliver high quality content about web development right into your inbox.

The post A Simple Cheatsheet for Flexbox appeared first on my blog.

How to create responsive UI with styled-components

Andreas Reiterer — Wed, 26 Jul 2017 15:05:43 +0000

There are several approaches on creating responsive web apps with ReactJS. Apart from using whole frameworks like Bootstrap, I wanted to create a responsive grid view with styled-components, which was amazingly painless.

Now that I built an actual web app (admittedly, a tiny one) with ReactJS and styled-components, I wondered how easy it would be to create something more responsive. More precisely, I wondered how one would create a responsive page layout like it is easily done with Bootstrap, just to name an example. And that’s what we are going to build along this article, a simple grid view which allows us to split a web site into columns which will be stacked as soon as it is opened from a phone or tablet.

Until this point, whenever I built a responsive web page layout, I always relied on Bootstrap, or react-bootstrap, when working with ReactJS. Why? Because I found it easy to use and it made development a little bit faster.

But not this time. So I had a look on w3schools tutorial on building a responsive grid view to find out what happens behind the curtains of all those fancy libraries:

How does a responsive grid view work?

First of all, I want to give a short introduction how responsive grid views work. If you already know this, please feel free to skip this section.

Usually such grids have twelve columns which have a total width of 100 percent. Depending on the website’s layout you may not need all of them, so it should be possible to merge some columns together to get a bigger one. What really happens in the background is that there is a bunch of div tags with equal width floating to the left, so they appear in a row.

.column {
  width: 8.33%;
  float: left;
}

EDIT: As stated by Mauro Lionel Ocorso and Jean Duthon it is also possible to use flexbox instead of float: left;. However there might be some compatibility issues if you want to support older browsers also. Thank you guys for pointing this out!

A grid with twelveÂ columns

Since the whole grid has a width of 100 percent, each of the columns are exactly 8.33% wide. Now let’s say we want a bigger column at the beginning of the grid, in the size of three columns or 25 percent of the screen.

The first column spans across the first threeÂ columns

In the picture above, you can see the first column spanning across three columns, which caused the second and third column to disappear. What really happened is not a real column span. The first column got a width of 25 percent and columns 2 and 3 were deleted now that they are not needed anymore.

To achieve this, some changes have to be made. Instead of having one CSS-class for each column, there is one for each possible column span. This is also reflected in the class names I used: While col-1 spans across one column, col-3 spans across three and col-12 would have a width of 100 percent.

[class*="col-"] {
  float: left;
}

.col-1{
 width: 8.33%;
}

.col-2 {...}

.col-3{
 width: 25%;
}

[...]

The only thing missing now, is how we get to stack the columns as soon as we view our page from a smaller device. This can be achieved by using media queries (learn more about them here).

The columns should stack vertically when viewed from a smallÂ device

Let’s say we want to stack the columns as soon as the width is smaller than 768px.

[class*="col-"] {
  /*Mobile first: set the width to 100% by default*/
  width: 100%;
}

@media only screen and (min-width: 768px) {
 /* For everything bigger than 768px */
 .col-1{
   width: 8.33%;
 }

 .col-2 {...}

 .col-3{
  width: 25%;
 }
}

[...]

First of all, I set the initial width of all columns to 100 percent. Because that is how it should look like on a smaller screen, it also improves the performance of the page display for them. By setting the width to 100 percent, the columns automatically stack vertically, so yep, there is not much more to do.

The second important thing is the @media rule I added: As soon as the width exceeds 768px, the overall widths from the last example are used.

Now having covered the basics, let’s see, how this is done with React and styled-components!

Creating the basic grid view with styled-components

As a starter, we will build the exact same grid, like I covered in the last section:

It will have twelve possible columns
A column can span across the width of 1–12 columns.
If the total width is smaller than 768px, all of the columns will stack vertically.

In the following screenshot you will see, that I created a component called Row which is needed to clear the float after the columns. Then I added a Column component, which has by default float: left set, and a width of 100% (mobile first, you remember?).

But have a look on your own:

Our grid built with styled-components

The Column component takes a prop span which represents the amount of columns to span across. If this prop is set, we calculate the desired width in percent. If no column span is set, we default to 8.33 percent, which is the default width for a column span of 1.

Extending the grid: Different breakpoints!

Taking Bootstrap as an example, we want to have the possibility to define different column spans for different viewports. This would give us the possibility to use different column spans on different screen sizes.

To achieve this, Column will no longer take a span prop. Instead there will be one for each breakpoint:

xs _ _for screen sizes up to 768px
sm for sizes up to 992px
md _ _for sizes up to 1200
lg _ _for everything bigger than that

Our new Column component

So what did we do here? Since we do not have a fallback width for column spans bigger than xs _ _we no longer calculate the value of the width, but the whole text instead.

For example: If you set a column span of 6 for md, you will get width: 50%;on medium devices. if you do not set a column span for md and the screen width exceeds 992px, we will just not set any width. This way the column gets always the width for the next smaller set column span, or 100% if nothing is set.

Now let’s see how it works:

The above example should render a grid with two columns.

Extra small screens (<768px)

On extra small screens, the first column takes the whole width, while column number 2 is shifted to the next row.

Our example rendered on an extra smallÂ screen

Small screens (>768px)

The first column should span across 6 columns and should therefore get a width of 50 percent. In this case the second column does not have a column span for small screens set, so the width of the next smallest break point is assigned: 50 percent.

Small screenâ€Š–â€ŠIf no column span for a certain screen size is set, the next smaller one is assigned.

Medium screens (>992px)

This should be easy: The first column spans across 8 columns (66.66 percent) and the second one spans across 4 columns (33.33 percent)

Medium screen

Since we did not set a column span for large screens, both columns look the same like they look on medium screens.

Conclusion

What we built here was an example of a responsive grid with styled-components with basic functionality. You could possibly extend the components to support more styling like margins, paddings or borders, just to name a few.

I think the most advanced responsive grid view I could find in my research for this article, is grid-styled from Brent Jackson. It even allows you to set different font sizes for four different breakpoints and much more. For this article however, I tried to cover the basics of responsive grids and how to build one. And what I really liked was the fact how easy it was to consider the different breakpoints since we can use real CSS. I know, there are several alternatives out there and I already had a look on some of them. But in terms of using media queries most blog posts recommend using libraries like react-responsive or react-responsive-mixin which may not be bad, but just did not feel right to me.

The post How to create responsive UI with styled-components appeared first on my website.

Call To Action

Do you want to learn more about styled-components, responsive design or other web development tips and tricks? Good news: Subscribe to my weekly newsletter to learn something new once in a week :)

DEV Community: Andreas Reiterer

How to fix the Whitescreen After a Static Deployment with create-react-app

Loading failed for the <script> with source ...

Webpack’s publicPath Setting

Specifiying “homepage”

Wrapping up

Don't miss my next post!

How to fix BrowserRouter for React Apps on Apache

Deploying a static React bundle to an Apache web space

Why is BrowserRouter not working?

Fixing the app’s routing

Bonus: Deploying the React app to a sub directory

Wrapping up

Don't miss my next posts!

How to Test Your Presentational Components with Jest

Test Conditional Rendering

Add Basic Component Tests

Add Basic Jest Snapshot Tests

Wrapping Up

3 Quick Wins to Test Your Presentational React Components with Jest

Test Conditional Rendering

Add Basic Component Tests

Add Basic Jest Snapshot Tests

Wrapping Up

How and Why to Bind a Callback Function in React Components

Why we Need to Bind: The Basics of this

How to Bind this

Binding this in a React Component

Using The Public Class Fields Syntax

Binding this Inside the Constructor

Alternatives and Their Caveats

Binding Directly Inside a Prop

Passing an arrow function to props

Wrapping Things Up

Action Steps

Stay Updated

5 UI Libraries to Use With React

Use UI Libraries to Style a React App

React-Bootstrap

Semantic UI

Material-UI

Rebass

Atlaskit

Get your hands dirty

A React Beginners Roadmap through the React Eco System

Introduction

Prerequisites

Basics for React Beginners

create-react-app

Components

Advanced React

What now?

Wrapping Up

There is even more ...

Validating Props easily with React PropTypes

Introduction

What the heck are React PropTypes?

Data Type Validation

Basic data types, arrays and objects

Complex data types

Specifying a Range of Valid Prop Values

Flagging Props as Mandatory

Set Default Prop Values

Wrapping up

A developer’s way into modern web development

How everything started

Angular and the MEANÂ stack

Angular 2

React

Takeaways - What could I have done better?

Don't do too much tutorials

Get an overview, start with the basics and build!

Wrapping up

Call to Action

How to use React Lifecycle Methods

Introduction

The Lifecycle of a React Component

Mount

Update

Unmount

`Loading failed for the <script> with source ...`

Why we Need to Bind: The Basics of `this`

How to Bind `this`

Binding `this` in a React Component

Binding `this` Inside the Constructor