React Beginner: Part VI

Finishing the app and deploying

We are finally here. The journey has been pretty exciting so far. We learnt some of the core concepts of React like lifecycles and state lifting. In this finale article, we will make our app fully functional and then will deploy it so that it is open to outside world.

Conditional rendering:

Ahh…new words…. Conditional rendering is an if statement which renders component when it evaluates to true.

Here is an example

If the HelloWorld component has a prop called name then it will render different markup otherwise it will render the default one. Here is a short-hand syntax.

So how are we going to use this? In our case, data won’t be available until the user gives the location access or types anything in the search box. So at first, we will display a text instructing how to get started with our app and when the data is fetched we will display the actual app layout. Cool right. Let’s do this.

We are going to modify the render method of App.jsx. Make sure render method looks like this.

Line 29: ternary operator for conditional rendering

TodayComponent, ListComponent and GraphComponent are wrapped inside React.Fragment and stored in mainAppLayout. Instruction is stored in instructionLayout.

React.Fragment allows us to wrap components inside it without adding additional div to the DOM. Read More here.

Add this style to App.css.

We are done with conditional rendering. So if you now run the app, it will show you the instruction and if you allow the permission it will render the whole app. Go and test it.

Sending data to components and replacing hard-coded strings:

Add a prop data to Navbar, TodayComponent, ListComponent and GraphComponent in App.jsx and the value of this prop is going to be the corresponding data available in state. Like this.

We are also passing unit to TodayComponent because wind speed unit depends on it.

Now we will use this data prop in each component to replace the hard-coded strings. Let’s start with Navbar component. There is only one string to replace here i.e. city name.

Now open TodayComponent.jsx.

Writing this.props.data can get tedious some time so to ease this up we will use ES6 object destructuring to take out the variable from the props.

This is how render method looks after putting actual data.

Next one in the list is ListComponent.

As you can see we have removed the constructor and now iterating over an array that was passed by App component.

And the final component arrives…

Here we’ve just provided the data to Sparklines through this.props.data and we no longer need the state so remove the constructor.

With this, you have a fully functional responsive weather app made with React. Go ahead and run the app.

Deploying on GitHub pages:

If you have such great weather app then why you should keep it to yourself. Show it to the world. Deploy on Github Pages. Yes we are not done with app yet.

Follow these 5 simple steps to deploy on Github pages. (I am assuming that you have git installed)

Step 1: Creating a repository on Github

Login to your Github account and create an empty public repo with a name that you want for your page.

Step 2: Making our project Git and Github aware

Open the project folder and run the following command in your terminal/command prompt to make it git aware.

git init

To add your Github repo’s link (remote origin) to your local project folder go to your Github repo. Click on Clone or Download and copy the link provided there.

Now on your command prompt and fire this command

git remote add origin {link-you-copied}

Now your app knows where to put the build files.

Step 3: Making our app Github-pages aware

Install GitHub pages npm package in our app by running this command,

npm install gh-pages –-save-dev

Now add homepage key to project’s package.json.

The value of homepage should be in this pattern:

https://{github-username}.github.io/{github-repo-name}/

Step 4: Adding script to deploy our app

Add the following script to scripts object of package.json.

"scripts": {
...
"deploy":"gh-pages -d dist"
}

deploy script will push whatever is in the dist folder to our GitHub repo by creating a new branch with name ‘gh-pages’.

Step 5: Deploying and Testing

Run the following commands:

npm run build
npm run deploy

If everything goes correct then you should see a “Published” message. Like this.

Now open the link that you added as homepage in package.json.

TADA…!! You have successfully deployed your first react app. Congratulations and don’t forget to share the link with your friends.

Conclusion:

The purpose of this article series was to build something more than a ToDo app that covers basics of React and I think we did accomplish that. Building an app from scratch and deploying teaches a lot about end-to-end project development.

This app was very simple as it had single layout/route and very trivial state. A real world react app will have different pages associated with different routes and each page will have its own state that may be needed in another pages. This can become pretty complex as the app grows.

I started this series talking about React and its community. It’s time for you to use those community developed libraries and build something amazing. Among all the libraries, I would suggest you start with redux (or any other state management library) and react-router as these are essential for any complex real world app.

Keep learning. Keep coding.

If you liked this article don’t forget to clap 👏. If you have any suggestion or query feel free to post here in comments or ping me on twitter.