Simple React.js Boilerplate

Dimitri Marion — Fri, 11 Oct 2019 00:00:00 +0000

I created a simple React.js boilerplate using Parcel. It’s a simple starter kit that you can easily extend. Only “react” and “react-dom” are installed, you decide which router or state management library or any other libraries you want to use.

Link to the boilerplate : Simple React.js Boilerplate

Getting started

You can click on “Use this template” to create another repository or clone the repository:

$ git clone https://github.com/dimitrimarion/react-parcel-boilerplate.git

Run the setup:

$ npm run setup

Start the development server:

$ npm run dev

Bundle the application for production:

$ npm run build

Useful packages

babel-plugin-module-resolver: this plugin simplifies the import path in your project.

// Use this:
import dog from "@images/dog.jpg";
// Instead of that:
import dog from "../../../images/dog.jpg"

You just need to add an alias in .babelrc:

[
   "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@images": "./assets/images"
        }
      }
  ]

@babel/plugin-proposal-class-properties: this plugin lets you use class properties.

Without class properties:

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

With class properties and arrow function, there is no need to bind this and the code is shorter:

class Button extends Component {
  state = { clicked: false };

  handleClick = () => this.setState({ clicked: true });

  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

Conclusion

This is a very simple boilerplate, it doesn’t include advanced things like state management or unit testing but I think it’s a good starting point for somebody learning React.js.

How to Become a Front-end Developer in 2019

Dimitri Marion — Wed, 28 Aug 2019 00:00:00 +0000

This guide is also available as a Trello board : Front-end Learning Path 2019.

Here’s a detailed learning path of what I think is the best way to learn front-end web development. This learning path has a lot of similarities with the Front-end handbook. The handbook is really good, but I think it is a bit overwhelming as a beginner who doesn’t know where to begin.

If you’re surprised there is no mention to the most used framework or library, it’s on purpose. You should learn the underlying technologies before learning the abstraction. It’s not even necessary to use frameworks or libraries nowadays for certain tasks thanks to the latest web standards and javascript. For example, CSS Grid or Flexbox can easily be used for layout instead of Bootstrap. You’ll be a better developer in the end and you’ll really understand what’s happening behind the scenes.

You’ll see a lot of mentions to Frontend Masters. I’m not affiliated with them in any way, I just think it’s one the best resources out there to learn web development.

This learning path assumes you have zero programming experience although this guide won’t teach you computer science. If you have zero prior programming experience, it may be good to take a course like CS50: Introduction to Computer Science. If you’re already a software developer or have some knowledge of web development, you may skip what you’re already familiar with, like for example section 1 explaining how the internet/web works.

It’s important to learn but it’s equally important to practice what you’ve learned. That’s why you’ll also find resources to practice or ideas of projects you can work on.

The only resources you should not skip (assuming you’re not already familiar with the subject studied in a section) are the one labeled “Getting Started”. They represent the basics that every Front-end developer should know. If you want to go further or come back to a subject you’re already familiar with, there are the resources labeled “Deeper Dive”. The resources labeled “Other Resources” covers the same subjects as in “Getting Started” or subjects that are not fundamentals.

1. Internet/Web Fundamentals

Getting Started:

Other Resources:

2. General Front-end

The following course will give you a good introduction on how to develop a web app and a basic understanding of how to use git and bash but without going into a lot of details. You’ll find that some of the next resources in this guide will cover the same subjects but that’s not a problem. It’s always good to review what you’ve already learned. It will also provide you with a good overview of what web development is so that you can learn each next subject knowing how all the pieces fit together.

Getting Started:

Complete Intro to Web Development, v2

Deeper Dive:

3. HTML & CSS

Don’t rush learning HTML & CSS. I know you want to build a cool dynamic website but you should have a solid understanding of HTML & CSS before learning Javascript. It’s especially true with CSS, you can get very frustrated when you’re not able to get the result you want. For example, CSS won’t apply the margin you want but that often comes from a misunderstanding or lack of knowledge of margin collapsing. The key to mastering CSS is to practice a lot.

Getting Started:

Other Resources:

Practice:

Deeper Dive:

4. Javascript

Getting Started:

Getting Started with JavaScript, v2

Other Resources:

Deeper Dive:

5. DOM API

Getting Started:

Other Resources:

Practice:

Frontloops Elements
Build a simple to-do list app
Javascript 30

6. Server/Client, JSON, APIs, AJAX, REST

Getting Started:

Pratice:

Pick an API in this list: https://github.com/public-apis/public-apis. Build a web app using this API. Example: show the weather forecast in your city.

Forem: Dimitri Marion

Simple React.js Boilerplate

Getting started

Useful packages

Conclusion

How to Become a Front-end Developer in 2019

1. Internet/Web Fundamentals

Getting Started:

Other Resources:

2. General Front-end

Getting Started:

Deeper Dive:

3. HTML & CSS

Getting Started:

Other Resources:

Practice:

Deeper Dive:

4. Javascript

Getting Started:

Other Resources:

Deeper Dive:

5. DOM API

Getting Started:

Other Resources:

Practice:

6. Server/Client, JSON, APIs, AJAX, REST

Getting Started:

Pratice:

Deeper Dive:

7. Bash, Git, Package manager, Bundlers

Getting Started:

Deeper Dive:

8. Front-End architecture

Getting Started:

Deeper Dive: