packtpublishing / react-projects

React-Projects, published by Packt

React Projects

This is the code repository for React Projects, published by Packt.

Build 12 real-world applications from scratch using React, React Native, and React 360

What is this book about?

Developed by Facebook, React is a popular library for building impressive user interfaces. React extends its capabilities to the mobile platform using the React Native framework and integrates with popular web and mobile tools to build scalable applications.

This book covers the following exciting features:

• Create a wide range of applications using various modern React tools and frameworks
• Discover how React Hooks modernize state management for React apps
• Develop progressive web applications using React components
• Build test-driven React applications using the Jest and Enzyme frameworks
• Understand full stack development using React, Apollo, and GraphQL

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the code is organized into folders. For example, Chapter02.

The code will look like the following:

{
    "name": "movieList",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Following is what you need for this book: The book is for JavaScript developers who want to explore React tooling and frameworks for building cross-platform applications. Basic knowledge of web development, ECMAScript, and React will assist with understanding key concepts covered in this book.

With the following software and hardware list you can run all code files present in the book (Chapter 1-12).

Software and Hardware List

Chapter	Software required	OS required
1-12	Node.js npm	Windows, Mac OS X, and Linux (Any)

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

Related products

• Learn React Hooks [Packt] [Amazon]

• React Design Patterns and Best Practices - Second Edition [Packt] [Amazon]

Get to Know the Author

Roy Derks is a serial start-up CTO, conference speaker, and developer from Amsterdam. He has been actively programming since he was a teenager, starting as a self-taught programmer using online tutorials and books. At the age of 14, he founded his first start-up, a peer-to-peer platform where users could trade DVDs with other users for free. This marked the start of his career in web development, which back then primarily consisted of creating web applications using an MVC architecture with the LAMP stack. In 2015, he was introduced to React and GraphQL at a hackathon in Berlin, and after winning a prize for his project, he started to use these technologies professionally. Over the next few years, he helped multiple start-ups create cross-platform applications using React and React Native, including a start-up he co-founded. He also started giving workshops and talks at conferences around the globe. In 2019, he gave over 20 conference talks about React, React Native, and GraphQL, inspiring over 10,000 developers worldwide.

Suggestions and Feedback

Click here if you have any feedback or suggestions.

react-projects's Issues

[ESLint] App was running OK until ESLint installed

As soon as I did "npm install --save-dev eslint eslint-loader eslint-plugin-react"; the app broke.

Here is the error:

` npm start

[email protected] start C:\Users\Reza\home\movieList
webpack-dev-server --mode development --open

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module.rules[0].use should be one of these:
  non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
  -> Modifiers applied to the module when rule is matched
  Details:
  • configuration.module.rules[0].use.loader should be a string.
  • configuration.module.rules[0].use.loader should be one of these:
    non-empty string
    -> Loader name
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] start: webpack-dev-server --mode development --open
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Reza\AppData\Roaming\npm-cache_logs\2020-01-04T15_40_51_618Z-debug.log`

I greatly appreciate @royderks input on above.

Chapter 03 - page 80: [Error: Cannot read property 'map' of undefined] at Lane.js component

Error position: The below code in Lane.js

const Lane = ({ tickets, loading, error, title }) => (
    <LaneWrapper>
        <Title>{title}</Title>
        {(loading || error) && <Alert>{loading ? 'Loading...' : error}</Alert>}
        <TicketsWrapper>
            {tickets.map(ticket => <Ticket key={ticket.id} ticket={ticket} />)}
        </TicketsWrapper>
        </LaneWrapper>
);

Solution:

Replace

{tickets.map(ticket => <Ticket key={ticket.id} ticket={ticket} />)}

With

{tickets && tickets.map(ticket => <Ticket key={ticket.id} ticket={ticket} />)}

'MODULE_NOT_FOUND'

Hello,

I just started with the movie list app and I installed the webpack-dev-server packages, before the installation of this package I could easily open the app in the browser with npm start. After the installation of webpack-dev-server, however, this is no longer possible because of this error. I really appreciate your help

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:

• C:\Users\User\Documents\movieList\node_modules\webpack-dev-server\bin\webpack-dev-server.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
  at Function.Module._load (internal/modules/cjs/loader.js:842:27)
  at Module.require (internal/modules/cjs/loader.js:1026:19)
  at require (internal/modules/cjs/helpers.js:72:18)
  at Object. (C:\Users\User\Documents\movieList\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
  at Module._compile (internal/modules/cjs/loader.js:1138:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
  at Module.load (internal/modules/cjs/loader.js:986:32)
  at Function.Module._load (internal/modules/cjs/loader.js:879:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\Users\User\Documents\movieList\node_modules\webpack-dev-server\bin\webpack-dev-server.js'
  ]
  }

Chp 7. TypeError: this.client.watchQuery is not a function

This publication is riddled with errors. So far not a single chapter has been error free.

Latest one, having made changes up to & including page 225 and expecting to see the products returned.

TypeError: this.client.watchQuery is not a function

Query.initializeQueryObservable
/src/Query.tsx:274

  271 |     this.queryObservable = this.context.renderPromises.getSSRObservable(this);
  272 |   }
  273 |   if (!this.queryObservable) {
> 274 |     this.queryObservable = this.client.watchQuery(opts);
      | ^  275 |   }
  276 | }
  277 | 

Chapter 1 - Assets and Media shouldn't be in src folder

Both Assets and Media should be outside of src folder

In your book

I have to manually move them out to be same level with src folder.. else will have broken images and missing data.json file.

Chapter 1, page 24

I have followed the instructions step by step and nothing displays.
Instead I get the following error message in the console log. Please advise?

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/.babelrc: Error while parsing config - JSON5: invalid end of input at 1:1
at syntaxError (/Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/json5/lib/parse.js:1083)
at invalidEOF (/Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/json5/lib/parse.js:1032)
at Object.start (/Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/json5/lib/parse.js:821)
at Object.parse (/Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/json5/lib/parse.js:32)
at /Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/@babel/core/lib/config/files/configuration.js:264
at /Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/@babel/core/lib/config/files/utils.js:30
at Generator.next ()
at Function. (/Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/@babel/core/lib/gensync-utils/async.js:24)
at Generator.next ()
at step (/Users/brittanysoozinsoozin/Library/Mobile Documents/comappleCloudDocs/Desktop/Desktop/TMDP/Molo9/Dev/React Projects by Packt>/movieList/node_modules/gensync/index.js:261)
at eval (index.js:1)
at Object../src/index.js (main.js:18)
at main.js:29
at main.js:31

Chapter 6 - coverage on cli

instructions too add the --coverage flag with the following code:

npm run test --coverage

was not working on my windows device. it would not accept the --coverage flag..

Issues with Webpack-cli version 4 and above

Webpack-cli functionality for "npm start" seems to be deprecated after the move to version 4. I have found patchwork solutions to serve the assets, but cannot get the Chapter 1 code to run.

Chp 5, p.170

Hi,

On page 170 a function call to 'actionDispatch' is made, there was no mention of it earlier in the text or subsequently, it's also not in the (seemingly incomplete) final chapter code. The call breaks the app from that point (as it's a call to an undefined function). Any ideas?

Thanks,
Rob.

Chapter 1 problem.

I have been working on the movie list project and can not seem to get the JSON or images to load. All I get is a screen that says loading...

I have checked over the code again and again and can't find any errors.

I have moved the assets and media folders out of the src folder and into my main movieList folder and am still getting the same result.

I am beyond frustrated. It would be nice if a book for beginners like this had some kind of troubleshooting suggestions.

Incorrect media/assets folders location in Ch1 project

In the book, media/assets folders are located in the src folder( in folder structure diagram)
But in the complete code branch, those folders are placed inside the root directory instead.

Moving through Ch1 but not having success. Where is reference source?

Spending a lot of time just trying to get through Ch1. There are several errors that I have worked through (typos on pg. 12 and 22) and moving the media directory to the root, but I am now left with a significant investment of time but still no joy.

The book implies on page 8 that there is "The complete code for this chapter can be found on GitHub.." but this seems to be incorrect. Where can I find the working source that I might check my work against? I seem to be running into the same mistake or error over and over and no longer feel that repeating this in step-by-step pieces (with the same failed result) is no longer helping my learning or confidence in being able to continue. Any help/insight appreciated!

Chapter 4 - TypeError: Cannot read property 'question_id' of undefined

hello Roy,
thank you for the book and content, really enjoying it so far and learning heaps!

i'm getting this TypeError when i navigate to the parametered routes portion of Chapter4
questions/####

TypeError: Cannot read property 'question_id' of undefined
Question.render
src/containers/Question.js:75
  72 |   }
  73 |   return (
  74 |     <QuestionWrapper>
> 75 |       <Card key={data.items[0].question_id} data={data.items[0]} />
  76 |     </QuestionWrapper>
  77 |   )
  78 | }

in the browser:

{
items: [ ],
has_more: false,
quota_max: 300,
quota_remaining: 274
}

Here is the code that I am trying to understand. When i go to the endpoint,

 async componentDidMount() {
    const { match } = this.props
    try {
      const data = await fetch(
        `${ROOT_API}questions/${match.params.id}?site=stackoverflow`
      )
      const dataJSON = await data.json()

      if (dataJSON) {
        this.setState({
          data: dataJSON,
          loading: false
        })
      }
    } catch (error) {
      this.setState({
        error: error.message,
        loading: false
      })
    }
  }

  render() {
    const { match } = this.props
    const { data, loading, error } = this.state
    if (loading || error) {
      return (
        <>
          <Helmet>
            <title>{`Q&A Feed - Question #${match.params.id}`}</title>
          </Helmet>
          <Alert>{loading ? "Loading..." : error}</Alert>
        </>
      )
    }
    return (
      <QuestionWrapper>
        <Card key={data.items[0].question_id} data={data.items[0]} />
      </QuestionWrapper>
    )
  }
}

React Helmet error

I was getting below error when I use the latest react version along with react Helmet.
Attempted import error: 'react-helmet' does not contain a default export (imported as 'Helmet').
Their updated documentation says the module should be imported as:

import {Helmet} from "react-helmet";
That should fix the error. Would need to update the code on all Components that are using Helmet including the Header, Question and Field Components.

Chapter 4 node server issue

Hello Roy,

I am getting the following errors in the browser when I run npm run ssr:

Uncaught SyntaxError: Unexpected token '<'
main.944e8127.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Also in the console, I get the following errors:

Warning: componentWillMount has been renamed, and is not recommended for use.
See https://fb.me/react-unsafe-component-lifecycles for details.

• Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.

Please update the following components: SideEffect(NullComponent)

---

I thought perhaps I was mistyping something when following along. However, I downloaded the completed version, ran npm install, npm run build, and npm run ssr and got the same errors. Any help with this issue is appreciated.

The client-side works just fine.

Chapter 3 - TypeError for dev server

When I started the dev server, I received the following error:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

I had to change the package.json file to state "react-scripts": "3.4.0".
This should be probably changed in branches ch3-initial and ch3.

Chapter 3. onDrop issue. Final code didn't match due to matching lane vs board. This site had correct code

In Board.js, for onDragOver the chapter uses

ticket.board = boardId at the end of the chapter

However the code in this repo uses

ticket.lane = laneId as the chapter end state code

The repo code is correct and works ok.

So unless I missed it, the book code at the end of the chapter is wrong for chapter final state

Chapter 4 willMount to did Mount

Hello
Thank you for your book!

I've installed the last version of ch4, run npm run build and npm run ssr and got this issue:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles f
or details.

* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.

Please update the following components: SideEffect(NullComponent)

No mentions of componentWillMount found in the source code, usage found in node_modules
App is working, but showing Loading.. all the time.
Any ideas how to fix that?