Public Class Fields with React Components

Share this video with your friends

Send Tweet

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

Vamshi
Vamshi
~ 8 years ago

Excellent video. But why in 2017? :D I wish this came out in 2015/2016

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

Haha! Yeah, it's probably good to note that Public Class Fields are still relatively new. Stage 2 stuff!

David
David
~ 8 years ago

After many puzzlings of "why this way? Dunno, it works" ... thanks for the light bulb moment!

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

I'm glad it was helpful!

Gary
Gary
~ 8 years ago

Can you tell me is there a way to enable Public Class Fields in standardjs eslint

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

Sorry, I don't use standard. I have my own eslint config and I use the babel-eslint parser to get linting on upcoming features like this.

Vamshi
Vamshi
~ 8 years ago

Kent, I was trying this out today

import React, { PropTypes, Component } from 'react';
import Loading from 'gssp-common-lib/lib/components/gssp/leafs/loading/loading.component';

class SurveyQuestions extends Component {
  componentWillMount = () => {
    this.props.overrideEmit('surveyquestions');
  }
  render() {
    return (
        <div>
        {this.props.loading ? <Loading /> : null}
          <h2> Hello World </h2>
        </div>
    );
  }
}

export default SurveyQuestions;

This is undefined. Can you please tell me what Im missing here?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

Perhaps I should have mentioned this, but you don't want to do this for lifecycle methods that React will call with your instance. You'll want to use public class fields sparingly.

Vamshi
Vamshi
~ 8 years ago

Thank you!

Gary
Gary
~ 8 years ago

Hi Kent, Found a way,i just had to install babel-eslint and add "parser": "babel-eslint" in .eslintrc file , thanks a lot

Enrique
Enrique
~ 8 years ago

Loved the video. I found it doing a search within Egghead, and I'd like to see the rest of the course that this video belongs to. Do you happen to know which course this video is a part of?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

Hi Enrique, It's actually not part of a course. This was just a one-off video I made. Sorry about that!

Enrique
Enrique
~ 8 years ago

No worries! I was assuming that every video was part of a course. Glad I searched for it! It's good!