packtpublishing / react-and-react-native

Code files for React and React Native uploaded by Packt

React and React Native

This is the code repository for React and React Native, published by Packt. It contains all the supporting project files necessary to work through the book from start to finish.

About the Book

React and React Native allow you to build cross-platform desktop and mobile applications using Facebook’s innovative UI libraries. Combined with the Flux data architecture and Relay, you can now create powerful and feature-complete applications from just one code base!

Getting Started

In this section, I'll walk you through the process of cloning this repository, installing dependencies, and how to launch the examples.

Cloning The Repository

To clone this repository:

git clone https://github.com/PacktPublishing/React-and-React-Native.git

That's it. I'll likely be pushing fixes to this repository on a regular basis, so it's a good idea to run the examples from it. But first, you need to make sure all required dependencies are installed.

Installing Dependencies

To install the dependencies used with the code examples, open up a terminal if you haven't already, and change into the repo directory:

cd React-and-React-Native

Now you can use npm to install all the packages that we need:

npm install

There are quite a few dependencies to install, so this command might run for a minute. These are the local dependencies, meaning that they're specific to the code examples in this Git repository. You can take a look at the package.json file to get an idea of what this project depends on. Or, you can simply list them in the console by running:

npm ls --depth=0

Npm also has the notion of global depnedencies. These are npm packages that are available to any project in on the system. We need to install the following global dependencies in order to run the example code:

npm install -g webpack-dev-server webpack babel babel-cli

This will make the webpack and the webpack-dev-server packages available to any projects on your system. More importantly, this will install the webpack-dev-server command needed to run the examples.

Running Examples

First, you need to change into the directory of the example that you'd like to run:

cd Chapter02/builtin-html-tags

Then, you're ready to run the Webpack development server:

webpack-dev-server --hot

This starts the development web server. The console output will tell you where the server is listening for requests:

Project is running at http://localhost:8081/

You can visit this page to interact with the example. The --hot option isn't always necessary. In fact, it's really only useful if you plan on modifying the code examples (recommended!) and you want to see the results in the browser immediately.

If you find a server.js file in the example directory, this should be executed instead of the webpack-dev-server command:

babel-node server.js

Then, you can visit the address displayed in the console, in your browser, just like you would with webpack-dev-server.

Building React Native Projects

Each React Native example is it's own project. There are a few steps that should be followed, in order to build and run these projects. First of all, make sure you have the react-native-cli package installed:

npm install react-native-cli -g

Install Dependencies

---

Just like any regular React web projects:

cd path/to/code
npm install

Install iOS and Android Build Files

When you start a React Native project, there're a number of source files generated. They're not included in this code bundle because it would be way too big. To generate them, run:

react-native upgrade

This will ask you about overwriting a number of files. You can answer yes to all of them.

Link dependencies

Some examples have dependencies that need to be linked. It's generally a good idea to link projects even if they don't have any dependencies, because you never know when new dependencies will creep in:

react-native link

Run the project

From within the given code directory, run one of the following:

react-native run-ios
react-native run-android

Related React and React Native Products

• React Native By Example

• Mastering React Native

• React Native Cookbook

Suggestions and Feedback

Click here if you have any feedback or suggestions.

react-and-react-native's Issues

Chapter 10 examples do not run

Please explain how we run the examples in Chapter 10.

Error when npm install, [email protected] requires a peer of graphql@^0.10.0 || ^0.11.0 but none is installed. You must install peer dependencies yourself.

Hello Mr. Boduch, I'm still a beginner and I just clone the repository and follow the instructor, but I got an error, the error said

WARN [email protected] requires a peer of graphql@^0.10.0 || ^0.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 116 packages in 10.36s

I have no idea what should I do then, my nodejs version is 8.9.1 and npm version is 5.5.1
thanks

error for Chapter 13 MyProject.xcodeproj

This generates a not found error: <React/CTBundleURLProvider.h>

webpack-dev-server not found

Following the instructions in Instruction/README, I ran
npm install (in the root level, REACT-AND-REACT-NATIVE-MASTER).
npm install -g webpack
cd'd to Chapter02/builtin-html-tags
webpack-dev-server

and got, for my pains:
-bash: webpack-dev-server: command not found

What am I doing wrong?

is +Date documented anywhere?

From console.log
state.modified: Tue Jun 06 2017 14:14:52 GMT-0400 (Eastern Daylight Time)
+state.modified: 1496772892489
I see that the + symbol converted the Date to ticks, is that documented anywhere?

Chapter 9 "url-and-query-parameters"

Couldn't get it to work. Did a 'yarn upgrade -L' at the root
Changed App.js query lines to
const query = 'From Query';
<p><Link to={{ pathname: '/echo', search: ?value=${query} }}>Echo query</Link></p>
Changed Echo.js to
`import React from 'react';
import { parse } from 'query-string';

// Simple component that expects either an "echo"
// URL segment parameter, or an "echo" query parameter.
export default ({
params,
location: {
search,
},
}) => (

{params.echo || parse(search).value}

);` That worked

Chapter9- decoupling route declarations, example doesn't work

1. http://localhost:8080
   browser console:
   Warning: [react-router] Location "/" did not match any routes

2. http://localhost:8080/one/1
   browser content:
   Cannot GET /one/1

3)http://localhost:8080/one/2
browser content:
Cannot GET /one/2

4)http://localhost:8080/one/
browser shows files listing
Second.js

command line:

MINGW64 /d/React-and-React-Native/Chapter09/decoupling-route-declarations (master)
$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 32d51d69a4ded88f65de
Version: webpack 2.4.1
Time: 4220ms
Asset Size Chunks Chunk Names
main-bundle.js 1.25 MB 0 [emitted] [big] main
chunk {0} main-bundle.js (main) 1.18 MB [entry] [rendered]
[10] D:/React-and-React-Native//react/react.js 56 bytes {0} [built]
[88] D:/React-and-React-Native//react-router/es/index.js 1.46 kB {0} [built]
[148] (webpack)-dev-server/client?http://localhost:8080 5.44 kB {0} [built]
[149] ./main.js 554 bytes {0} [built]
[150] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[151] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[187] (webpack)-dev-server//strip-ansi/index.js 161 bytes {0} [built]
[190] (webpack)/hot/emitter.js 77 bytes {0} [built]
[192] (webpack)//punycode/punycode.js 14.7 kB {0} [built]
[196] (webpack)//url/url.js 23.3 kB {0} [built]
[201] ./routes.js 1.02 kB {0} [built]
[204] ./two/routes.js 1.25 kB {0} [built]
[230] D:/React-and-React-Native//react-dom/index.js 59 bytes {0} [built]
[244] D:/React-and-React-Native/~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
[331] multi (webpack)-dev-server/client?http://localhost:8080 ./main.js 40 bytes {0} [built]
+ 317 hidden modules
webpack: Compiled successfully.

React-and-React-Native\Chapter02\encapsulating-html\main.js

typo on line 6
// "MyComponent" extends "Compoennt", which means that
which should be
// "MyComponent" extends "Component", which means that

Nit: Typo

React-and-React-Native/Chapter02/builtin-html-tags/main.js

Line 9 in df76533

// React internall defines all the standard HTML tags

internally

All the subdirectories for Chapter13\MyProject\ are missing

On 7/25 I think they were there.

how the samples run

Explaining that React automatically looks up the directory tree for a node_modules folder that contains the matching "import"s in main.js would eliminate some confusion.

React-and-React-Native\Chapter03\pure-functional-components\main.js - typo

typo in React-and-React-Native\Chapter03\pure-functional-components\main.js
"reders the component " --> "renders the component"

What's around me fails to show map

It fails to show the map and does not indicate why it failed.

ResizingImages fails to run for some reason.

-- result on app

-- log

Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: Requesting launch of org.reactjs.native.example.ResizingImages with options: {
environment = {
};
}
Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: Beginning launch sequence for bundle 'org.reactjs.native.example.ResizingImages'
retryTimeout: 120.000000 (default write com.apple.CoreSimulatorBridge LaunchRetryTimeout )
bootTimeout: 300.000000 (default write com.apple.CoreSimulatorBridge BootRetryTimeout )
bootLeeway: 120.000000 (default write com.apple.CoreSimulatorBridge BootLeeway )
Note: Use 'xcrun simctl spawn booted defaults write ' to modify defaults in the booted Simulator device.
Simulator booted at: 2017-06-13 04:35:59 +0000
Current time: 2017-06-13 04:40:12 +0000
Within boot leeway: NO
Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: Launch attempt #0 for bundle 'org.reactjs.native.example.ResizingImages', have been trying to launch for 0 seconds. Modern launch services = YES
Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: Got LSBundleProxy for 'org.reactjs.native.example.ResizingImages', sequenceNumber 316, cacheGUID 39E23B2B-C612-4946-8B5C-9E41138BC7AC
Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: [Common] [FBSSystemService][0x68fb] Sending request to open "org.reactjs.native.example.ResizingImages"
Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: [Common] [FBSSystemService][0x68fb] Request successful: <FBSProcessHandle: 0x7fca3120abd0; ResizingImages:12665; valid: YES>
Jun 13 14:10:12 csmu-macbook-pro-2 CoreSimulatorBridge[12105]: Launch successful for 'org.reactjs.native.example.ResizingImages'
Jun 13 14:10:12 csmu-macbook-pro-2 logd[12090]: metadata shared cached uuid is null (using logd's shared cache info) ResizingImages (12665)
Jun 13 14:10:12 csmu-macbook-pro-2 logd[12090]: Failed to harvest strings for pathless uuid '00000000-0000-0000-0000-000000000000'
Jun 13 14:10:12 csmu-macbook-pro-2 ResizingImages[12665]: assertion failed: 15G31 14C89: libxpc.dylib + 62677 [0339A402-6531-30E9-8BC2-589C463CD6D6]: 0x7d

PlottingOverlays example fails.

PlottingOverlays fails to load maps, plots, overlays and fails to explain why.

Log:

Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: [] __nw_connection_get_connected_socket_block_invoke 4 Connection has no connected handler
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Sending `websocketFailed` with no listeners registered.
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Warning: View: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Warning: Native component for "AIRMap" does not exist
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Running application PlottingOverlays ({
	    initialProps =     {
	    };
	    rootTag = 1;
	})
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Running application "PlottingOverlays" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
Jun 13 07:47:36 csmu-macbook-pro-2 PlottingOverlays[69060]: Warning: Native component for "AIRMapPolygon" does not exist```

Plotting points show large map and no points

Suggest using zoom and some dummy locations based on the lat and log in the simulator.

resource-ids-in-routes in Chapter 9

How do I run this project? Do I start server.js separately? The book doesn't' mention this file.

Update on Chapter03 Code

Hey guys,

Thanks for the tutorials, while starting the book I found that this code needs to be updated:

https://github.com/PacktPublishing/React-and-React-Native/blob/master/Chapter03/default-property-values/MyButton.js

The disabled property no longer applies which leaves the example wrong as input will be enabled.

Please review at your convenience. Cheers!

UPDATE: Got the wrong repo, all good!

Please explain how to run the examples in Chapter 11

I start the example then a short time later it crashes.

webpack-dev-server --hot
Project is running at http://localhost:8080/
webpack output is served from /
/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:35
throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
^

Error: Module '/source/React-and-React-Native/node_modules/url/url.js' is not a loader (must have normal or pitch function)
at loadLoader (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:35:10)
at iteratePitchingLoaders (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
at NormalModule.doBuild (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/lib/NormalModule.js:179:3)
at NormalModule.build (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/lib/NormalModule.js:268:15)
at Compilation.buildModule (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/lib/Compilation.js:146:10)
at factoryCallback (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/lib/Compilation.js:329:11)
at factory (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/lib/NormalModuleFactory.js:253:5)
at applyPluginsAsyncWaterfall (/Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/lib/NormalModuleFactory.js:99:14)
at /Users/admin/.nvm/versions/node/v7.8.0/lib/node_modules/webpack/node_modules/tapable/lib/Tapable.js:204:11

Plotting points fails.

The map fails to load and fails to indicate why.
Also has a 'Warning NativeComponent for "AIRMapMarker" does not exist.

Plotting Overlays shows large map and no overlays

Suggest adding a zoom and adding a few dummy locations based on the lat and log in the simulator

syntax error problem - unexpected token

I'm not able to run the examples. I always get "Module build failed . . . SyntaxError . . . Unexpected token." The error always hits at the first character after:

render(
(
^^^

That is, the first HTML character. Please help. I would like to run the examples. Thanks.

Issue with LazyListLoading example.

Unable to resolve module http from /source/React-and-React-Native/Chapter16/LazyListLoading/node_modules/node-fetch/index.js: Module does not exist in the module map or in these directories:
/source/React-and-React-Native/Chapter16/LazyListLoading/node_modules
, /source/React-and-React-Native/node_modules

This might be related to facebook/react-native#4968
To resolve try the following:

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.

RCTFatal
-[RCTBatchedBridge stopLoadingWithError:]
__25-[RCTBatchedBridge start]_block_invoke_2
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

Problem running webpack dev server

Require webpack-cli installation but even after webpack-cli has been installed globally, still the next issue appeared, Webpack has been initialised using a configuration object that does not match the API schema issue.

webpack: Failed to compile.

I have:

1. npm install
2. npm install -g webpack
3. cd path/to/example
4. run webpack-dev-server (after npm install webpack-dev-server -g)

I receive this error in each of the example folders:

ERROR in ./main.js Module build failed: Error: The node API for babelhas been moved tobabel-core. at Object.<anonymous> (/Users/jayfallon/Development/javascript/react/packt/React-and-React-Native/node_modules/babel/index.js:1:69) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at loadLoader (/Users/jayfallon/.nvm/versions/node/v4.4.5/lib/node_modules/webpack-dev-server/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:13:17) at iteratePitchingLoaders (/Users/jayfallon/.nvm/versions/node/v4.4.5/lib/node_modules/webpack-dev-server/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2) at runLoaders (/Users/jayfallon/.nvm/versions/node/v4.4.5/lib/node_modules/webpack-dev-server/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:362:2) @ multi /Users/jayfallon/.nvm/versions/node/v4.4.5/lib/~/webpack-dev-server/client?http://localhost:8080 webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/only-dev-server ./main.js webpack: Failed to compile.

If I change loaders: ['babel'] to loaders: ['babel-loader'] in the webpack.config.js file it output webpack: Compiled successfully. however it does actually not compile. And there is no browser output for index.html.

Running MacOS with node v6.10.0, webpack 2.2.1, webpack-dev-server 2.4.1.

loader configuration problem

I'm not able to run the examples. I always get "Module build failed . . . SyntaxError . . . Unexpected token." The error always hits at the first character after:

render(
(

That is, the first HTML character. Please help. I would like to run the examples. Thanks.

TouchFeedback example fails.

It's missing Button.js

Workaround is the create Button.js from

the text in the book.

-- Button.js

import React, { PropTypes } from 'react';
import { Text, TouchableOpacity, TouchableHighlight, } from 'react-native';

import styles from './styles';

// The "touchables" map is used to get the right
// component to wrap around the button. The
// "undefined" key represents the default.
const touchables = new Map([
['opacity', TouchableOpacity],
['highlight', TouchableHighlight],
[undefined, TouchableOpacity],
]);

const Button = ({
label,
onPress,
touchable,
}) => {
// Get's the "Touchable" component to use,
// based on the "touchable" property value.
const Touchable = touchables.get(touchable);

// Properties to pass to the "Touchable" 
// component. 
const touchableProps = { 
	style: styles.button, 
	underlayColor: 'rgba(112,128,144,0.3)', 
	onPress, 
}; 

// Renders the "<Text>" component that's 
// styled to look like a button, and is 
// wrapped in a "<Touchable>" component 
// to properly handle user interactions. 
return ( 
	<Touchable {...touchableProps}> 
		<Text style={styles.buttonText}> {label} </Text> 
	</Touchable> 
); 

};

Button.propTypes = {
onPress: PropTypes.func.isRequired,
label: PropTypes.string.isRequired,
touchable: PropTypes.oneOf([
'opacity',
'highlight',
]),
};

export default Button;