Please help react + webpack

JavaScript
1

react

src/app.js

class Indecision extends React.Component {
  constructor(props) {
    super(props);
    this.removeAll=this.removeAll.bind(this);
    this.add=this.add.bind(this);
    this.handleDeleteOption=this.handleDeleteOption.bind(this);
    this.state={
      option:[]
    }
  }
  componentDidUpdate(prevProp,prevState){
    // console.log("componentDidUpdate");
    if(this.state.option.length!=prevState.option.length){
    let json =JSON.stringify(this.state.option);
    localStorage.setItem('option',json);}
  }
  componentDidMount(){
    try{
      let json=localStorage.getItem('option');
      let option=JSON.parse(json);
      // console.log(option);
      if(option)
      {
        this.setState(()=>({option:option}));
      }
    }
    catch(e){
      //do nothing
    }
    }
  //fat arrow const s = () =>({}) here it is returning object
  removeAll(){
  //     this.setState(()=>{
  //     return{
  //       option:[]
  //   }
  // })
  //above can be written as:
  this.setState(()=>({option:[]}));
}


  add(val)
  {
    if(!val)
    {
        return "Enter Valid ToDo";
    }
    else if(this.state.option.indexOf(val)>-1)
    {
      return "Already Exist";
    }
  this.setState((p)=>({option:[...p.option,val]}));
}
  handleDeleteOption(option){
    // console.log(option,"del");
    let index=this.state.option.indexOf(option);
    this.setState((previousState)=>({option:previousState.option.filter((x)=>{return x!==option})}));
    }

  render(){
    const title="Indecision App"
    // let option = ["thing one","thing two","thing three"];
    return(
      <div>
        <Header title={title} subtitle="Subtitle = Enter the things that you want to do"/>
        <Action option={this.state.option}/>
        <Options option = {this.state.option} removeAll={this.removeAll} handleDeleteOption={this.handleDeleteOption}/>
        <AddOption add={this.add} option = {this.state.option}/>
      </div>
    );
  }
}

//header
const Header = (props)=>{
  return(
    <div>
      hey header
      <h1>{props.title}</h1>
      <h2>{props.subtitle}</h2>
      {props.h3 && <h3>{props.h3}</h3>}
    </div>
  );
}
// default props
Header.defaultProps={
  h3:"this is default h3"
}

//Action
class Action extends React.Component{
  constructor(props){
    super(props)
    this.showRandom=this.showRandom.bind(this);
  }
  showRandom(){
    alert(this.props.option[Math.floor(Math.random()*this.props.option.length)]);
  }
  render(){
    return(
    <button onClick={this.showRandom} disabled={!this.props.option.length>0}>Action</button>
  );
}
}
//all options
class Options extends React.Component {
  constructor(props){
    super(props);
  }
  removeAll(){
    this.props.option=[];
  }
  render(){
    return(
      <div>
        {this.props.option.length === 0 && <p>Enter something to get started</p>}
        <button onClick={this.props.removeAll}>Remove All</button>
        <ol>
          {
            this.props.option.map((items)=>{
              return (
                <Option
                  items={items}
                  key={items}
                  handleDeleteOption={this.props.handleDeleteOption}
                />
              );
            })
          }
        </ol>
      </div>
    );
  }
}
// show Each option
  const Option = (props)=>{
    return (
      <li>
        {props.items}
        <button onClick={
          (e)=>{props.handleDeleteOption(props.items)}
        }>Remove</button>
      </li>
    );
  }
  //AddOption
class AddOption extends React.Component {
  constructor(props) {
    super(props);
      this.onAddOption=this.onAddOption.bind(this);
      this.state={
        error:undefined
      }
  }
  onAddOption(e){
    e.preventDefault();
    let newEntry=e.target.elements.Inputvalue.value;
    let error=this.props.add(newEntry);
      this.setState(()=>{
        return{
          error:error
        }
      })
      e.target.elements.Inputvalue.value='';
  }
  render(){
      return(
        <div>
          <form onSubmit={this.onAddOption}>
            <input type="text" name="Inputvalue" />
            <button>Add Option</button>
          </form>
          <p>{this.state.error}</p>
        </div>
      );
  }
}

ReactDOM.render(<Indecision />,document.getElementById("app"));

webpack.config.js


// console.log();
module.exports={
  entry:'./src/app.js',
  output: {
    path:path.join(__dirname,'public'),
    filename:'bundle.js'
  }
};

package.json

{
  "name": "inDecisionApp",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Harshit Bhalla",
  "license": "MIT",
  "scripts": {
    "serverjutsu": "live-server public",
    "build":"webpack",
    "babeljutsu": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "live-server": "^1.2.0",
    "webpack": "3.1.0"
  }
}

#issue 1:
after using port 8080 for serving its status is always in use
#issue 2:
getting /favicon.ico 404

serverjutsu
serverjutsu1032×414 108 KB

#issue 3:
this error

build
build1033×380 104 KB

2

For issue#1, you are suspending the process, that is what ctrl+z is for. So, the port is probably still in use. You either terminate the process or use fg to bring back suspended process to the foreground.

For issue#3, you haven’t set up any loaders for your webpack. Just go through this tutorial.
https://www.valentinog.com/blog/react-webpack-babel/

1 Like
3

I recommend create-react-app. It’s very simple to get you set up and going for react app and makes your life easier with deployments too.

1 Like
4

awesome man thank you so much :smile:

5

thank you man :blush: