انجام ندادن عملیلات crud در برنامه laravel react

داره میگه react props رو باید جدا نصب کنی دیگه با ریکت ارائه نمیشه و همین طور create-react-class
اینم ارور 419
https://goo.gl/GeauJx

@mdaalvand
این دو رو باید فقط نصب کنم؟
https://www.npmjs.com/package/create-react-class
https://www.npmjs.com/package/react-prop-types

@sj10ss
واسه props از:
https://goo.gl/pjCZqk
واسه create class از:
https://goo.gl/U9RT9h

@mdaalvand

این پیغام رو توی console مرورگر میده
البته من فقط نصب کردم
باید چیزی رو اضافه کنم با فایل app.js؟؟/

Warning: Unknown DOM property class. Did you mean className?
    in i (created by Master)
    in a (created by Master)
    in div (created by Master)
    in div (created by Master)
    in nav (created by Master)
    in div (created by Master)
    in Master (created by RouterContext)
    in RouterContext (created by Router)
    in Router

POST http://localhost:8000/items 419 (unknown status)

Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:9035)
    at settle (app.js:43640)
    at XMLHttpRequest.handleLoad (app.js:8909)

@sj10ss
خب توی تگ های jsx به جای کلمه class از className استفاده کن
واسه رفع ارور ۴۱۹ از لینک زیر استفاده کردی؟
https://goo.gl/GeauJx

@mdaalvand
اینو باید کجا استفاده کنم
توی تگ های jsx به جای کلمه class از className استفاده کن

@sj10ss
شما یه وارنینگ دارین و یه ارور که توی وارنینگت میگه به جای class از className استفاده کن مثل زیر:

<input className="foo"/>

@mdaalvand
بازم خطا میده با اینکه classname هست
اینم یه نمونه کد که classname هست

        <form onSubmit={this.handleSubmit}>
            <div className="form-group">
                <label>Item Name</label>
                <input type="text"
                  className="form-control"
                  value={this.state.name}
                  onChange={this.handleChange1} />
            </div>

            <div className="form-group">
                <label name="product_price">Item Price</label>
                <input type="text" className="form-control"
                  value={this.state.price}
                  onChange={this.handleChange2} />
            </div>

            <div className="form-group">
                <button className="btn btn-primary">Update</button>
            </div>
        </form>

@mdaalvand
اینم لیست خطا ها

Uncaught TypeError: Cannot read property 'value' of undefined
    at CreateItem.handleChange1 (app.js:67211)
    at Input.handleChange (app.js:71828)
    at Object.executeOnChange (app.js:11511)
    at ReactDOMComponent._handleChange (app.js:59104)
    at Object.ReactErrorUtils.invokeGuardedCallback (app.js:10921)
    at executeDispatch (app.js:10706)
    at Object.executeDispatchesInOrder (app.js:10729)
    at executeDispatchesAndRelease (app.js:6891)
    at executeDispatchesAndReleaseTopLevel (app.js:6902)
    at Array.forEach (<anonymous>)
6app.js:67218 Uncaught TypeError: Cannot read property 'value' of undefined
    at CreateItem.handleChange2 (app.js:67218)
    at Input.handleChange (app.js:71828)
    at Object.executeOnChange (app.js:11511)
    at ReactDOMComponent._handleChange (app.js:59104)
    at Object.ReactErrorUtils.invokeGuardedCallback (app.js:10921)
    at executeDispatch (app.js:10706)
    at Object.executeDispatchesInOrder (app.js:10729)
    at executeDispatchesAndRelease (app.js:6891)
    at executeDispatchesAndReleaseTopLevel (app.js:6902)
    at Array.forEach (<anonymous>)
localhost:8000/items:1 Failed to load resource: the server responded with a status of 419 (unknown status)
app.js:14080 Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:14080)
    at settle (app.js:51176)
    at XMLHttpRequest.handleLoad (app.js:13954)
add-item:1 Failed to load resource: the server responded with a status of 404 (Not Found)

کد این توابع handleChange و handleChange2 و... رو اینجا بذار

@mdaalvand

نمونه کد قسمت ایجاد ایتم

import React, {Component} from 'react';
import { Input } from 'element-react';
import {browserHistory} from 'react-router';

class CreateItem extends Component {
  constructor(props){
    super(props);
    this.state = {productName: '', productPrice: ''};

    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange1(e){
    this.setState({
      productName: e.target.value
    })
  }
  handleChange2(e){
    this.setState({
      productPrice: e.target.value
    })
  }
  handleSubmit(e){
    e.preventDefault();
    const products = {
      name: this.state.productName,
      price: this.state.productPrice
    }
    let uri = 'http://localhost:8000/items';
    axios.post(uri, products).then((response) => {
      browserHistory.push('/display-item');
    });
  }

    render() {
      return (
      <div>
        <h1>Create An Item</h1>
        <form onSubmit={this.handleSubmit}>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <Input placeholder="Please input" prepend="Item Name:" onChange={this.handleChange1} />
              </div>
            </div>
            </div>
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <Input placeholder="Please input" prepend="Item Price:" onChange={this.handleChange2} />
                </div>
              </div>
            </div><br />
            <div className="form-group">
              <button className="btn btn-primary">Add Item</button>
            </div>
        </form>
  </div>
      )
    }
}
export default CreateItem;

@sj10ss
این اینپوت که شما گذاشتی کاستومه و لازم نیست بنویسی e.target.value فقط بنویس e همون رو برمیگردونه

@mdaalvand

این error رو میده

Failed to load resource: the server responded with a status of 419 (unknown status)
app.js:14080 Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:14080)
    at settle (app.js:51176)
    at XMLHttpRequest.handleLoad (app.js:13954)
add-item:1 Failed to load resource: the server responded with a status of 404 (Not Found)

اینم warning

app.js:10591 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
printWarning @ app.js:10591
app.js:10591 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 https://fb.me/react-create-class

از این لینک نتونستی استفاده کنی؟ واسه ارور ۴۱۹
https://goo.gl/GeauJx

@mdaalvand

این قسمت کدی که توی لینک زیر بود
توی قسمت app.js موجود هست

      $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },

@sj10ss
توی view اصلیت متا تگ زیر رو اضافه کن

<meta name="csrf-token" content="{{ csrf_token() }}">

حالا توی جاوا اسکریبت این متغییر رو تعریف کن

let token = document.head.querySelector('meta[name="csrf-token"]').content;

و واسه قسمت ajax از کد زیر استفاده کن

$.ajax({
  url: uri,
  type: "POST",
  headers : { 'X-CSRF-TOKEN': token }
});

یا

$.ajax({
  url: uri,
  type: "POST",
  data: { "_token": token }
});

اگرم از axios استفاده میکنی کافیه یه هدر عمومی به نام X-CSRF-TOKEN تعریف کنی

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

@mdaalvand
بله از axios استفاده می کنم
توی فایل bootstrap.js به صورت زیر تعریف کردم
اما باز همون خطا رو میده

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
} catch (e) {}

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

اگه متاتگ رو بشناسه نباید ایرادی بگیره تست کردم مشکلی نداشت شاید فایل بوت استرپ require نشده و...
زمانی که صفحه مورد نظر لود میشه تست کن ببین عبارت زیر رو توی کنسول کروم مینویسی مقداری چیزی برمیگردونه:

document.head.querySelector('meta[name="csrf-token"]').content

@mdaalvand
وارد کردم خروجی برمیگردونه از دستور زیر

document.head.querySelector('meta[name="csrf-token"]').content

ولی بازم همون خطا

والا این کد منه آپلود کردم هم با جیکوئری هم با axios دیگه نمیدونم اگه خواستی کل کدتو بذار دیگه نمیدونم والا
https://goo.gl/778xEv