Learning ReactJs

Part III

So this is a post on the fourth video tutorial here. At this point, I have set up the environment with babble, and webpack, and I have created a few components in the index.js file.

Now I am going to work with children (not the germ factories).

What I get about children is that you use them to nest data. I can see that being advantageous if only some parts of your data are dynamic (changing). But, there maybe some more uses I cannot see at the moment. If you ask Mr.Google, “Why use children in React?” you get nothing. I may be missing something but… oh well. It may be one of those things you learn with practice.

I added a child to the ProfileLink component that was the username acting as a link to the profile on GitHub.

Next, I started on the routers. This allows mapping of components with custom URLs. First, I needed to install react-router using npm. Then I created another folder inside the app folder called config. Inside that folder, I made a file called routes.js. This file will house all the routes for our app.

I needed to require some things in our routes.js file.

1. React => var React = require(“react”);
2. React Router =>var ReactRouter = require(“react-router”);
3. Router => var Router = ReactRouter.Router;
4. Route=> var Route = ReactRouter.Route;
5. Index Router => var IndexRoute = ReactRouter.IndexRoute;

I then required (as a function) components that I had yet to build (Tyler says we will build them later) . These will be in the soon-to-be components folder

var Main = require(“../components/Main”);
var Home = require(“../components/home”);

After that, I made the routes variable and also add an export module at the bottom.

This is my router component (so far)

var routes = (
<Router>
<Route path=’/’ component={Main}></Route>
</Router>
);

The script in the middle keeps the main component active. What happens is that we can retain a header or a footer while we navigate through the routes and so some of the content may change while others stay static. Tyler gives the example of twitter header.

quickly, I created a components folder and in that folder I created a Main and a Home file. In those files, I created one component that shared their name. They were pretty much identical except that Main will always be active so we have to ask it to render it’s children. In the render function, I needed to add a this.props.children .

Now, I have to go back to out index.js in out app file and delete all the components except the ReactDom and add one more requirement to the list

var routes = require(‘./config/routes’)

In the ReactDom, instead of the Avatar line, I put in, routes.

After this is all done, I reran the production command and… it didn’t work. 0:35 in the morning, and it didn’t work. So I started to cry… no.

So I started with the obvious, maybe I did something wrong. Then I think… “what version of react-router do I have?”. I know that Tyler used 2.0- something. I check my package.json. Sitting nonchalantly, next to the words react-router was the number 3.0.0. So I changed it to 2.0.0 and ran npm install. That fixed it!

So now what the heck is this IndexRoute I required in my routes.js?! From my understanding, it’s like a default route. If you go to any URL other than a specified route, the IndexRoute component will show.

Inside the components folder, I opened up the Main.js file and added a class to the component I rendered earlier. The class was called “main-container”. Then I added hashHistory to the routes.js file by first requiring it and then adding it to the routes component.

If you want to see the full code, you can see it here. This code isn’t mine, I have been copying and studying from the tutorial. Check it out and see for your self. This is my first interaction with React and I would love it if you gave me some tips or cool resources. Also, if you could give me examples of why it would be helpful to use children, I would really appreciate it.