*** Upgrade edocr to protect & index your documents for only 83 cents per month! ***
Learn More
Publishing documents on edocr is a proven way to start demand generation for your products and services. Thousands of professionals and businesses publish marketing (brochures, data sheets, press releases, white papers and case studies), sales (slides, price lists and pro-forma agreements), operations (specifications, operating manuals, installation guides), customer service (user manuals) and financial (annual reports and financial statements) documents making it easier for prospects and customers to find content, helping them to make informed decisions. #SEO #leadgen #content #analytics
I am an accomplished content marketing professional helping you to build your brand and business. In my current role, I fulfill a multi-faceted solution marketplace including: publishing and sharing your content, embedding a document viewer on your website, improving your content’s search engine optimization, generating leads with gated content and earning money by selling your documents. I gobble up documents, storing them for safekeeping and releasing the text for excellent search engine optimization, lead generation and earned income.
Publishing documents on edocr.com is a proven way to start demand generation for your products and services. Thousands of professionals and businesses publish marketing, sales, operations, customer service and financial documents making it easier for prospects and customers to find content, helping them to make informed decisions.
React.js is a JavaScript library that was created by Facebook. It is often thought of as the “view” in a model-view-controller (MVC) user interface. This makes sense when you consider the fact that the only function that must be implemented in React is the “render” function. The render function provides the output that the user sees (the “view”).
Let’s take a look at why you may want to use React and how to set up a basic interface. Download the source code You can download all of the files associated with this tutorial from here. Learn React online If you are keen to learn React from the ground-up feel free to check Learn and Understand React JS on Zenva Academy which covers all the basics + lots of bonus topics like React Router and Flux. Tutorial requirements ● This tutorial assumes that you have at least a beginner’s grasp of HTML and JavaScript. ● You will need to download the React library if you want to go beyond the testing phase. We show you how to get around this during testing. ● You will need a text editor of some sort. Notepad++ is popular for those on Windows machines, and TextMate is popular on a Mac. Editors that highlight code are preferable. ● Normally, you would incorporate React into a larger application. If you want to test the basic code with external data files at the end of the tutorial, you will need to use a local or remote web server to get the page to work. MAMP is popular on Mac, and WAMP is most common on Windows machines. You can also use a lightweight Mongoose web server, or Python’s HTTP server. Many people use React with Node.js, so you can also use a Node.js server. The React library download page (above) also includes a server and other options.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
Both the download pages go into detail on the various ways to download, install, and serve React in various formats, but we’re going to stick with this most basic option so we can focus on learning how to code with the React library itself. It’s a good idea to have the React API open while you work for reference.
From there, we create an index.html file, and a main.js file. I’ve also included a css file for basic styling:
In order to get around using a server while testing, I’m calling the React.js, react-dom.js, and the browser.min.js babel-core files from the CDN. You wouldn’t want to do this in production. The babel-core file allows us to use JSX, and the script type must be “text/babel” in order for it to work properly. Our main JavaScript code goes in main.js, and that’s where it all starts.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
JSX is not required, but consider the difference between two very simple statements. The following statement is created without JSX:
The following is with JSX:
As you can see, the JSX code is much easier to read. Now that we have a basic understanding of what our output syntax will look like, let’s dig in and learn the building blocks of React. Understanding React components React is based on components and states. This is what makes React such a popular library. When you want to create an application, you usually break it into simpler parts. When programming with React, you will want to break your interface into its most basic parts, and those will be your React components.
Components are wonderful because they are modular and reusable. You can take a basic component used in one area of an application and reuse it in others without having to duplicate code. This helps to speed up development.
Components can be nested, so that the most basic components can be grouped into a parent component. For example, if you were to create a home listing interface with React, the top level component would be the home list itself. Within the list, you would have a description of a single home. Within the home component, you would have the address of the home, as well as other small components such as a photo, perhaps a favorite or save button, and a link to view details and a map.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
Now let’s see how this information can be updated when it changes.
React component states Component states are what give React its name. Any time a component’s state changes, its “render” function is called, updating the output. In essence, each component “reacts” to changes, which is handy for any user interface. Data stored in a state should be information that will be updated by the component’s event handlers (changes that should update in real time as the interface is being used).
If we were to have a home listing, any number of things may change in the database. New photos could be added, and a home can be bought and sold. You wouldn’t necessarily want any of these things to update in real time in the interface.
One thing that may change very quickly, however, would be the number of times a home is saved (or favorited or liked) by a user. The little component that displays the number of saves
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
You may notice a naming convention right away. Most element names start with a lowercase letter, followed by capitalization. The names of React classes, however, begin with an uppercase letter. We then have the React.createClass() function, which creates our component.
The render method is that most-important method that produces the actual output, and is normally placed last in the component. As you can see, the output depends on the value of two states: saved and numSaves. Here’s what the output will look like when the user has saved the home:
And when they have not saved the home:
Just don’t include computed data in a state. What that means in this case is that, while you want to update the number of saves in the state when the Save button is clicked, you don’t want to save the following in the state:
Save the addition of the string for the render function. All we want to save in the state is the data that gets updated by the component’s event handler, and that is simply the number of favorites.
You can also see JSX at work in the render method. The return value (just don’t forget the parentheses around the return output!) appears to be just regular HTML right within your JavaScript code! Well, not exactly. JSX is JavaScript, so the “class” attribute is discouraged. Instead, use “className.” In addition, JavaScript expressions used as attribute values must be enclosed in curly braces rather than quotes.
Because we are dealing with states, we need to set an initial state so that the state variables will always be available in the render method without errors. This is why we use the getInitialState() method at the top of the component.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
Let’s look at the rest of this basic example. Taking into account the proper use of props and states, you may notice that there are some problems with this code:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
Normally, the HomeListing tag would include attributes that tell the component where to grab data, such as the location of a file URL. These attributes would be called using props. For now, we will focus on other props within our nested components. The HomeListing component in this example consists only of a render function, which calls on a nested component called “Home.” The call to Home contains all the attributes needed to describe the home listing, with JavaScript attribute values (including raw numbers, as well as true and false values) in curly braces.
The Home component is where we see our first use of props. Basically, any custom attribute sent through when calling a child component may be accessed through this.props. The most unique of these is this.props.children. The “children” property accesses whatever was included within the opening and closing tags of the call to the component (not including the attributes).
Notice in the call to the Home component that we include a “key” attribute, as well as an “id” attribute with the same value. The key is used internally by React, and is not available as a prop. It allows React to keep track of components that may be shuffled or removed. Since we also need some sort of id for our application, we pass in a second “id” attribute with the same value, which may be used as a prop.
Most of our output is displayed directly at the Home level, but we also call on two more children components: Photo and Saves. Photo doesn’t really need to be a child component in this instance, but it’s common for photos to have special features, which could be included in the future. Because it’s so small, it uses special syntax available to stateless components that have only a render method and nothing else. As you can see, the syntax allows the component to be extremely small and simple. The most important component in this case, however, is the Saves component. First, let’s take a look at our output from this code:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
It pretty much looks like what we want, doesn’t it? Well, not so fast. As you can see from the Saves component (which we discussed above), all the action is happening right here. The output shows that 52 people have saved the home before you. The problem is, how does the application save any new information. How will it “remember” that you saved the home too?
This is where things get just a little more complicated. First of all, you would normally include React as one piece of a larger app that will do all the processing of the data, where data is pulled from a database or file, then saved back to the database or file as the interface is being used. For now, we can hard-code this data as JSON, and show you at what point the data would be saved at the other end.
Organizing your interface
What we need to do is pull data from the top level component, and save data at the top level as well. This is because the total number of saves is being shared with all users. If our application was sharing information that is only relevant to each individual user, we could pull and save data in a child component, because what other people see wouldn’t matter.
Here is our updated code:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
The first difference here is that React.render() calls on the HomeListing component using a few attributes. These attributes are not being used at the moment, because that would require the use of a server of some sort (see the requirements section above for links). You can easily move the homes data to a homes.json file, and the saves data to a saves.json file. Another option is to create some database calls to pull the data, and save the updated data.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
Another change you would probably make when pulling “real” data from a database would be to include whatever key is used to save a home in the database. That key would be used when referencing the homes, as well as the save data for each home. For now, we’re just counting on the JavaScript map method to give us array indexes that line up between the two lists of homes and saves data, simply because the arrays are in the correct order and the same size.
Here is the output of the new JavaScript file:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
You’ll also see that the custom load functions, which include JSON-style data, have a setState() call at the end. Even though we won’t be updating the home data in real time, setting it in a state makes it easier to populate the output with the correct data after the component is loaded. The reason we separate the saves into another state is so that you can comment out the setInterval() call to update only the save data in real time, and nothing else. The interval time can be sent through props, as it is in the call to HomeListing.
Another thing that can be confusing to people is that attributes are not automatically passed down to all the nested children when they are nested more than one level. You’ll see that the function attribute passed to Home must also be passed down to the Saves component, and it can have a completely different name! The same goes for all the other props. Here, we pass the props sent to the Home component down the next level to the Saves component:
Note that the toggleSave() function call could have been passed directly through as another props value, but we can also do as we did here and call a local function first, which then calls the parent function through props. That gives you the ability to make any additional changes.
So now that we have all that sorted out, you should know that each component should be separated out into separate JavaScript files, and organized into a “components” folder. This is for when you have a more complex design, and have a local or remote server running. Then, each component opens its children components using require().
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
React.js is a fantastic user interface primarily library because the user’s view updates automatically when a state changes. This ability to show changes to the user quickly also makes it a good fit for user-facing form errors. React allows you to easily display errors as the form is being filled so the user doesn’t have to fill in the entire form, press the submit button, then try to figure out what they got wrong.
This does not mean React can be used to make a form secure. Hackers can bypass your React form altogether, passing variables directly to the server. You will still have to provide security and additional error-handling on the server side. Using React for error-checking is mainly for making a form easier to use.
We are going to create a simple donation form in our example. The code shows a few places where additional functionality can be added, but we are only going to focus on error-checking in this tutorial. Download the source code You may download all the files associated with this tutorial from here. Tutorial requirements ● You must have beginner’s knowledge of React.js, and at least a beginner’s knowledge of JavaScript. If you need to know the basics, check out the previous chapter. ● You will need to download the React library in order to use React on a server and go beyond the testing phase. We show you how to get around this during testing. ● You will need to download a text editor of some sort. Notepad++ is popular on Windows, and TextMate is popular on Mac machines. An editor that highlights code is preferable. ● In order to use React as part of a full website, it will need to be incorporated into a larger application. When testing the basic code with external data files, you will need to use a local or remote web server in order to get the page to work. MAMP is a good one for the Mac, and WAMP is most the most common server used on Windows machines. For a complete solution, a Node.js server is one of the most popular servers to use with React. The React library download page (above) also includes a server and other options.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
There are all sorts of download options for React, but we’re just going to use React from a CDN. React is available from more than one CDN, but here are the most popular links:
We are going to add a couple more JavaScript files to our index.html file:
The babel-core browser.min.js file allows us to use JSX, which will greatly simplify our code. Please see the previous chapter for more on why React is better with JSX. Since this is a form, we are also including jquery, which will make form submission much easier. We don’t actually make much use of it in the code, other than an example submission function. Lastly, we include the Classnames library, which is a teeny file that makes combining class names easier.
Finally, we call our example.js script, which is where all the action takes place. Just be sure to put “text/babel” in your script type so you can make use of JSX in your code.
Now let’s dig into the code:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
The ReactDOM.render call at the bottom of the code is the first call that starts the app. We use XML-style JSX to call the DonationBox component. This component doesn’t do much at the moment, but provides a few examples of some of the additional things you can do with React besides error-checking. For example, you could show new donations as they are made, polling the server for new ones. I’ve also included some jquery ajax for an example of how the final form submission can be handled.
The real action starts in the DonationForm component:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
As you can see, there are two calls to the TextInput component, but with different variables and validation functions included in the attributes (available as props in the child components). We do this because the text input is a reusable component. All you have to do is enter different attributes depending on the results you would like to see. You could even add an attribute that gives a different error message depending on whether the field contains a number or dollar amount (we show an example of this on a different field).
Each TextInput component gets its own validation function, which can be accessed from the component using this.props.validate(value). The component itself doesn’t care what type of validation is going on. It simply calls validate, and the parent component takes care of which validation function is being called.
I’ve also included a commonValidate function as an example of how you could do some basic validation on all form fields. In this case, we use it with the second TextInput component and return true, because we need the validate prop function to exist, but we don’t actually want to validate the second field.
The Radios component is interesting because we are actually passing all of the possible values through in a simple array. We also have an optional text field for adding user-generated text, which has its own validation.
The rest of the components are specific to this donation form, but are separated into new components in order to simplify the DownationForm component code. Let’s take a deeper look at those now. Creating input fields One component that will be reused in every form field component is an error message. If we want to validate fields as the user enters them, we need to be able to bring up an error message as they are typing. So, let’s start with that:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
This component is very small, but powerful. All we have to do when calling this component is include an error message, and a boolean value that tells the component whether it should be displayed or not. The css file (included in the download) will do the rest.
Now let’s take a look at all of our form field components:
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
The first one is our InputText component. This component includes some validation based on the props sent from the parent. In this case, we show an error message when there are not enough characters, but we show a different message when the field is empty. Both messages were sent as props. All of this validation occurs while the user is typing. This could be annoying for some fields, but it’s a great example of what is possible.
In addition to the local validation, we also call the parent validation function when the user leaves the field (indicating they are finished with it). You could also do all validation in the parent, or just do local validation. There are many options.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from zero to Full-Stack engineer.
Next up is our Radios component. This component actually doesn’t have any validation unless the optional “addAny” prop is set to true. In that case, an extra radio button is added which will display an “anyValue” text field when selected. This text field gets its own validation function, called through the props sent from the parent.
We also have to handle the appearing and disappearing act of the text field. When the “addAny” radio button is clicked, the text field is displayed. When any other option is selected, it’s hidden. We do this with an onClick attribute, but we have to use “bind” in order to send a variable to our handler function. The variable tells the function whether to show or hide the text field.
The validation handler for the text field simply calls the parent validation field, and uses that result to determine whether to show the InputError component.
You’ll notice that some of the code looks a bit wonky because there are keys for even the
