ReactJS App With Laravel RESTful API Endpoint Part 1

  • [] : [ new new new mangle: false, sourcemap: false }), ],};Webpack is a module bundler that packs all our source code within the public/js/ folder into one single file “bundle.js” which would be referenced from our laravel blade view.Step 2From the routes/web.
  • — Bootstrap Core CSS — link rel=”stylesheet”/headbodydiv id=”app”/divscript div container div id=”app”/div is the actual wrapper for our react components.Also create a JavaScript file under public/js/ folder called app.js,import React from “react”;import ReactDOM from “react-dom”;import {Router, Route, IndexRoute, browserHistory} from “react-router”;import Layout from “.
  • /components/Articles”;const app = Router history={browserHistory} Route path=”/” component={Layout} IndexRoute component={Home}/IndexRoute Route path=”users” component={Users}/Route Route path=”articles” component={Articles}/Route /Route /Router,app);The first three lines are import statements for importing the react packages we would be using in this file.Then we import the Layout component from React from “react”;import { Link } from “react-router”;import…
  • “collapse” : “”;return(div class=”navbar navbar-default navbar-fixed-top” div class=”container” div class=”navbar-header” a href=”#/” class=”navbar-brand”My React App/a button class=”navbar-toggle” type=”button” span class=”sr-only”Toggle Navigation/span span class=”icon-bar”/span span class=”icon-bar”/span span class=”icon-bar”/span /button /div div class={“navbar-collapse ” + navClass} id=”navbar-main” ul class=”nav navbar-nav” li class={homeClass} IndexLink to=”/” /li li class={usersClass} Link to=”users” /li li class={articlesClass}…
  • Alternatively you can run$ webpack –watchThis would always watch for changes within the public/js/ folder and then re-bundle the project instead of always running the npm webpack command every single time we make changes to the project.Then we run$ php artisan serveto start the Laravel development server which would be…

From my previous two articles, I introduced Laravel RESTful API Development, which was a step by step approach of creating a RESTful API endpoint for other apps to connect to it. In this series I…
Continue reading “ReactJS App With Laravel RESTful API Endpoint Part 1”

ReactJS App With Laravel RESTful API Endpoint Part 2

ReactJS App With Laravel RESTful API Endpoint Part 2  #redux

  • /reducers”;const logger = createLogger();export default createStore(reducer, composeWithDevTools( applyMiddleware(thunk, promise, logger),));This file is the store that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners.
  • /UsersReducer”export default combineReducers({ users})UsersReducer.jsexport default function reducer(state={ users: [], user: null, fetched: false, error: null}, action){switch (action.type){case “FETCH_USERS_REJECTED”: { return { …state, fetched: false, error: action.payload } }case “FETCH_USERS_FULFILLED”: { return { …state, fetched: true, users:, } }case “FETCH_USER_REJECTED”: { return { …state, fetched: false, error: action.payload } }case “FETCH_USER_FULFILLED”: { return { …state, fetched: true, user: action.payload } }}return state;}Next we update the app.js file in the public/js/ folderapp.js import React from “react”;import ReactDOM from “react-dom”;import { Router, Route, IndexRoute, hashHistory } from “react-router”;import { Provider } from “react-redux”;import Layout from “.
  • /store”;const app = Provider store={store} Router history = { hashHistory } Route path = “/” component = { Layout } IndexRoute component = { Home }/IndexRoute Route path = “users” component = { Users }/Route Route path = “users/new” component = { NewUser }/Route Route path = “users/:id/edit” component = { EditUser }/Route Route path = “articles” component = { Articles }/Route /Route /Router /Provider, app);Wrapping the router with a react-redux Provider component which would allow our React components to automatically share data and efficiently update whenever some action is triggered.Step 1Update the Users.js inside the public/js/components folderUsers.jsimport React from ‘react’;import { connect } from “react-redux”;import { Link } from “react-router”import { fetchUsers, deleteUser } from Users extends React.Component{constructor(){ super(); this.handleBtnDelete = event){ event.preventDefault();var r = confirm(“Are you sure you want to delete this document!”)
  • ; if (r == true) { const url = var formElement = var formData = new FormData(formElement); } }render(){return( div h1 className=”pull-left”Users/h1 div className=”col-lg-12″Link to=”users/new” className=”btn btn-primary btn-sm pull-left”Create New nbsp; i className=”glyphicon glyphicon-plus”/i/Linktable className=”table table-responsive”thead tr thName/th thEmail/th thPhone Number/th thContact Address/th th/th /tr /thead tbody {, index) = { return ( tr key={index+1} td{user.fullname}/td td{}/td td{user.phone_number}/td td{user.contact_address}/td tdLink className=”btn btn-success btn-xs pull-left”i className=”glyphicon glyphicon-pencil”/i/Linkform id={“form_”+user.user_id} className=”pull-left” method=”post” input type=”hidden” name=”user_id” value={user.user_id} / a className=”btn btn-danger btn-xs” onClick={(event) = event)} href=”#” id={user.user_id}i className=”glyphicon glyphicon-trash”/i/a /form /td /tr ) }) } /tbody/table/div /div ); } }function mapStateToProps(state) { return { users: state.users.users, } } export default the code above, the Users component is connected to the redux store which has access to dispatch two actions which are fetchUsers, deleteUser in the userActions.js file.
  • This is the component for creating a new user.NewUser.jsimport React from ‘react’;import { push } from “react-router”;import axios from “axios”;import { NotificationManager } from ‘react-notifications’;class NewUser extends React.Component{static contextTypes = { router: };constructor(){ super();this.state = { errors: ” }; this.handleSubmit = this.handleSubmit.bind(this); }handleSubmit(event) { event.preventDefault();var formElement = var formData = new FormData(formElement); formData) .

This article is the concluding part of the series on React App With Laravel RESTful API Endpoint. Sorry for the delay of this much awaited post. In the previous article, I set up the react app with…
Continue reading “ReactJS App With Laravel RESTful API Endpoint Part 2”