React Router v4 – David Kerr – Medium

“React Router v4” by @dkerrious  #reactjs #React #javascript #coding

  • npm install react-router react-router-dom — savePopular patterns for prior versions of React Router have a routes.js file to centrally managing the routing depending on the path, but in my opinion, this is no longer necessary.
  • In my root React component, which I am calling App.js, I can select which specific components to display depending on the path.import React, { Component } from ‘react’;import { BrowserRouter as Router, Route } from ‘react-router-dom’;import Header from “.
  • /components/Footer”;class App extends Component { constructor() { super(); this.state = { stuff: stuff; }; }render() { let { stuff } = this.state; return ( Router //wrapper for your router, given alias from BrowserRouter div className=”App” Header / //this component will always be visible because it is outside of a specific…
  • To do this, you need to use the alternative syntax to link a component to a given route.Route path=”/dashboard” component={()=Dashboard stuff={stuff} /}/As someone who prefers to manage state as close as possible to the root React component, I prefer the second approach.
  • Depending on your specific use case, you might find one more practical than the another.The final basic react-router feature I will point out is the Link method.import { Link } from ‘react-router-dom’;…Link to=”/home”Home/LinkThis replaces a href=””/a whenever you want to navigate within your application.React Router is as complex or as…

As with any new technology, resources and documentation online lack for using the new version of React Router. The goal of this article is to show and explain a basic implementation of React Router…
Continue reading “React Router v4 – David Kerr – Medium”

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: action.payload.data.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 { this.props.users.map((user, index) = { return ( tr key={index+1} td{user.fullname}/td td{user.email}/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”

React Router v4 – David Kerr – Medium

React Router v4  #javascript #react #reactrouter #reactjs

  • npm install react-router react-router-dom — savePopular patterns for prior versions of React Router have a routes.js file to centrally managing the routing depending on the path, but in my opinion, this is no longer necessary.
  • In my root React component, which I am calling App.js, I can select which specific components to display depending on the path.import React, { Component } from ‘react’;import { BrowserRouter as Router, Route } from ‘react-router-dom’;import Header from “.
  • /components/Footer”;class App extends Component { constructor() { super(); this.state = { stuff: stuff; }; }render() { let { stuff } = this.state; return ( Router //wrapper for your router, given alias from BrowserRouter div className=”App” Header / //this component will always be visible because it is outside of a specific Route Route exact path=”/” component={Home}/ //at the root path, show this component Route path=”/dashboard” component={()=Dashboard stuff={stuff} /}/ //at the path ‘/dashboard’, show this other component Footer / //this is also permanently mounted /div /Router ); }}export default App;There are two ways to link components to routes.
  • To do this, you need to use the alternative syntax to link a component to a given route.Route path=”/dashboard” component={()=Dashboard stuff={stuff} /}/As someone who prefers to manage state as close as possible to the root React component, I prefer the second approach.
  • Depending on your specific use case, you might find one more practical than the another.The final basic react-router feature I will point out is the Link method.import { Link } from ‘react-router-dom’;…Link to=”/home”Home/LinkThis replaces a href=””/a whenever you want to navigate within your application.React Router is as complex or as simple as you want to make it.

As with any new technology, resources and documentation online lack for using the new version of React Router. The goal of this article is to show and explain a basic implementation of React Router…
Continue reading “React Router v4 – David Kerr – Medium”