Book Image

ReactJS by Example - Building Modern Web Applications with React

By : Vipul A M
Book Image

ReactJS by Example - Building Modern Web Applications with React

By: Vipul A M

Overview of this book

ReactJS is an open-source JavaScript library that brings the power of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications, and is intended to help developers build large, easily scalable and changing web apps. Starting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux. By the end of this book, you will not only have a good understanding of ReactJS but will also have built your very own responsive frontend applications from scratch.
Table of Contents (20 chapters)
ReactJS by Example - Building Modern Web Applications with React
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

When Shawn meets Mike and ReactJS


It's a bright day at Adequate Consulting. Its' also Shawn's first day at the company. Shawn had joined Adequate to work on its amazing products and also because it uses and develops exciting new technologies.

After onboarding the company, Shelly, the CTO, introduced Shawn to Mike. Mike, a senior developer at Adequate, is a jolly man, who loves exploring new things.

"So Shawn, here's Mike", said Shelly. "He'll be mentoring you as well as pairing with you on development. We follow pair programming, so expect a lot of it with him. He's an excellent help."

With that, Shelly took leave.

"Hey Shawn!" Mike began, "are you all set to begin?"

"Yeah, all set! So what are we working on?"

"Well we are about to start working on an app using https://openlibrary.org/. Open Library is collection of the world's classic literature. It's an open, editable library catalog for all the books. It's an initiative under https://archive.org/ and lists free book titles. We need to build an app to display the most recent changes in the record by Open Library. You can call this the Activities page. Many people contribute to Open Library. We want to display the changes made by these users to the books, addition of new books, edits, and so on, as shown in the following screenshot:

"Oh nice! What are we using to build it?"

"Open Library provides us with a neat REST API that we can consume to fetch the data. We are just going to build a simple page that displays the fetched data and format it for display. I've been experimenting and using ReactJS for this. Have you used it before?"

"Nope. However, I have heard about it. Isn't it the one from Facebook and Instagram?"

"That's right. It's an amazing way to define our UI. As the app isn't going to have much of logic on the server or perform any display, it is an easy option to use it."

"As you've not used it before, let me provide you a quick introduction."

"Have you tried services such as JSBin and JSFiddle before?"

"No, but I have seen them."

"Cool. We'll be using one of these, therefore, we don't need anything set up on our machines to start with."

"Let's try on your machine", Mike instructed. "Fire up http://jsbin.com/?html,output"

"You should see something similar to the tabs and panes to code on and their output in adjacent pane."

"Go ahead and make sure that the HTML, JavaScript, and Output tabs are clicked and you can see three frames for them so that we are able to edit HTML and JS and see the corresponding output."

"That's nice."

"Yeah, good thing about this is that you don't need to perform any setups. Did you notice the Auto-run JS option? Make sure its selected. This option causes JSBin to reload our code and see its output so that we don't need to keep saying Run with JS to execute and see its output."

"Ok."