In WordPress themes – there is the “The Loop“, where it’s a “catch all” for all of the post content at a given query. This may be a page, a post or a series of posts. It all goes to “The Loop“, where inside that loop – are methods that make retrieving post data easy. Inside the loop, we can do something like “get_the_ID()” or “the_title()” – which will output the post id or its title.

We’re trying to achieve the same thing in Barebones. We have “TheLoop” component – which we’ll be adding in our “partials” directory. This component will be used everywhere – in single posts, pages or archive pages such as search etc.

Previously, we were just outputting the slug in TheLoop. The modified version is shown below.

import React from 'react';
import WithConsumer from '../context/WithConsumer';
import ThePost from './ThePost';
const TheLoop = ({ context }) => {
    const posts = () => context.posts;
    const pos = posts();
    let results = '';
    if(context.appError){
      results = <div className="app-error">{context.appError}</div>;
    }else{
      if(pos.length === 0){
        results = <div className="no-results">no results</div>;
      }else{
        results = pos.map(function(item,i){
             return <ThePost key={i} index={i}></ThePost>
           })
      }
    }
    return (results);
};
export default WithConsumer(TheLoop);

There’s really not a lot going on. We are simply isolating the “loop” logic in this component. So we don’t have to do the same elsewhere. But the key points to see is we’re getting the results from our Context. And depending on the count of the result, if there’s more than 0, we – return the “ThePost” component (more on this later).

If there’s no results – we simply return a div with the text “no results”.

If there’s an error – return the error message.

ThePost

ThePost component has all of the methods necessary to output the post data. This resembles WP’s “the_post()” in PHP. In here, we have access to the context.posts, filtered by the index. The index is a prop that we pass coming from TheLoop. So now, each item is a post:

const ThePost = ({index,context}) => {
    const posts = () => context.posts;
    const item = posts()[index];
    let linkPrefix = item.type === 'page' ? '/page/' : '/post/';
    let theContent = '';
    switch(context.route){
        case '/': //if homepage,
        case '/search/:term': //or if search
        case '/category/:catid': //or if search
            theContent = item.excerpt.rendered; //show excerpt only
        break;
        default: //for single, pages - show entire content
            theContent = item.content.rendered;
        break;
    }
    return (
        <div id={'post-id-'+item.id} className={'post-item'}>
            <h1><Link to={linkPrefix+item.slug}>{item.title.rendered}</Link></h1>
            <PostMeta index={index}></PostMeta>
            <div className="post-content" dangerouslySetInnerHTML={{__html:theContent}}></div>
        </div>);
};

We have to determine if its a “post” or a “page” (line 6). This will match with the post/page route in our index.js.

Then we have a switch statement, that checks the route. If its an archive page (like search, category) – let’s output only the content excerpt. Otherwise – if its a single, let’s output the entire thing.

The PostMeta component is also a new component that we haven’t built yet. Let’s add that in a little bit. For now, let’s grab the data.

Context.js

Now there are a few things we need to do to our Context component for the loop to work. Remember in our loop, we’ve setup up the links using “Link to”. We need to map these links to right REST url endpoint – so we can get the right data and put it in the right data store.

Remember, all of the data is inside this one file. May it be posts, comments – even methods that manipulate this data is in this component. So this file is extremely important.

Let’s start by adding the containers for our state. In the constructor, add the following:

constructor(props) {
    super(props);
    let restType = this.getRestType(props.router.match.path);
    let route = props.router.match.path;
    let slug = props.router.match.params.slug ? props.router.match.params.slug : '';
    this.state = {
      slug : slug,
      restType : restType,
      route : route,
      posts : []
    };
  }

Our state now has the necessary containers for the data we need. Primarily the “posts” array is what we aim to fill. Let’s add some actions in our lifecycle hook: componentDidMount:

componentDidMount(){
    this.getPosts(this.buildUrl());
}

Let’s build a couple of functions – one to build the REST url endpoint, and the other to fetch the posts:

buildUrl(){
    let url = '/wp-json/wp/v2/';
    switch(this.state.restType){
      case 'page':
        url += 'pages/?slug=' + this.state.slug
      break;
      case 'post':
      default:
        url += 'posts/?slug=' + this.state.slug ;
        break;
    }
    return url;
  }
 getPosts (url){
    let self = this;
    Axios.get(url).then((response)=>{
      self.setState({
        posts : response.data
    }).catch(function(error){
      console.log(error);
      self.appError = 'An unexpected error occurred';
    });
  }

That should set our post and page endpoints, bringing back data from the API. Make sure that TheLoop is in your Archive and Single components.

And if all is good, we should have something like below:

Remember that we have to change our permalinks in WordPress to match our route.

Add Paging

Paging is necessary especially for archive pages. You only want to see the latest X number of posts, then show the next X – and so on.

In Archive.js – simply add the pager component (that we still have to build), right underneath the loop:

 <TheLoop></TheLoop>
 <Pager></Pager>

Now let’s create a file in our partials folder – call it Pager.js.

import React, { useEffect } from 'react';
import WithConsumer from '../context/WithConsumer';
const Pager = function ({context}){
    let prevBtn =  React.createRef();
    let nextBtn =  React.createRef();
    let curPage = () => context.currentPage;
    let totalPages = () => context.totalPages;
    useEffect(() => {
        prevBtn.current.disabled = true;
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);
    function nextClicked(){
        context.nextClicked();
        if(parseInt(totalPages()) === parseInt(curPage() + 1) ){
            nextBtn.current.disabled = true;
        }
        prevBtn.current.disabled = false;
    }
    function previousClicked(){
        context.previousClicked();
        if(parseInt(curPage()-1) === 1 ){
            prevBtn.current.disabled = true;
        }
        nextBtn.current.disabled = false;
    }
    function pagerClass(){
        let cls = 'Pager';
        if(parseInt(totalPages()) <=1 ||
            context.appError){
            cls = 'Pager hidden';
        }
        return cls;
    }
    return (
        <div className={pagerClass()}>
        <button ref={prevBtn} onClick={previousClicked}>Previous</button>
        <button ref={nextBtn} onClick={nextClicked}>Next</button>
        <div className="PagerText">Page
            <span dangerouslySetInnerHTML={{__html: curPage()}}></span> of
            <span dangerouslySetInnerHTML={{__html: totalPages()}}></span></div>
        </div>
    )
}
export default WithConsumer(Pager);

Now the pager logic is a little more involved. Above simply outputs our “Next” and “Previous” buttons – depending on the number of pages. Fortunately, WordPress’s API makes this easy for us. We have 2 important header properties from each response called ” X-WP-Total” and ” X-WP-TotalPages”. From this we can determine the logic needed for our paging.

Going back to context, we need to modify our state, add some methods that modify that state, as well as modify our rest calls.

//ADD THIS TO this.state IN THE CONSTRUCTOR
currentPage : 1,
totalPages : 0,
nextClicked : this.nextClicked.bind(this),
previousClicked : this.previousClicked.bind(this), 

Above shows our new state. Note that currentPage always starts at 1. Totalpages – we update on every call, then we bind 2 methods to “this”.

Next, let’s add modify our buildUrl() method to have the page parameters from our state.

 case 'post':
      default:
        url += this.state.slug ? 'posts/?slug=' + this.state.slug : 'posts/?page=' + this.state.currentPage;
        break;    

Above simply appends the current page to the url endpoint. In our getPosts() method, we update our totalPages in state with each response:

Axios.get(url).then((response)=>{
      self.setState({
        posts : response.data,
        totalPages : response.headers['x-wp-totalpages']
      }

Now all we need to do is create two functions – which correspond to which button was clicked:

  nextClicked (){
    let newPage = this.state.currentPage + 1;
    this.setState({
      currentPage : newPage
    },function(){
      this.getPosts(this.buildUrl());
    })
  }
  previousClicked (){
    let newPage = this.state.currentPage - 1;
    this.setState({
      currentPage : newPage
    },function(){
      this.getPosts(this.buildUrl());
    })
  }

Both of these methods are called from our Pager component – which we access by doing context.XXXClicked(). Pretty neat right?

We also let the front end decide whether to show or hide the respective buttons. So if all goes well, we have something like below:

Okay that should be it for this round. A lot going on above. I suggest you download the code and run it yourself – along with following the steps. Note there are a lot of omitted code above. Only the important steps are outlined – the rest is up to you.

The post Let’s build a WordPress theme with React: Part 3 (The Loop) appeared first on Michael Soriano.

Now that we have our react app setup, let’s form how our application will be structured. We’re going to need 3 main folders: 1) templates, 2) partials and 3) context. These are all going to be inside react-src/src folder.

The templates folder is where we’re going to store the main files template files – namely Single.js and Archive.js. Single shows a single post, while Archive shows a running list of post in reverse chronological order.

The partials contain bits and pieces of reusable parts. These are files that make up the header, navigaition, pagination and the loop.

The context is where the data sits. We’re going to have two files in here – Context.js and WithConsumer.js. These files are what we need to store state and props. More on this later.

Also, don’t forget that we have our public folder (which is outside the src directory). This contains all the regular PHP files such as functions.php etc.

Routes

Let’s begin by adding a simple route. Make sure we’re in development mode by running:

npm run wpstart

Let’s create a new component called “Single”. Inside it, let’s start simple and put in the code below:

import React from 'react';
const Single = (props) => {
    return (
        <div className="Post">
            this is the page component
        </div>
    )
}
export default Single;

Pretty basic right? Now let’s install react router by running the command below:

npm install react-router-dom

Open up index.js and include react router in it

import { BrowserRouter, Switch, Route } from 'react-router-dom';

Inside the render function, let’s modify it to look like this:

ReactDOM.render(
<BrowserRouter>
    <Switch>
     <Route path='/page' component={Single}/>
    </Switch>
  </BrowserRouter>, document.getElementById('root'));

Now navigate to your site, but append the path “/page”. You should see your page component rendered.

Now let’s go back to index.js and modify the Route to look like below:

<Route path="/page/:slug" component={Single} />    

Notice we’re adding a :slug to the path. We’re going to be updating our component with this parameter. The slug will be the actual “slug” of the WordPress post. If you modify our page component with:

<h1>this is the slug: {props.match.params.slug}</h1>

You should see something like below:

So by now, you should see how we’re going to continue with our theme. We’re going to be adding the following routes:

• Home – mapped to “Archive”
• Page + slug – mapped to “Single”
• Post + slug – mapped to “Single”
• Search + term – mapped to “Archive”
• 404 – mapped to “404”

Go ahead and copy the Single component, duplicate it – and call it “Archive”. Then let’s match it to the routes above.

Our index.js now looks like below:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'
import './index.css';
import Archive from './templates/Archive';
import Single from './templates/Single';
import Notfound from './templates/Notfound';
const routes = (
    <Router>
      <Switch>
           <Route exact path="/" component={Archive} />
           <Route path="/page/:slug" component={Single} />
           <Route path="/post/:slug" component={Single} />
           <Route path="/search/:term" component={Archive} />
           <Route component={Notfound} />
      </Switch>
    </Router>
  )
ReactDOM.render(routes, document.getElementById('root'));

Partials

Let’s quickly talk about our partials. Partials are components that we will be reusing in each route component. Things that come to mind are header, footer, sidebar – and whichever reusable piece of code we will come across along the way.

Let’s go ahead and create 2 partials. Head.js and Foot.js. These will be the header and footer of our pages. The code will be a simple functional component like below:

/******Head.js*************/
import React from 'react'
function Head(){
    return (<div className="header">header</div>)
}
export default Head;
/******Foot.js*************/
import React from 'react'
function Foot(){
    return (<div className="footer">footer</div>)
}
export default Foot;

Now in our template components, simply import, and add the components in. Here is the how our Single.js will look like with the partials. Note – make sure you add them inside the main div:

import React from 'react'
import Head from '../partials/Head';
import Foot from '../partials/Foot';
const Single = (props) => {
    return (
        <div className="Post">
            <Head></Head>
            <h1>Home</h1>
            <Foot></Foot>
        </div>
    )
}
export default Single

In the browser, you will see our partials and home page starting to take shape. Inspect the code and it should look like below:

Do the same thing to the rest of our main components so they all share the same header and footer.

Context (Data)

As mentioned above, this is where our data will sit. React has Context API which allows you to have a centralized data store – so that you don’t have to pass data through each child component. This article is probably the best explanation on Context API. As a matter of fact, the two files that we’re going to build, is code that came from the article.

Let’s start with Context.js. This file is considered to be the “Provider“. Add the code below:

import React from "react";
const storeContext = React.createContext();
export const Consumer = storeContext.Consumer;
export class Provider extends React.Component {
  constructor(props) {
    super(props);
     this.state = {
      posts : []
    };
  }
 componentDidMount(){
    this.setState({
       posts : ['title','title2']
    })
 }
 componentDidUpdate(prevProps){
    //more code here later...
 }
 render() {
    return (
      <storeContext.Provider value={this.state}>
        {this.props.children}
      </storeContext.Provider>
    );
  }
} 

Don’t worry so much about the test posts data. We’re just using that for – well, testing. Then let’s create WithConsumer.js

import React from "react";
import { Consumer } from "./Context";
function WithConsumer(WrappedComponent) {
  return function(props) {
    return (
      <Consumer>
        {ctx => <WrappedComponent {...props} context={ctx} />}
      </Consumer>
    );
  };
}
export default WithConsumer;

Now this one is pretty confusing. It’s basically a wrapper – for our components that require the “Consumer” component. Basically, all our components that want to “consume” data from our “Provider” will be using this file.

Now let’s create a partial called “TheLoop“. Add the code below:

import React from 'react';
import WithConsumer from '../context/WithConsumer';
const TheLoop = ({ context }) => {
    const posts = () => context.posts;
    const pos = posts();
    return (
       pos.map(function(item,i){
         return <div key={i}>{item}</div>
       })
    );
};
export default WithConsumer(TheLoop);

Notice that in our export – we’re passing our component TheLoop as a parameter to WithConsumer.

We’re going to talk more in detail about TheLoop component in our next session. For now, we just want to get it up and running – to demonstrate Context and Consumer.

Let’s open Single.js from our templates folder and modify it to look like this:

import React from 'react';
import Head from '../partials/Head';
import TheLoop from '../partials/TheLoop';
import Foot from '../partials/Foot';
import {Provider} from '../context/Context'
const Single = (props) => {
  return (
    <Provider>
    <div className="Post">
      <Head></Head>
      <TheLoop></TheLoop>
      <Foot></Foot>
    </div>
    </Provider>
  )
}
export default Single

You see how we’re wrapping everything in “<Provider>“, this is so we have access to our Context.js data. Also, we’ve included “TheLoop” as a component in between Head and Foot.

You should see “title” and “title2” in the browser by now.

Lastly, we need a way to get our “slug” parameter into our context. We can use props for that. Still in Single.js, pass the slug via props like so:

<Provider router={props}>

In Context.js, we should have access to the slug – through “props.router.match.params.slug“. As a matter of fact, we have access to the entire router object here, in a prop called “router”.

Let’s stop here for now. We are going to discuss more about TheLoop and Axios in our next session.

The post Let’s build a WordPress theme with React: Part 2 (Routes + Context) appeared first on Michael Soriano.

I specifically wanted to use React for the front end. React is Facebook’s product, and per their website: React is a library for building user interfaces. It has a very broad user base and lots of modules available, which makes it ideal for our theme. In conjunction, we’re using create-react-wptheme – which will make our theme up and running with React in no time. And of course, WP Rest API for the backend.

Note that this tutorial is geared towards PHP or WordPress developers – who are looking to get started working with Single Page Applications with React.

This will be the first of a series of posts:

• Part 1 – Setup
• Part 2 – Routes + Context
• Part 3 – The Loop

The theme we’re going to build throughout this series is more of a starter theme. We’re calling it “barebones” and it contains just the right amount of functionality for a basic WordPress theme.

We will need the following to get started:

• nodejs + npm
• git bash (or terminal)
• local WordPress installation

create-react-wptheme

Let’s talk briefly about create-react-wptheme. The goal is to get us bootstrapped with a new React based WordPress theme with a few commands. If any of you are familiar with create-react-app, its basically the same functionality – but for WordPress. One primary difference is that it uses WordPress (not webpack), as the development server. This makes development consolidated in one – front end and back end.

In addition, since it’s a WordPress theme, you have access to all the core functions, filters, actions, hooks etc. Also, you can use WordPress’ nonce for authenticated requests. Lastly, if you must use plain PHP – say only for a specific page, you can still use WordPress’ page templates – which is very handy.

So with that in mind, let’s get started.

First, assuming you have a local WordPress installation, go ahead and start a terminal (git bash) in the themes directory.

In Windows, git bash is a pretty good tool, simply right click and “Git Bash Here”. This will launch the terminal, where we can start our installation. Type in the command below:

npx create-react-wptheme barebones

Note that “barebones” is the name of our theme. You can simply replace this with a theme name of your preference.

Once that’s done, you will see a message like above. The installation created a root folder, with a “react-src” directory inside it. Consider the react-src directory as the most important directory because it holds all of your un-compiled code. From this directory – we can build the rest. You’ll see what I mean later.

Note that at this step, our theme is not ready yet.

See, if you look inside wp-admin > themes, you will see “barebones” under the “Broken Themes” section.

This is because we don’t have the necessary files (mainly the styles.css) for it to be a valid theme. Note that we also need index.php, so the we can hold the JavaScript and CSS files together.

wpstart

Let’s go back to our terminal and type the following:

cd barebones/react-src
npm run wpstart

We’re going into our theme directory and inside “react-src” by using the “cd” command, then we run wpstart. This will fix the “Broken Themes” issue, and if we go back to the browser and go in wp-admin > themes themes, you should be able to see our theme.

Now let’s activate the theme by clicking “Activate“. This will tell WordPress to use this theme we just built. Now let’s go and view our site in the browser. You should see a message

“Please restart the Nodejs watcher now… “

What this means is that we have to run wpstart a second time, for the script finish setting things up. Let’s go back to git bash and do a “CTRL + C”. Then type in:

npm run wpstart

Now, once this is done, a new browser tab should have opened automatically and looks like below:

It may not look like much, but this tells us a lot. This page indicates that we’ve just successfully installed our React theme. This includes the PHP, CSS and JavaScript files, plus all the resources to run our React application. So well done!

Note: wpstart is for “dev” mode.

From this point onward, when you’re in wpstart mode, (when you do npm run wpstart) that means you are in development mode. What this means is that anytime you change something in the react-src directory, the files will get recompiled and placed in the proper places. Any changes will also cause your browser to refresh – so you see your changes instantly.

Do Not Edit the files in ROOT

The files in the root folder (outside of react-src), is the compiled version of your code that is needed for WordPress and React to run. You shouldn’t edit anything in here because as soon as you save files in react-src – the files in the root will be replaced with the new. So anything you change here will get OVERWRITTEN.

File Structure

Let’s take a quick look at at the file structure for it’s important to know what it is and how create-react-wptheme use it. In a regular WordPress theme, all we really need are the PHP (such as header, footer) and CSS.

In our new theme, it looks something like below:

As you can see, there is none of the familiar files you would expect in a WP theme. Remember we’re building an SPA – which will all be in JavaScript.

As mentioned previously, inside react-src are the uncompiled and “editable” version of your code. Everything else (the root and static folder) are the output of what you have in react-src. Take note of that text file that’s titled !DO_NOT_EDIT_THESE_FILES!.txt. Remember what I said about not editing files in the root?

The “public” folder

The author of create-react-wptheme saved a special folder for our non-react files called “public”. Whatever you add in this folder, gets copied directly to the root. So, things like functions.php, or page templates – even CSS or JS can be dumped in here – and it will get copied into the root at compile time.

Again, this folder can be extremely helpful – especially for developers who would still like to access core functionality such as hooks, filters, actions etc.

Also, index.php – will only get loaded once, and is the entry way for your React application. The goal is, once loaded, all interactions will be through the REST api. So whatever PHP has produced in index.php will stay the same all throughout your application (except PHP page templates).

The “build” folder

We haven’t covered wpbuild yet, but since we talking about the file structure, you will notice a folder called “build“. This is a special folder that holds the final “deployable” code.

What that means is, almost like the contents of the “root” folder, but compressed, minified and optimized for production. Also, it doesn’t contain any dev files (such as react-src).

This brings us to the last section: wpbuild:

wpbuild

So let’s get back to git bash and do CTRL + C. Type in the following command:

npm run wpbuild

You will see messaging that looks something like:

This simply shows files that have been created, optimized and placed in the build folder, as well as the root. This means that you see your optimized code right away.

To see how that looks, when you refresh your browser, you will see just a bunch of compressed code like this:

Your WordPress theme’s source code has been flattened, ready for world consumption. Also, take a look at the contents of the root directory:

You notice the absence of the file !DO_NOT_EDIT_THESE_FILES!.txt. That means, that you’ve just run wpbuild and its now in “build” mode.

When you’re ready to go back to making some changes, don’t forget to go back into “dev” mode, by running “npm run wpstart” in the react-src directory.

And there you have it. We have our React application running as a WordPress theme. I’ve created a Github repo for Barebones theme. You can go ahead and fork it for your next project, or stay tuned for more tutorials.

The post Let’s build a WordPress theme with React: Part 1 (Setup) appeared first on Michael Soriano.

We’re also using Boostrap – so the styling of the fields that has an error is already done.

Note that I also have another form validation tutorial using VueJS.

Ready to start? Here’s a sample of what we’ll be building. Start typing in values in the form to the right, and click “Submit”.

As you can see, it validates on “Submit”, not on field change. If you want to learn how to do “instant” validation with React (as you type), see this article.

Let’s start with the boilerplate class with a constructor:

class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      firstname: "",
      email: "",
      errors: []
    };
  }
}

And as you can see, we initialize our state. A property / empty value pair for each of our fields. You see our “errors” array is empty. This is where we’ll stuff our – you guessed it, fields with errors.

Let’s create our markup in the render function of our class:

render() {
    return (
       <form>
          <input
            className={
              this.hasError("firstname")
                ? "form-control is-invalid"
                : "form-control"
            }
            name="firstname"
            value={this.state.firstname}
            onChange={this.handleInputChange}
          />
          <div
            className={
              this.hasError("firstname") ? "inline-errormsg" : "hidden"
            }
          >
            Please enter a value
          </div>
          <button className="btn btn-success" onClick={this.handleSubmit}>
            Submit
          </button>
      </form>
    );
  }
}

I’ve only added 1 input and the submit button for illustration purposes. One key thing to note here is the use of this.hasError() in our markup. For instance, in the input field itself, we’re switching the classes so if there’s a bad value – the field will look like below:

Now, let’s build that hasError method – which is simple:

hasError(key) {
    return this.state.errors.indexOf(key) !== -1;
  }

As you can see, all we’re checking is if the “key” is in the array “errors” that we have in state.

Now let’s move on to the “handleInputChange”. This happens every time we change values in our fields:

 handleInputChange(event) {
    var key = event.target.name;
    var value = event.target.value;
    var obj = {};
    obj[key] = value;
    this.setState(obj);
  }

Note that the function above doesn’t have our validation code. All it does is update our state. Remember, controlled components in React has a unidirectional pattern for the data. Which means that the source of truth is always the state. And this data is immutable until we change it using “setState”. And that’s all we’re doing in handleInputChange().

Let’s create our function when clicking the Submit button:

handleSubmit(event) {
    event.preventDefault();
    let errors = [];
    //firstname
    if (this.state.firstname === "") {
      errors.push("firstname");
    }
    //email
    const expression = /\S+@\S+/;
    let validEmail = expression.test(String(this.state.email).toLowerCase());
    if (!validEmail) {
      errors.push("email");
    }
    this.setState({
      errors: errors
    });
    if (errors.length > 0) {
      return false;
    } else {
      alert("everything good. submit form!");
    }
  }

You see how we start with event.preventDefault(). This is so that the default button behavior is not executed. We simply want to stay on the page and not refresh the page. We then create a local “errors” array (which is always empty upon clicking Submit). This is the array we stuff our errors into when the values of our fields are invalid.

Finally, we stuff that array into our state using setState().

One more thing, let’s bind both functions. We add this to our constructor:

this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

Doing the above will allow us to have access to the “this” keyword in our functions.

And that’s about it. We’ve just validated our fields in React. That wasn’t so bad I suppose. Feel free to check it out in CodeSandbox and leave me comments below.

The post React + Bootstrap – A Simple form validation tutorial appeared first on Michael Soriano.

Having said that, you will see your form HTML riddled with something like:

<input type="text" value={this.state.value} onChange={this.handleChange} />

And in your class, something like:

handleChange(event) {
  this.setState({value: event.target.value});
}

This is to enforce this unidirectional pattern, making the state mutable and can only be changed with “setState”.

This is fine I and all, but working with checkboxes isn’t that straightforward. That’s why I decided to write about it – so I won’t forget.

The Requirement: A very typical scenario is loading a form, with some values preloaded on the fields. So when the user changes the value – it updates the data in the backend.

So let’s build that the “natural” React way:

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
        receiveEmails : '',
        shareMyInfo : '',
    }
  } //end constructor
} //end class

Above we start with standard boilerplate class with a constructor. I have 2 checkboxes (not an array of checkboxes – but 2 separate checkboxes with different names), so I set them up in my initial state.

In the HTML (or render), I add the markup:

 render() {
    return (
    <form>
    Receive Email:
    <input type="checkbox" onChange={this.handleCkboxChange}
        name="receiveEmails" />
    <hr />
    Share My Info:
    <input type="checkbox" onChange={this.handleCkboxChange}
        name="shareMyInfo" />
    </form>
    )
 }

I don’t have a “value” for them because all I need is to send 1 or 0 – as in checked or not. Again, its not the array of checkboxes where its different values stuffed in an array. But I’m sure its going to be the same concept.

You see our “handleCkboxChange” handler, which should have our state change (using setState()). So let’s do that.

But wait, to grab if our checkbox is “checked” or not, we have to use refs. Let’s define that in our constructor:

this.receiveEmailsCkbox = React.createRef();
this.shareMyInfoCkbox = React.createRef();

Now we can use this in our handler like so:

handleCkboxChange(event){
    let refName = event.target.name + "Ckbox";
    let node = this[refName].current;
    let key = event.target.name;
    let obj = {};
    obj[key] = node.checked ? "1" : "";
    this.setState(obj);
  }

You see, we created a generic handler for our check boxes – so we can’t rely on simply grabbing the “event”. We have to concatenate the name to match the refs we created in our constructor. Then we have access to the actual HTML node to see if it’s checked or not.

Finally we update our state with “setState“.

So that’s fine, this works and updates our state. Now to fulfill our requirement above, we have to load our check boxes with a default value. Let’s introduce the life cycle hook called componentDidMount() and stuff new state in there.

componentDidMount (){
    setTimeout(function(){
       this.setState({
           receiveEmails : '1',
           shareMyInfo : '',
       })
    },1000)
}

The componentDidMount() method is a point in time where our markup is added to the page. Its a good spot to do AJAX and call the backend. In our example, we’re simply using setTimeout() for illustration. So you see one should be checked and one isn’t.

So just like in regular HTML, we need to add a “checked” attribute to our checkboxes. Note that we cannot use the “defaultChecked” attribute, because when initialized (in our constructor), the values are empty. So our checkboxes will showup unchecked. So we use the regular “checked“:

 <input type="checkbox"
      defaultChecked={this.state.receiveEmails === "1" ? true : false}
      onChange={this.handleCkboxChange}
      name="receiveEmails"
        />

And there you go, now we have met our requirement of having the checkboxes load with values from our backend, and still kept the React way of doing things.

Checking and unchecking the boxes updates our state – just like it should. If you would like to see the running code, check it out in Codesandbox. Leave your comments below.

The post Checkboxes in React appeared first on Michael Soriano.

I’m using ReactJS for the front end, and ExpressJS for the back. I really like the fact that both ends is written in the same language – so you don’t have to switch context. JavaScript has come a long way – and I must say it has been pretty cool to work with.

The Express Backend

Let’s start with creating the backend. What we’re trying to do is a “mini” API of sorts. Where we can pass in a term, and will bring us results. Express is perfect for our scenario.

I found a couple of good resources that will contain the data that we’ll serve. For the US cities, I found this Gist which has them all, paired with the states their in: https://gist.github.com/Lwdthe1/81818d30d23f012628aac1cdf672627d

But notice that the states are in full form. I like it better when they show the abbreviation. So here is another Gist that does that: https://gist.github.com/mshafrir/2646763

So I create a couple of constants so I can loop through and map them as we during search.

const cityStates = [
    {'city': 'Abbeville', 'state': 'Louisiana'},
    {'city': 'Aberdeen', 'state': 'Maryland'},
    {'city': 'Aberdeen', 'state': 'Mississippi'}
    ...
]
const statesHash = {
    "AL": "Alabama",
    "AK": "Alaska",
    "AS": "American Samoa",
    ...
}

Then we create a function called search – where we accept the request and response from Express. Here we do the query and mapping as shown below:

let search = (req,res)=>{
    let term = req.query.term;
    let result = [];
    cityStates.map((item,index)=>{
        var itemCompare = item.city.toLowerCase().trim();
        var termCompare = term.toLowerCase().trim();
        if(itemCompare.indexOf(termCompare) != -1){
            var out = {};
            out.city = item.city;
            for(hash in statesHash){
                if(statesHash[hash] == item.state){
                    out.state = hash;
                }
            }
            result.push(out);
        }
    })
    res.set({'Content-Type' : 'application/json; charset=UTF-8'});
    res.write(JSON.stringify(result));
    res.end();
}

We return the response object above as a JSON string. Which we can parse easily from our front end. Don’t forget to setup our route in Express:

const express = require('express')
const cities = require('./cities');
express().get('/search-city/', (req, res) => {
    cities.search(req, res);
})

So you see the first parameter in our .get function – is the actual route. This is so that we can do something like below in our endpoint:

/search-city?term=miami

All we need to do is make the “term” dynamic, and we should have different results. Now let’s move forward.

The React Front End

Okay, now we get to the meat of the application. React is a different way of looking at front end development. Everything is inside JavaScript – so there is really no “HTML”. Or at least, no .html files. I’m not going into detail on how that works, I’m just going to assume you know.

Let’s import react and axios.

import React from 'react';
import axios from 'axios';

Axios makes it easy for us to write AJAX calls. Then, let’s create our Form – and its a class component. Let’s call it “Search”. We’re using “Controlled Components” style – which has more flexibility when working with forms.

class Search extends React.Component {
    constructor(props) {
       super(props)
    }
    render (){
        return <form></form>
    }
}

Now that we our form, let’s add our state. We need 2: “near” and “citySuggestions”.

constructor(props) {
   this.state = {
       near : '',
       citySuggestions : []
   };
   this.nearChanged = this.nearChanged.bind(this);
}

Our state “near” – is what we’re putting in our input field. In React’s controlled components, we have to define input field values in state make it the single source of truth. This might be a little cumbersome – especially compared to other frameworks – where you can simply define a “model”.

On top of that, any mutations to the state has to be done through a handler. So let’s create that now:

nearChanged(event){
        var self = this;
        var val = event.target.value;
        this.setState({near:val});
        if(val.length > 3){
            axios.get(EXPRESSURL+'/search-city?term='+val)
               .then(function (response) {
                   self.setState({
                      citySuggestions : response.data
                   })
                })
                .catch(function (error) {
                   console.log(error);
                })
        }else{
            self.setState({
                citySuggestions : []
            })
        }
    }

So our nearChanged function is what mutates our “citySuggestions” state. And this is done through an AJAX call to our Express server. We’re also waiting until the length of the entered text is more than 3 – for a more valid search term. Otherwise, we set the citySuggestions to an empty array.

Now let’s add the actual field inside our form, including and binging onChange and other attributes.

render (){
        return <form>
                    <input
                        name="near"
                        type="text"
                        value={this.state.near}
                        autoComplete="off"
                        onChange={this.nearChanged}
                        >
                    </input>
                    {this.citySuggest()}
                </form>
    }

We also added “this.citySuggest()” above – which is simply a function that return an un-ordered list of items. These items are the suggestions that came back from our AJAX call. Let’s move on to the actual function:

citySuggest(){
     var self = this;
     return (<ul className="citySuggest">
           {this.state.citySuggestions.map(function(item,index){
           return <li onClick={self.cityClicked.bind(self,index)}
                    key={index}>{item.city}</li>
                    })}
              </ul>)
    }

Each list item is simply mapped to each states “citySuggestions”. Also, we have attached a listener to it when it’s clicked. We call this event “cityClicked”. Notice that we use .bind(self,index), where “self” is really “this” – which we need inside our class to use, and “index” is to know which one is actually clicked.

 cityClicked(index){
        var ct = this.state.citySuggestions[index].city;
        var st = this.state.citySuggestions[index].state;
        this.setState({
            citySuggestions : [],
            near : ct + ', ' + st
        })
    }

Our cityClicked() function is quite simple. We simply look for the which citySuggestions item was clicked by the “index” that was passed. It’s actually in this function that we set specific values – such as hidden fields etc. But for now – we’re setting the “near” state as well. This is so our input field will reflect what was clicked from the list.

.citySuggest {
    background: #fff;
    position: fixed;
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(0,0,0,.23);
}
.citySuggest li {
    padding: 10px 15px;
}
.citySuggest li:hover {
    background:#ebebeb;
    cursor: pointer;
}

I added very minimal styling – which I’ll leave open to your taste. But for now, that’s a working input field.

Leave your thoughts below.

The post How to build an auto-suggest field using React and Express appeared first on Michael Soriano.

The Main Component

Let’s start with the main component that wraps the whole application inside of it. In React, all you need is a “render” method, inside of a “class”. This render method is in charge of outputting this “component” in the DOM:

var MyData = React.createClass({
 render : function(){
      return (

code above was cut short – due to problems with my sytnax highlighter plugin
As you can see above, I have two child components: “MyDataIntro ” and “MyDataResults”.
Real quick: the “attributes” of the component is actually “this.props” – which is an object in React components by default. The values for the props are passed on over by “this.state” – which is also an object in React by default. The difference is one is mutable and the other is immutable. Let’s get into this conversation another time as well.
Okay, so now we have our main component, with child components. “MyDataIntro” is good since it doesn’t have any children. “MyDataResults” however, has kids – passed on over through “this.state.sections”.
Note that “this.state.sections” is a JavaScript object that looks something like:

sections : {
   parentName : {
    property : value,
    property : value,
    childrenName : {
      property : value,
      property : value,
    }
   }
}

So you see that we have to go through each section and output it’s contents – according to the object above. Next, let’s look at our “MyDataResults”:

The Sections and child Components

“MyDataResults” will look something like below. Note that inside the “render” method is a lot of activity. First, I’m accessing the properties from the parent through “this.props”. Then we make a local array, so we can stuff the contents of “this.props” inside of it.
Note that this “output” array is built using the “.map()” method which makes it possible to run a function on each element of our original array. In our case, we’re simply returning an HTML block – with values in it.

var MyDataResults = React.createClass({
  render : function(){
    var sections = this.props.sections;
    var output = [];
    var output = Object.keys(sections).map(function (key){
        return (

code above was cut short – due to problems with my sytnax highlighter plugin
I want you to notice one thing inside our “section” though – it’s another component! We have “MyDataResultsChildren” component stuffed inside our output HTML, with this.props called children – and we’re passing some content of our original JavaScript object “sections”.
Another thing that you can’t miss is the “key” property that we’re assigning to each “section”. So React needs a way to identify each of the child in the array we’re outputting. In our case each “section” inside our HTML. You will get a warning that looks like below:

The solution is to simply pass a unique identifier for each item in the array. An iterator or an ID – simply assign it to a “key” attribute.
The return statement of our “render()” function simply spits out the wrapping “DIV”, with our “{output}” inside it. Let’s look at our child component: “MyDataResultsChildren”.

var MyDataResultsChildren = React.createClass({
  render : function(){
      var children = this.props.children;
      var output = children.map(function(child){
          return (

code above was cut short – due to problems with my sytnax highlighter plugin
So our “MyDataResultsChildren” component is a simple one. Again, we’re accessing the contents through “this.props”, while we’re using “.map()” to build the HTML – before passing it to the main return function of the “render()” method.
So another thing to watch out for: manipulating React data – such as doing an in-place sort, will cause a “Component’s children should not be mutated.” warning:

The solution is to manipulate the data before handing it over to React. In my case, I had to do the .sort on the array – before assigning to this.props.

More React?

So I’ve just shown you how to do multiple nested components in React. This is as simple as it gets and I hope to write some more as I dive deeper into this awesome library. For more information with React other than their docs, visit this guy: Mindspace and watch his videos in React – it’s really well written. I also really like is this one: React.js Introduction, for People who use jQuery. This will show you the differences between building apps the jQuery way vs the React way.
Leave your comments below on questions or remarks you may have.

The post Learning React.js – Looping through multiple nested components appeared first on Michael Soriano.