**For this section I am going to assume you have installed node with npm and create react app** If you have not you can follow this tutorial for installing node and this tutorial for installing create-react-app. **
Let’s try to recreate the timeline section of Twitter.
But before we do any coding let’s do some planning and think about how we will go about this.
- We know we have two parent components but these should probably go in a separate container and we will call it app
- The app container will have two components called the title and content.
- For simplicity purposes the content will all be hard coded, for now.
Let’s stat coding
1. Building the Container
Let’s build the main component, and because when we created the new folder with create-react-app it created everything we need with it. We can just clean up the app.js file to look like this:
This will be the parent component for the whole application. This is code that we will be using a lot. This is probably something that will be second nature as the days go by.
2. Building the Child Components
We are going to build two separate components. Each component will be a separate file. First thing we want to do is to start putting our components in a separate folder. Let’s call the folder components and each file will have the extension of .js.
The folder structure will look like this
- App.html
- component folder
- Title.js
- Content.js
Let’s build the title component and it will look like this
There are a few lines of code that are new. Mainly at the top and bottom.
Let’s talk about these lines.
import React, { Component } from 'react';
To work with React we need to import React and it’s component class. React is the default export of react, so it’s not necessary to put curly braces around it. Component is not a default export so it does need to be wrapped in the curly braces.
export default Title;
For now it’s good enough to know that Export and Import treat the information as a variable that is transferred back and forth between files.
Which means that we need to import the data and the place where we will be doing that is the App.js file.
At the top of the file we will add the line
import Title from './components/Title.js';
This line will take the content that was exported from the file at ‘./components/Title.js’ and put it in the App.js file.
The content child is a bit more code but it’s not that much different
It looks like a lot of code because we hard coded the information for our first timeline post.
Because we exported the content we need to import it into our App.js file. If we save everything and start our server there is a white page. Even though we did all this work, we have nothing to show for it.
No reason to be mad yet, we just need to
Put it all together
If we don’t tell React what to render it will not do anything. We imported the files but we need to set the Title and Content components into the App component. We do this with two lines.
<Title /> <Content />
will do this for us.
And that’s all there is to it. We are now able to write multiple components and we can build more complex applications.
But you might have noticed that it’s lacking something and that something we will work on in future posts. We will be creating some dynamic data.
Claudia Maciel 