How to Make an App in ReactJS: Part 1

Create a platform such as Medium using tools such as ReactJS and Firebase.

This is part 1 of the series where we dive into the structure of ReactJS applications, reusability of code, ReactRouter, and integrating a backend into the project to create a full-stack application. By the end of part 1, we will be rendering out a list of dummy courses, and by the end of the series we’re going to have a mini-Medium, so let’s get started!

React is a very complex library, but luckily, the development team made it easy to get started with an application. Let’s get the development environment set up. To do this, you can go to the React homepage, or follow this article I wrote on how to set up your environment. Create an app called “medium”, enter the folder, and run “npm start”. From here, we should have an application that simple shows the react symbol with a gray background.

The beginning

Once you open the app, you should see three folders: src, public, and node modules. The src folder is mainly where our work will be done. We will add files called React Components that come together to build the whole product. A component is a specific piece of the larger application, like ingredients in a recipe. To generate components for our mock medium, we need to think of how to break Medium up into respective components.

Medium Structure: Header, Posts, Sidebar

You can choose a different way of separating Medium out, but this layout was the most obvious to me. Now that we have a good idea of how to separate the application, let’s start writing some code. If you open the App.js file in the src folder, we can see our first component. We want to separate the app into three pieces: header, posts, and sidebar. Let’s first start creating the header component. First, delete everything within the div.App and add our header, <Header />. Your code should look like this:

But what is Header? Since we added this made up component we need to also define it. So create a new file Header.js with a div that says Hello World. Your code should look like this:

We created the Header component that says Hello World (I don’t like creating too many files so the css will just go in the App.css file). But if we refresh the page, the browser says Header is not defined. That’s because we created a new file, but we still have to reference that file in App.js. So add the line

right below all the other imports in App.js. Now we see a basic Hello World. Let’s expand on this. You can add any HTML content inside of this div and it will be rendered out as usual. On your own: Try to add a title for your app on the left side, and a “Write your story” and “Drafts” button that we will add functionality to later. Make the Header look like the fixed navbar and get creative. Here is my code and the styles (the Header styles all start with Header-).

Now that we have the Header set up, we can add the posts. We’ll do the same thing we already did, add our <Posts /> tag right below Header, create a basic Posts.js file with the Hello World div like last time. And now, import the file in App.js. Make sure that the class name you are creating and the class name you are exporting are the same.

Within this Posts div, create a new div with the classname of Post. Create a simple post that has a title, the authors name, and some random text. So far I have this:

But wait… if we have ten posts we can’t manually type up each post. We need a way of dynamically generating each new post every time we have a new one. One way we can do this is by creating a new component that is just a single post. Instead of rendering out all the Posts in the Post component, we will create a new component with all of the information for that post: the title, author, and text for that post. You may be a little confused, but it will get more clear in a second. The only important thing I said so far is to create a new Post.js file with the Post div inside. This is what it should look like:

Since we are putting each Post in the Posts component, we need to import it in the Posts.js file and add our <Post /> to the same file. Now we can add logic to remove and add posts dynamically. Slowly, we can see how our app is being built. Many Post components make the Posts component which, with the Header component, makes the App component. We’re almost done with this first part where we display many posts. But first, let’s style up our current application. On your own: Try styling up the post component so that it looks nicer when displaying each post. You can make it look like Medium previews or anything else… get creative! Here is my code (don’t worry about the {} we handle those later).

Great, now we have one Post showing, how are we supposed to get the title, text, and author for many posts. I’ve created a file of sample posts. Create a file called sample-posts.js in your src folder and paste the list in there. You can change the information inside the strings to whatever you like, but basically this file creates an object of author keys (this is not important right now) that points to information about a certain post that the author, with that specific authorkey, wrote. Now, we’re going to dig into some of the key aspects of why React is such a powerful framework.

State

When data is going to change within an app (like the posts on a Medium page or the messages in a chat), we add that data to the state of a component. The state of the component holds all the information it needs to know. For example, since our App displays posts, we must add data about the posts to the App component.

First we will import our sample-posts.js file into our App component.

We want to add a state variable called posts. We can do this by creating a new function right above our render() function in App.js called constructor(). Within constructor we will create our state object and create an empty posts object. It should look like this:

The constructor function basically holds the information about this component. It is very similar to the constructor function for a class. Make sure that you call super(). If you have a constructor function, you must call super so we can access the “this” variable. We want to set the posts to the samplePosts after we press a button “Load Sample Posts”. First, right below our <Header /> tag, we’ll add the new button (it’s okay if it looks ugly). Now how do we check if the button was clicked and, more importantly, set posts to samplePosts. React has a nice set of callback functions that you can add to your HTML tags. Within this button, we’re going to add this onClick handler that calls a function called loadSamplePosts. Create the function as well that simply logs ‘this is the post function’. It should look like:

When the page refreshes there is a compiler error. That’s because we have these HTML tags, but how can we call a javascript function within them? The react solution was to come up with this new format which is JSX. It looks exactly like HTML, but if you want to add any javascript in the HTML, you have to put them in {}. In addition, we add the .bind(this) so that the loadSamplePosts function can access the “this” variable. So, your function should now look like:

Now there’s another problem, loadSamplePosts is not defined… If we want to call any function within a React component, we need to preface it with this. otherwise React does not look for functions within the component. Finally, our function looks like:

Phew! Alright, now we can modify the state of our application simply by calling the setState function. Whenever this function is called it reloads the state of the application and reloads any part of the application that includes that specific state variable. For example, let’s add a p tag that holds the count of objects within the posts state variable (remember that any javascript within the HTML tags should be surrounded in {}):

The function counts the number of keys in this.state.posts. You will notice immediately after pressing the button, the page doesn’t reload only the h1 tag changes in value. So we want to pass this list of posts down to the Posts component so that Posts can render out each individual Post. Okay, so how do we do that? We can pass down information to a child component by using the second powerful tool of React.

Props

When you want to pass information to a child component, use props to pass this information down.

We add props as follows (in App.js & remember that all javascript in the HTML must be in {}):

Any variable in the props of a component can be accessed through the this.props variable. For example, if we modify the Posts.js file to be:

I got rid of the <Post /> tag, we will add that in later. Now, if we refresh the page we will have two h1 tags that change after the press of the button. Okay, it looks like we’re almost there. Now we have to render each Post based on each key, value pair in the this.props.posts variable in the Posts component. In our render function, we must map over each key in the this.props.posts variable. We can do that in javascript with a function called map. First, we will retrieve the keys of the dictionary, and then map over it by calling a function showPost that will return that specific post. (Again, pls remember the curly braces since it should be right below your h1 tag)

On your own: Try to implement the showPost function to return a Post component. The Post component should inherit a post prop that has all the information to that specific post. (Hint: The way you can access a specific post is this.props.posts[key]) Here is the code:

Pretty simple right? After refreshing the page, and pressing the loadSamplePost button, we get 8 posts showing, but they all look the same. Well, that’s because we hard coded the information about the post in the Post component. On your own: Try changing our Post.js file so that the author, title, and text are pulled from the post props and not hard-coded. (Remember that these values can be accessed with this.props.post.author etc. and if they are placed in the HTML tags they should be in {}).

You can see the final solution here.

Woo! You are now super cool and can create React components. Hopefully you now have a better understanding of state and props. If there was anything confusing please let me know! Next, we will learn about creating a Draft.js component and an Article.js component that will allow you to type up a new draft and display an article that you click on, respectively. The main difference about these articles is that they will have different links such as /draft/randomstring1 and /posts/randomstring2. We will use React Router to help us with this logic. On your own: Try implementing the Draft.js and Article.js components.

Extra For Experts

Implement your own Sidebar component that has a state which contains all the tags a user is interested in. Get creative with this! I’ve implemented my own which is included in the solution above.

Hello, I’m Hershal Bhatia, currently a Software Engineer at Amazon – AWS where I am building out a new service. Check out more at www.hershalb.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store