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…

ReactJS App With Laravel RESTful API Endpoint Part 1

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 would be creating an app using a JavaScript library called ReactJS that would connect to the Laravel API endpoint that was created in my previous article. Part one of this article would center more on the app setup and configuration. So lets dive in. The source code from which we would be working from can be cloned from https://github.com/adelekand/laravel-restful-api.git

STEP 1

Run composer install,

$ composer install

to install all the laravel vendor packages into the project folder. Thereafter change the default content of the package.json.

“name”: “my-blog-reactapp”,

“version”: “0.0.0”,

“description”: “”,

“main”: “webpack.config.js”,

“dependencies”: {

“axios”: “^0.15.2”,

“babel-core”: “^6.17.0”,

“babel-loader”: “^6.2.0”,

“babel-plugin-add-module-exports”: “^0.1.2”,

“babel-plugin-react-html-attrs”: “^2.0.0”,

“babel-plugin-transform-class-properties”: “^6.3.13”,

“babel-plugin-transform-decorators-legacy”: “^1.3.4”,

“babel-preset-es2015”: “^6.3.13”,

“babel-preset-react”: “^6.3.13”,

“babel-preset-stage-0”: “^6.3.13”,

“flux”: “^3.1.0”,

“history”: “^4.4.0”,

“react”: “^15.0.2”,

“react-dom”: “^15.3.2”,

“react-router”: “^3.0.0”,

“redux”: “^3.6.0”,

“redux-thunk”: “^2.1.0”,

“webpack”: “^1.12.9”,

“webpack-dev-server”: “^1.16.2”

“devDependencies”: {

“font-awesome”: “^4.7.0”

“scripts”: {

ReactJS App With Laravel RESTful API Endpoint Part 1