book

Learning React

by Alex Banks, Eve Porcello

May 2017

Intermediate to advanced

348 pages

7h 34m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Conventions Used in This BookUsing Code ExamplesO’Reilly SafariHow to Contact UsAcknowledgments
Obstacles and RoadblocksReact Is a LibraryNew ECMAScript SyntaxPopularity of Functional JavaScriptJavaScript Tooling FatigueWhy React Doesn’t Have to Be Hard to LearnReact’s FutureKeeping Up with the ChangesWorking with the FilesFile RepositoryReact Developer ToolsInstalling Node.js
Declaring Variables in ES6constletTemplate StringsDefault ParametersArrow FunctionsTranspiling ES6ES6 Objects and ArraysDestructuring AssignmentObject Literal EnhancementThe Spread OperatorPromisesClassesES6 ModulesCommonJS
What It Means to Be FunctionalImperative Versus DeclarativeFunctional ConceptsImmutabilityPure FunctionsData TransformationsHigher-Order FunctionsRecursionCompositionPutting It All Together
Page SetupThe Virtual DOMReact ElementsReactDOMChildrenConstructing Elements with DataReact ComponentscreateClassES6 ClassesStateless Functional ComponentsDOM RenderingFactories
React Elements as JSXJSX TipsBabelRecipes as JSXIntro to WebpackWebpack LoadersRecipes App with a Webpack Build
Property ValidationValidating Props with createClassDefault PropsCustom Property ValidationES6 Classes and Stateless Functional ComponentsRefsInverse Data FlowRefs in Stateless Functional ComponentsReact State ManagementIntroducing Component StateInitializing State from PropertiesState Within the Component TreeColor Organizer App OverviewPassing Properties Down the Component TreePassing Data Back Up the Component Tree
Component LifecyclesMounting LifecycleUpdating LifecycleReact.ChildrenJavaScript Library IntegrationMaking Requests with FetchIncorporating a D3 TimelineHigher-Order ComponentsManaging State Outside of ReactRendering a ClockFluxViewsActions and Action CreatorsDispatcherStoresPutting It All TogetherFlux Implementations
StateActionsAction Payload DataReducersThe Color ReducerThe Colors ReducerThe Sort ReducerThe StoreSubscribing to StoresSaving to localStorageAction CreatorsMiddlewareApplying Middleware to the Store
Explicitly Passing the StorePassing the Store via ContextPresentational Versus Container ComponentsThe React Redux ProviderReact Redux connect

ESLintTesting ReduxTest-Driven DevelopmentTesting ReducersTesting the StoreTesting React ComponentsSetting Up the Jest EnvironmentEnzymeMocking ComponentsSnapshot TestingUsing Code Coverage
Incorporating the RouterRouter PropertiesNesting RoutesUsing a Page TemplateSubsections and SubmenusRouter ParametersAdding Color Details PageMoving Color Sort State to Router
Isomorphism versus UniversalismServer Rendering ReactUniversal Color OrganizerUniversal ReduxUniversal RoutingCommunicating with the ServerCompleting Actions on the ServerActions with Redux Thunks

Content preview from Learning React

Chapter 12. React and the Server

So far, we have built small applications with React that run entirely in the browser. They have collected data in the browser and saved the data using browser storage. This makes sense because React is a view layer. It is intended to render UI. However, most applications require at least the existence of some sort of a backend, and we will need to understand how to structure applications with a server in mind.

Even if you have a client application that is relying entirely on cloud services for the backend, you still need to get and send data to these services. Within the scope of Flux, there are specific places where these transactions should be made, and libraries that can help you deal with the latency associated with HTTP requests.

Additionally React can be rendered isomorphically, which means that it can be in platforms other than the browser. This means we can render our UI on the server before it ever gets to the browser. Taking advantage of server rendering, we can improve the performance, portability, and security of our applications.

We start this chapter with a look at the differences between isomorphism and universalism and how both concepts relate to React. Next, we will look at how to make an isomorphic application using universal JavaScript. Finally, we will improve the color organizer by adding a server and rendering the UI on the server first.