The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App: State, Props, and Thinking in React

Building a React.js App: State, Props, and Thinking in React

12:00
In this video, we’ll build out the skeleton of our main React.js components. We’ll talk about how to think in terms of components as well as learn about state and props.
Watch this lesson now
Avatar
egghead.io

In this video, we’ll build out the skeleton of our main React.js components. We’ll talk about how to think in terms of components as well as learn about state and props.

Avatar
Marcelo

What you did to change the color of your browser console ?

Avatar
Marcelo

Why am I getting this error in the console: Uncaught TypeError: this.getParams is not a function

Avatar
xmen4u

In Profile.js , it should be "bio={this.state.bio.name}/>" , instead of "bio={this.state.bio}/>". Without this, React yells a warning:

"Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child."
and it's right! as it doesn't know what to property from Object / Array to print

Avatar
Tyler

I commented on this in the video. We'll fix it in a future video. We only do it to show the data is there initially.

In reply to xmen4u
Avatar
Jason

Why am I getting this error in the console: Uncaught TypeError: this.getParams is not a function

Use this.props.params.username if using react-router 1.0.0-rc1

In reply to Marcelo
Avatar
egghead.io

The lesson video has been updated!

Avatar
Mark

I'm stuck with when trying to load the profile (video 3:15), results in the console error:
bundle.js:829 Warning: [react-router] Location "//profile/blah" did not match any routes

The completed github code seems to run fine, but the syntax is completely different, and it's the completed code, making it very difficult / impossible to figure out why my uncompleted code isn't running.

Avatar
Tyler

Have you checked the specific branch for this video? https://github.com/tylermcginnis/github-notetaker-egghead/tree/03-react-router Might be easier to compare to yours rather than the final version.

In reply to Mark
Avatar
Aline Bastos

Mark, did you resolved this issue? I'm getting the same error..

In reply to Mark
Avatar
Harini

Mark & Aline, I figured out that it works if you have "//" added to your react-route, like below

<Route path="//profile/:username" component={Profile} />

In reply to Aline Bastos
Avatar
Carmen

I had the same error. Your solution worked well however, I don't quite understand why. Any ideas?

I just started this course so I'm using the latest as today. I'm using "react-router": "^2.4.1"
Thanks

In reply to Harini
Avatar
Seba Belmar

when you are typing "/profile/whatever", notice your have a hashed string after "index.html#/" before "/profile/whatever", it looks something like this "index.html#/?sf_31dsfds/profile/whatever", that hashed string in the middle now does not represent anything, so the browser is looking for a url called "index.html#//profile/whatever" but you don't have it, that's why you are getting this error. So when you testing route, delete the hashed part.

In reply to Carmen
Avatar
Owen

Hi, I recently started this series and am using the most-recent react router 2.6.1. I have been stuck for some time with a similar error "Warning: [react-router] Location "/Users/owen/Dev/github-notetaker/public/index.html#/profile/someone" did not match any routes. I have tried all the suggested solutions but am stuck now. I have changes my routes.js file to :

React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
var Router = require('react-router');
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;

module.exports = (
    <Route path="/" component={Main}>
        <Route path="//profile/:username" component={Profile}/>
        <IndexRoute component={Home}/>
    </Route>
);

I am still getting 'Warning: [react-router] Location "/Users/owen/Dev/github-notetaker/public/index.html#/profile/someone" did not match any routes' though and don't know what else to try. Any idea what is wrong here ?

In reply to Seba Belmar
Avatar
Steven

At 41 seconds you require "react-router" and say we'll need it later?
Maybe I'm missing something obvious but where later is this actually required? Do we need this line at all?
Thanks for the great series!

In reply to Tyler
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?