SurviveJS – React

Availability

Although you can read the book online for free, you can also purchase it in a copy to support the development of the content. See also consulting for other available options.

• Leanpub (digital, always up to date with the site)↗

Table of contents

1. Introduction Front-end development moves forward fast. A good indication of this is the pace at which new technologies appear to the scene. React is one of these recent newcomers. Even though the technology itself is simple, there's a lot going on around it. The purpose of this book is to help you get started …
2. Getting Started React, despite being a young library, has had a significant impact on the front-end development community. It introduced concepts, such as the virtual DOM, and made the community understand the power of components. Its component oriented design approach works well for the web. But React isn't limit…
3. Introduction to React Facebook's React has changed the way we think about web applications and user interface development. Due to its design, you can use it beyond web. A feature known as the Virtual DOM enables this. In this chapter we'll go through some of the basic ideas behind the library so you understand React a …
4. Setting Up the Project To make it easier to get started, I've set up a simple Webpack based boilerplate that allows us to dig into React straight away. The boilerplate includes a development mode with a feature known as hot loading enabled. Hot loading allows Webpack to patch the code running in the browser without a fu…
5. Implementing a Note Application Now that we have a nice development setup, we can actually get some work done. Our goal here is to end up with a crude note-taking application. It will have basic manipulation operations. We will grow our application from scratch and get into some trouble. This way you will understand why architect…
6. Deleting Notes One easy way to handle deleting notes is to render a "x" button for each Note. When it's clicked we will simply delete the note in question from our data structure. As before, we can start by adding stubs in place. This might be a good place to separate the concept of a Note from the current Notes …
7. Understanding React Components As we have seen so far, React components are fairly simple. They can have internal state. They can also accept props. Beyond this React provides escape hatches that allow you to handle advanced use cases. These include lifecycle methods and refs. There are also a set of custom properties and method…
8. Editing Notes Editing notes is a similar problem as deleting them. The data flow is exactly the same. We'll need to define an onEdit callback and bind an id of the note being edited at Notes. What makes this scenario difficult is the user interface requirement. It's not enough just to have a button. We'll need…
9. Styling the Notes Application Aesthetically, our current application is very barebones. As pretty applications are more fun to use, we can do a little something about that. In this case we'll be sticking to an old skool way of styling. In other words, we'll sprinkle some CSS classes around and then apply CSS selectors based on…
10. Implementing Kanban In this part, we will turn our Notes application into a Kanban application. During the process, you will learn the basics of React. As React is just a view library we will also discuss supporting technology. We will set up a state management solution to our application. We will also see how to use …
11. React and Flux You can get pretty far by keeping everything in components. That's an entirely valid way to get started. The problems begin as you add state to your application and need to share it across different parts. This is the reason why various state management solutions have emerged. Each one of those tri…
12. Implementing NoteStore and NoteActions Now that we have pushed data management related concerns in the right places, we can focus on implementing the remaining portions - NoteStore and NoteActions. These will encapsulate the application data and logic. No matter what state management solution you end up using, there is usually somethin…
13. Implementing Persistency over localStorage Currently our application cannot retain its state if refreshed. One neat way to get around this problem is to store the application state to localStorage and then restore it when we run the application again. If you were working against a back-end, this wouldn't be a problem. Even then having a te…
14. Handling Data Dependencies So far we have developed an application for keeping track of notes in localStorage. To get closer to Kanban, we need to model the concept of Lane. A Lane is something that should be able to contain many Notes within itself and track their order. One way to model this is simply to make a Lane point …
15. Editing Lanes Kanban board We still have work to do to turn this into a real Kanban as pictured above. The application is still missing some logic and styling. That's what we'll focus on here. The Editable component we implemented earlier will come in handy. We can use it to make it possible to alter Lane name…
16. Implementing Drag and Drop Our Kanban application is almost usable now. It looks alright and there's basic functionality in place. In this chapter, we will integrate drag and drop functionality to it as we set up React DnD. After this chapter, you should be able to sort notes within a lane and drag them from one lane to ano…
17. Advanced Techniques There are a variety of advanced React techniques that are good to be aware of. By testing and typing your code well, you can make it more robust against change. It will be easier to develop if you have the right scaffolding in place supporting your application. Styling React is a complicated topic…
18. Testing React In order to encourage people to support my work, I've decided to publish a TL;DR version of this chapter for the community. This will allow me to develop more content, so it's a win-win really. You can access the full chapter by buying a copy through Leanpub. It goes into detail, whereas the follo…
19. Typing with React In order to encourage people to support my work, I've decided to publish a TL;DR version of this chapter for the community. This will allow me to develop more content, so it's a win-win really. You can access the full chapter by buying a copy through Leanpub. It goes into detail, whereas the follo…
20. Styling React Traditionally, web pages have been split up into markup (HTML), styling (CSS), and logic (JavaScript). Thanks to React and similar approaches, we've begun to question this split. We still may want to separate our concerns somehow. But the split can be on different axes. This change in the mindset …
21. Structuring React Projects React doesn't enforce any particular project structure. The good thing about this is that it allows you to make up a structure to suit your needs. The bad thing is that it is not possible to provide you an ideal structure that would work for every project. Instead, I'm going to give you some inspir…
22. Appendices As not everything that's worth discussing fits a book like this, I've compiled related material into brief appendices. These support the main material and explain certain topics, such as language features, in greater detail. There are also troubleshooting tips in the end. …
23. Language Features ES6 (or ES2015) was arguably the biggest change to JavaScript in a long time. As a result, we received a wide variety of new functionality. The purpose of this appendix is to illustrate the features used in the book in isolation to make it clearer to understand how they work. Rather than going thro…
24. Understanding Decorators If you have used languages, such as Java or Python before, you might be familiar with the idea. Decorators are syntactic sugar that allow us to wrap and annotate classes and functions. In their current proposal (stage 1) only class and method level wrapping is supported. Functions may become suppor…
25. Troubleshooting I've tried to cover some common issues here. This chapter will be expanded as common issues are found. EPEERINVALID It is possible you may see a message like this: npm WARN package.json [email protected] No repository field. npm WARN package.json [email protected] No README data npm WARN peerDepen…