Installing React in a Webpack Environment, the Short way, and the Long way.

Then open up the App.js file so we can create a class-based component:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };

    this.updateValue = this.updateValue.bind(this);
  };
  updateValue = event => {
  	this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
      <div>
        <input onChange={this.updateValue}/>
        <h1>{this.state.inputValue}</h1>
      </div>
    );
  }
}

export default App; //We need to export this file so the index.js can import it.

Once completed save the file and load your project in either development or production mode. Start typing in the input box and you should see it appear on your screen.

The Short Way

The folks at react realized that setting up react on a webpack environment can be quite tedious for some folks, so they created ‘create-react-app’.

If you don’t want to deal with setting things up from scratch, simply user create-react-app, and it will get your environment up and running within minutes…yes it even configures both webpack and babel for you, too!

Let;’s get started:

Create and head over to a new project directory:

mkdir reactproject2

Then install create-react-app, locally.

npm install create-react-app

Next, run the following:

//Here is the syntax:
npx create-react-app <name of your app directory>
//i.e  npx create-react-app mytetrisapp

Then sit back and watch it do it’s thing. Once completed, you should see a directory created with the name you provided in the syntax above.

Head over to the newly created directory and run the following command:

npm start

That’s it! You should see webpack-dev-server fire up with your first react app on display!

Easy eh? Can you now see why most folks use the shorter method?

I hope this article helped!