I’m giving up stateless functional components for a while.

They’re super nice but they’re not worth the refactor when you need a lifecycle method.

You could use recompose, which is also super nice, but completely avoidable.

Sticking to Class Components means I won’t need Recompose or a refactor.

If I’m going with Class Components then I might as well go with Pure Class Components.

React.PureComponent stops components from needlessly re-rendering. PureComponent is not something you use on a special occasion, it’s a sensible default.

The only reason I’d need to use a regular class component is when I want the component to re-render when a nested prop or value in state changes.

Then it’s back to React.Component and a shouldComponentUpdate(). A regular component without a shouldComponentUpdate method is now a red flag for me.

I use Pawel’s amazing snippet generator to create my new...

When you build a component in React you have the option to explicitly declare the type of props that it can, or must, accept by using the prop-types library.

This may seem like pointless extra work when you’re starting out, but when you begin working with other people declaring your props is a fantastic way to communicate how a component can be used and what it needs to work.

What you probably didn’t know is that Typechecking also make your code run faster. The V8 engine in chrome has something called Ignition, which is an interpreter. If your code consistently runs without type errors then V8 will skip the interpretation process and jump straight to turbo. Break the rules once and all your code will need to be interpreted from that point onwards. Strongly typed code runs in the fast lane.

The ‘prop-types’ library works for react code but it doesn’t work with all the non-react...

Create React App automatically reloads css style changes but not other code changes.

Adding hot modules to a create-react-app lets you change source code in your app and see the changes without the app reloading.

Below the ReactDOM.render function in src/index.js add the following snippet:

if (module.hot) {
  module.hot.accept("./App", () => {
    const NextApp = require("./App").default;
    ReactDOM.render(
      <NextApp/>,
      document.getElementById('root')
    );
  });
}

That’s it.

Go to your browser, update some source code and the changes will appear immediately.

Unfortunately, your app will lose internal state with any changes. I haven’t figured out a way to maintain state without ejecting or rewiring the app. To rewire you app checkout Dave Ceddia’s article on the topic.

If you want follow the approach above but you have a component in the index file (like a Routes...

If you increment a count in state using a state update function 3 times then the final count will be 3.

state = {count: 0}

this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))

this.state.count = 3

If you increment state 3 times just using a regular object then the changes will get batched together. Something that often gets overlooked is that setState  is asynchronous. State may not change immediately on calling setState because react batches state changes for performance.

state = {count: 0}

this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})

this.state.count = 1

The rule is if you need to reference current state then use an updater function, if you...

Truffle is a handy tool that helps you compile and deploy smart contracts. I ran into a bunch of gotchas the first time I tried setting a project up with truffle and react, so I’m going to walk your through the basics.

Truffle has made it simple to build Dapps with different frontend frameworks by creating pre-configured boilerplates projects called truffle boxes. To create a react truffle box create an empty folder and navigate into it in the command line, then type truffle unbox react.

Before you can use your truffle box you have to compile and deploy the example smart contract that comes with the boilerplate. To do this, type truffle develop in the command line and this will start a truffle development console. Inside the console type compile, wait for it to finish compiling and then type migrate.

The ‘develop’ command will create a test blockchain for you to use while you are...

1. To get setup please refer to part 1 : React + Firestore : Get Setup In Five Steps.

2. Please refer to part 2 for the basics of reading and writing to the database in React + Firestore: CRUD.

Initialise A Firebase Project

To be able to deploy a project to firebase hosting you will need to have firebase-tools installed on your computer. To do this open up your terminal and type npm install -g firebase-tools

When firebase-tools is finished installing, navigate to your the folder with the react project you want to deploy. Then type firebase init into the terminal.

You will be asked which firebase features you would like to include. We are going to use the example project in React + Firestore: CRUD](https://joshpitzalis.svbtle.com/crud) so we are going to select Firestore and Hosting. Use teh arrow keys to move up and down and then the space bar to select a feature. Press enter to...

1. To get setup please refer to part 1 : React + Firestore : Get Setup In Five Steps.

2. Please refer to part 2 for the basics of reading and writing to the database in React + Firestore: CRUD.

3. Please refer to part 3 for how to deploy your application in React + Firestore : Deploying Your Application.

Authentication Setup

• To set up authentication in the firebase console go to the authentication section under DEVELOP in the left-hand pane (1), clicking on the ‘sign-in method’ tab (2), find the provider you want (3) and enabling it (4), before saving your settings (5).

We’re going to use Google to sign in because you already have a google account and you’ve connected it by being logged into the firebase console.

Other 3rd party logins require setting up an app on the respective social platform and then entering some keys here. This is a bit of a detour so I recommend checking out...

One of the biggest barriers to learning React used to be the overwhelming amount of tooling involved. Beginners were forced to make important decisions about things they don’t understand before they could create anything.

React solved this problem in 2016 by releasing something called Create React App. Now there is an official way to create single-page React applications with zero configuration. If you chose to use create-react-app then you don’t have to make any other decisions.

I believe firebase is create-react-app for the backend. It lets you start building full-stack applications without having to get lost in a wormhole of build tools and server-side boilerplate. Using only Firebase and React you can build and deploy a full-stack project set up in a weekend.

To get setup please refer to React + Firestore : Get Setup In Five Steps.

Read From The Firestone

Lets manually add...

One of the biggest barriers to learning React used to be the overwhelming amount of tooling involved. Beginners were forced to make important decisions about things they don’t understand before they could create anything.

React solved this problem in 2016 by releasing something called Create React App. Now there is an official way to create single-page React applications with zero configuration. If you chose to use create-react-app then you don’t have to make any other decisions.

I believe firebase is create-react-app for the backend. It lets you start building full-stack applications without having to get lost in a wormhole of build tools and server-side boilerplate. Using only Firebase and React you can have a full-stack project setup in minutes.

• Install create-react-app from your terminal npm install -g create-react-app and then use it to set up a React starter project
  ...

In 2015, I read some great advice on the Recurse centre’s user guide:

Choose a text editor that is easy to learn and stick to it. If you’re not sure which one to choose, Sublime Text is powerful, intuitive, and available on Mac, Windows and Linux.

I picked Atom.

At the time, every single online tutorial I could find used Sublime so I switched for a while, thinking I made a mistake.

Atom had this cool new integration with Github that would highlight lines of code in different colours depending on whether or not you had committed changes yet.

I was sold.

But then Atom could be slow at times so I thought about switching back to Sublime.

Eventually I was spending more time trying pick the perfect set of tools than I was coding. It wasn’t just the time I spent trying things out, it was also all the time I wasted wondering if I made the right decision or not.

Avoid the mistake...