fullstackreact/30-days-of-react

30 Days of React Content and Source Code

30-days-of-react's Issues

day5 - text & image not show

i try
<img alt="{activity.text}" src="{activity.user.avatar}" />
but in react devtools showing:

    alt:
    "{activity.text}"
    src:
   "{activity.user.avatar}"

i just try with local image asset but the problem remains unchanged.

thanks

day-7 componentWillReceiveProps

This example will set state twice. When I log the change

let n = 0
class Content extends React.Component {
    constructor(props) {
        super(props);
        console.log('content')
        this.state = {
            activities: [{name:'Tony'}],
            loading: false
        }
    }
    componentWillReceiveProps(nextProps) {
        console.log('times: ', n++)
        console.log(nextProps.requestRefresh)
        console.log(this.props.requestRefresh)
        // Check to see if the requestRefresh prop has changed
        if (nextProps.requestRefresh !== this.props.requestRefresh) {
            console.log('update')
            this.setState({loading: true}, this.updateData);
        }
    }
    updateData () {
        this.setState({activities: [{name:'Evan'},{name:'Tom'}]},this.props.onComponentRefresh)
    }
    ...

It will log the string ‘update’ twice. Shall we change this

nextProps.requestRefresh !== this.props.requestRefresh

to

nextProps.requestRefresh === true

Day 4 is a wall of code and too large for the fourth day of this series

Day 4 could really use some help refactoring to break down the component and explain what's going on here.

Day 5: "recall we defined <Header /> component" quotes changed (not original) code

Near the beginning of Day 5 the text says "Recall we defined

component as" and displays the following (unstyled) code:

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="menuIcon">
          <div className="dashTop"></div>
          <div className="dashBottom"></div>
          <div className="circle"></div>
        </div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

I believe the {this.props.title} is an unintentional inclusion of the fix to the previously-hard-coded code. I had to very closely read and re-read the Day 5 lesson to make sure I inferred what was being taught here, because that's not where my code (leftover from Day 4) started out, and while I know I'm no guru, I found it more confusing than I think is the author's intent.

And when I reference Day 4's

code, it's different in at least a couple of ways:

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">Timeline</span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

Not only does this Day 4 code show <span className="title">Timeline</span>, but the className "fa fa-more" in Day 4 becomes "menuIcon" in Day 5 [or some other kind of transformation].

If I had to guess, I'd imagine these details are the result of multiple refactorings of the code over the generations of this amazing series. I hope this helps reduce confusion for future readers.

Styling problem on timeline exercise in lesson 4

I am currently working on lesson 4 in the book, and the react part of it is working properly, but I'm having problems with the styling? Where can I find the correct css-files to make the app look like it does in the book?
Thanks a lot!

Kind regards,
Marc

Yarn start requets html file

Yarn start requests html file.

Error that is returned is:
⠋ Processing src/styles/index.cssCould not find a required file.
Name: index.html
Searched in: /Users/daviddiomede/Downloads/30-days-of-react-master/day-1/public
error Command failed with exit code 1.

Missing step between Day 4 to Day 5 - Node and module bundler set up?

The code in the repo and the code in the post.md/website examples are different. Up until Day 4 it seemed the React components were put inside <script> tags in index.html, with cdn links to React and Babel.

Then in Day 5 the <Header /> code examples change unexpectedly and start using " import React from 'react' " which suggests there was a step where a module bundler was set up.

Maybe this is explained elsewhere but following Day 4 to Day 5 I was confused and comments on the webpage show others were as well.

D4: Style section has a CSS dead link

I can't see the css file here on github also I'm not sure that the link to add in our files is working?!

cdn links need updating!!!

https://secure.helpscout.net/conversation/969337598/35411?folderId=1414959

Hi Nate,

Thanks for your follow up, good to feel the sense of community.

Only just now had the opportunity to delve into it. Looking forward to getting to know react.
Can't say too much yet, but the cdn links need updating!!!
(Got them from the react site - so all good).

Thanks
Colin

Life Positive Solution

CSS file is missing

I am following along your 30 days of React tutorial, however I could not
find the css-file on day 4. The link you provided gave me an 404 error:
https://github.com/fullstackreact/30-days-of-react/blob/master/day-04/src/components/Timeline/Timeline.css

Could you direct me to the correct css-file or even better fix the link
on the webpage so that others could follow along :)?

Thank you so much and keep up the great work,

HelpScout URL: https://secure.helpscout.net/conversation/1164238631/40426?folderId=790126

Lesson 3 - wrong ReactDOM.render position?

Page 14

var mount = document.querySelector('#app)
ReactDOM.render(<App />, mountComponent)

I believe the second argument should be mount instead of mountComponent!

Day 6 lesson missed getdate() definition

This lesson has three problems IMHO:

1. When defining initial state, there is no explanation about getTime(). It's on 30-days-of-react/day-6/src/components/Timer/Clock.js but is not inside the lesson
2. The text says:

If we render our new Clock component, we will only get a time rendered everytime the component itself rerenders. It's not a very useful clock (yet). In order to convert our static time display Clock component into a clock that displays the time, we'll need to update the time every second.
In order to do that, we'll need to track the current time in the state of the component. To do this, we'll need to set an initial state value.

Nevertheless, if you follow the instructions provided, you will never see the clock ticking since there are no lifecycles defined. Although the text clearly states that lifecycles will be explained in the next lesson, I think that a better explanation of lesson outcome is required.
3. There are 2 javascript files at 30-days-of-react/day-6/src/components/Timer/ that are almost identical, changing only at line 44
Clock.js
hours == 0 ? 12 :
Timer1.js
hours === 0 ? 12 :
which is the correct version because with the first version, the console send this warning:
./src/Clock.js Line 40: Expected '===' and instead saw '==' eqeqeq
Javascript knowledge for this book is required but if people get frustated on day 6 due to unclear instructions they will not complete the whole book.
Kind regards

Import BrowserRouter as Router, Switch, Route

In lesson 17, I got an error that "Switch" is not defined when I imported as shown in the tutorial. Once I imported using "Import BrowserRouter as Router, Switch, Route" things worked as intended

Day 16 uses a defunct timeserver

maybe there is a better, longer lived, server? maybe NIST or something like that

Build error - day 1

$ yarn install
yarn install v1.15.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.0.tgz: Request failed "404 Not Found"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/***/git_home/30-days-of-react/day-01/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

And the resource is indeed not available as of now. What should I do?

State of project as book progresses changes without reader being aware

As I've been working through the book, I repeatedly notice that the state of my project files (index.html in particular) do not match what the book seems to think it should be. For the longest time I thought it was because I was doing something wrong or missing things, but I don't think so anymore.

Page 74 says "Recall, the render function of our Header component currently looks like
this:" and then it lays out a render function which includes let searchInputClasses = ["searchInput"]; I did a ctrl+f search in the pdf for searchInputClasses and the first instance of it is on page 75, so... the reader is naturally going to be confused by being asked to recall something that hasn't happened yet.

This is only one example, but as a reader I've felt like this has happened multiple times. I'm sorry I cannot point to any other specific examples, but the project seems to progress in the writer's mind differently from how it progresses in the users.

lodash issue with branch day-6

Hi there,

Firstly, I would like to thank for your effort. Your repo have been helping me a lot when I began to study ReactJS.

When I tried to run your lesson 6, I got the issue below:

Error in   Error: Child compilation failed:
  Module build failed: SyntaxError: Unexpected token <
  
  - Function
  
  - lodash.js:14843 
    [30-days-of-react]/[lodash]/lodash.js:14843:16
  
  - lodash.js:494 apply
    [30-days-of-react]/[lodash]/lodash.js:494:27
  
  - lodash.js:15227 
    [30-days-of-react]/[lodash]/lodash.js:15227:16
  
  - lodash.js:496 apply
    [30-days-of-react]/[lodash]/lodash.js:496:27
  
  - lodash.js:6600 
    [30-days-of-react]/[lodash]/lodash.js:6600:16
  
  - lodash.js:14842 Function.template
    [30-days-of-react]/[lodash]/lodash.js:14842:20

I have tried this with:
node v7.9.0
npm 4.2.0
yarn 0.23.0

PS: I have removed node_modules and re-run to make I started from scratch, but still got this issue.
Regards,

Why not giving the discord link on the read me..

Image paths should resolve in the markdown into this repository

Posts have asset paths relative to the root of fullstackreact.com such as:

<img class="wide" src="/assets/images/series/30-days-of-react/day-4/breakdown.png" />

Instead, these images should resolve relative to the markdown file so that they load in the previews. Then, we can just substitute out the proper path in the build process.

Day 7 refers to a GitHub data static JSON but doesn't link to it

There should be a link to the data.js file on the CDN: https://cdn.jsdelivr.net/gh/fullstackreact/30-days-of-react@master/day-07/public/data.js.

Images Missing and No Alt Text.

In the document file about the deployment the images are missing and without alt text.
https://github.com/fullstackreact/30-days-of-react/blob/master/day-28/doc/doc.mkd

Testing day 22 code crashes.

Cloned the repo and ran yarn . Then installed mentioned Dev dependencies to start testing. But it gives this error.

● renders without crashing

    Invariant Violation: Could not find "store" in either the context or props of "Connect(Home)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Home)".
      
      at invariant (node_modules/invariant/invariant.js:42:15)
      at new Connect (node_modules/react-redux/lib/components/connectAdvanced.js:134:33)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:295:18
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at ReactCompositeComponentWrapper._constructComponentWithoutOwner (node_modules/react-dom/lib/ReactCompositeComponent.js:294:16)
      at ReactCompositeComponentWrapper._constructComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:280:21)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:188:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.<anonymous>.it (src/App.test.js:7:48)
          at <anonymous>

And then the mentioned test result as well.

Remove extraneous code, particularly from earlier examples

Earlier days (take day-01, for example) have a lot of extra code that isn't necessary. This is just confusing for folks trying to work through the code.

For example, day-01 just loads an HTML file, but the instructions say to use yarn, there's a postcss.config.js etc. This is totally unnecessary for that day.

The task here is to go through each day and ensure we only have exactly the code we need.

In between day3 and day4, the github repo switches from including everything in index.html to using a build process apparently.

On day3 it says "We'll switch to a precompilation step in a few days."

I've made it to day10 without seeing any precompilation instructions, but the github repo for each day seems to switch over to some sort of precompilation on day4. I'm finding this confusing.

[edit] I see now that compilation is worked out on day12. All I'm asking is that the repo reflects that, reflects essentially what a reader's project should look like as they're following along.

Tests fail to run on day 24 because of incompatible jest versions

react-scripts depends on jest 18, and jest 19 is specified in packages.json. The two versions are incompatible, and trying to run tests results in the following error:

yarn run v1.3.2
$ react-scripts test --env=jsdom
 FAIL  src/components/Timeline/__tests__/Timeline-test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'bind' of undefined

      at Runtime._createRuntimeFor (node_modules/jest-runtime/build/index.js:639:38)
      at handle (node_modules/worker-farm/lib/child/index.js:44:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:51:3)
      at process.emit (events.js:160:13)
      at emit (internal/child_process.js:790:12)

 FAIL  src/App.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'bind' of undefined

      at Runtime._createRuntimeFor (node_modules/jest-runtime/build/index.js:639:38)
      at handle (node_modules/worker-farm/lib/child/index.js:44:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:51:3)
      at process.emit (events.js:160:13)
      at emit (internal/child_process.js:790:12)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        0.825s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

build error - Error: Cannot find module '/home/trung/30-days-of-react/scripts/cqmd.js'

Hi,
I got this error "Error: Cannot find module '/home/trung/30-days-of-react/scripts/cqmd.js'" while building the project. Then the app still runs at localhost:3000 but no styles loaded. Please help.

Day 4 CSS

Hi Nate,

Just some honest feedback. First I got stuck on 4th lesson with the CSS. Now I can probably solve it by focusing and spending some time on that.
But I am looking for learning react and not doing debugging on css.

The other thing is that when you paste in code into your existing index.html there is no full overview how the end result should look at. The JSfiddle seems not to be connected to 4th lesson, because there is more advanced code example in it. So you miss out that you need to include if you really want to see it on your browser.

I am giving up now as I get a bad feeling the lessons will continue like this and makes me focus on other thing than learning the basics of react.

Thanks anyway for trying give people free lessons on React. But I think you should look over the lesson 4 again as it seems not to be working (old links to css, jsfiddle?)

-- Friend

class Header should be class HelloWorld

I just noticed in the first snippet of code. It says class Header, should this be class HelloWorld instead as specified by the next statement that its HelloWorld component?

class Header extends React.Component { render() { return ( <h1 className='large'>Hello World</h1> ); } }

Example code images do not include styles

• it's not clear what stylesheet(s) are applied to the examples
• the examples use classes from font awesome, but the link to font awesome isn't mentioned or shown

So that if the reader is following along our days 1 through 4 looks like this...

And yours looks like...

This could lead to the reader believing they've made a mistake in React when it's really more a matter of style.

babel-core/browser.min.js is deprecated and should no longer be part of the course

Hi,

The <script src="https://npmcdn.com/[email protected]/browser.min.js"></script> has been deprecated for a while and should no longer be part of the course. It has been replaced with babel-standalone. Like to repo here along with info about browser.min.js: https://github.com/babel/babel-standalone

In fact, if you use the latest babel-standalone cdn instead, it will work just fine. However, you get the following warning in the console:

babel.min.js:24 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/

Therefore, shouldn't you add in the documentation that this use of script tags instead of modern workflows using npm etc. is outdated? And even add the warning that appears when babel-standalone is used? Otherwise it could be misleading or confusing for first time React learners.