React - Components using Javascript

Question

I am trying to figure out how to respond to the warning in react to use javascript classes to create components in my MERN app.

The warning says:

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see[ \[this link\][1]

The link in that message says:

// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

I am using react v 15.5.4

In my app, I have tried to change my components as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';

var createReactClass = require('create-react-class');


var GreeterForm = createReactClass({
  onFormSubmit: function(e) {
    e.preventDefault();

However, the warning persists. Can anyone see what I have done wrong? How do I implement the new approach to defining components?

react-bootstrap might still be using React.createClass or you have another component somewhere that uses it? But why not use class as suggested in the warning? — Felix Kling
– Felix Kling, Commented Jun 27, 2017 at 0:41
That would explain why my bootstrap theme no longer works. Thanks - I'll look into that line of thought. — Mel
– Mel, Commented Jun 27, 2017 at 0:43

Vasi · Accepted Answer · 2017-06-27 01:17:58Z

3

You should use ES6 class for make a React component.

import React from 'react';

class App extends from React.Component{
    constructor(props){
        super(props);
        this.sample = this.sample.bind(this);
        // initialize your methods, states here
    }

    // if you want life cycle methods and methods define here

    componentWillMount(nextProps, nextState){
        console.log('componentWillMount');
    }

    sample(){
        console.log('sample');
    }

    render(){
        return <div onClick={this.sample}>Hello World!</div>
    }
}

edited Jun 27, 2017 at 1:17

answered Jun 27, 2017 at 0:48

Vasi

1,2271 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mel Over a year ago

where would you write a function in this setup?

Vasi Over a year ago

Using in my React App.

Mel Over a year ago

No - I mean where in that component would you write your function ?

Vasi Over a year ago

In this component has a method(function) named sample. You asked this or not? If your answer is NO Can you asked your doubts in detailed.

whs.bsmith · Accepted Answer · 2017-06-27 00:41:14Z

1

This is what I would do to create a class in React:

import React, { Component } from 'react';

class GreeterForm extends Component {
    onFormSubmit = (e) => {
        e.preventDefault();
        //do stuff
    }
    render() {
        return (<Child onFormSubmit={this.onFormSubmit} />)
    }
}

answered Jun 27, 2017 at 0:41

whs.bsmith

4061 gold badge3 silver badges12 bronze badges

2 Comments

Mel Over a year ago

Thanks for your example. How does that reflect the advice in this info sheet: facebook.github.io/react/blog/2017/04/07/… ?

whs.bsmith Over a year ago

The advice given there is for maintaining code that was written before ES2015 (several years ago). Now, instead of using 'react-create-class', you just use standard JavaScript classes. Hence, class ... extends Component

Collectives™ on Stack Overflow

React - Components using Javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related