Create your first React App — Your Online Portfolio — and deploying

From Starting to End.

Prerequisites: HTML, CSS, javascript, (node.js would help too, but I will be explaining that part when things come up)

1. First, your systems must have Node.js installed. Download from here -https://nodejs.org/en/download

2. Once installed, go to your folder where you want to create your first-project in CMD, and type the below code and press enter -

npm i -g create-react-app

npm is a node package manager pre-installed with Node.js and this will install create-react-app. here ‘ -g ’ stands for “globally”.

3. Then in the CMD -

create-react-app [your-projectname]

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want.

4. Now-

cd your-projectname
npm start

5. This will start your project on localhost:3000.

Everything Working? YAYYY!!!

Good Till Now, I hope no problem. If any just ask in the comment section

6. Now I’m using the VS Code, but you can use any editor. (Sublime/Atom or whatever you like). Open the whole project in your editor.

Also, you have to open another cmd in the same folder path (coz the other one is occupied- running your project on a server, so you can test). If you want to close the server press Cntrl +C.

7. Now we’re gonna understand, what create-react-app has created for us.

8. In the rootFolderOfYourProject/public folder, You’ll find index.html. This will be the only html file in your whole project. That is why it is called SPA (Single Page Application). Here you can add any CSS, or javascript files like (jquery).

9. Now in rootFolderOfYourProject/src folder, You’ll find App.js. In the return(), you can write your own html and it would reflect back in the web browser.

10. Now to add different components with react-router-dom features follow-

First run this command in cmd opened, to install react-router-dom.

npm install -S react-router-dom

Whenever you run commands involving `npm`, there is change in package.json file in the root folder.

When you run npm install [package_name], that package_name would be added in the package.json file if you see.

And the package is added in node_modules folder in the root folder.

If you’ve come till here, Greeeat!!! :) Not a long road ahead.

Now whatever we’re gonna do, we’re gonna do in /src folder.

11. In the /src folder create new files About.js, Home.js, Navbar.js.

and just copy your code and save, and see the output in the web browser.

Home.js

We’re gonna use these components we’re creating - as per the need.

import React, { Component } from "react";
export default class Home extends Component {
render() {
return (
<div>
<h1>Home</h1>
Hello guys. Visit <a href="https://anant-dev.web.app/">my portfolio</a>
</div>
);
}
}

About.js

import React, { Component } from “react”;
export default class About extends Component {
render() {
return (
<div className=”lead”>
<h1>About me</h1>
<br />
Hi I’m Anant Rungta — an open source Enthusuast.
<br />
See my projects <a href=”https://github.com/Anant016">here</a>
</div>
);
}
}

Navbar.js

In this file, only the Link is important. Link is used for navigating b/w components. See the next App.js file to understand more clearly,

import React, { Component } from “react”;
import { Link } from “react-router-dom”;
export default class Navbar extends Component {
render() {
return (
<div>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<Link to=”/” class=”navbar-brand” href=”#”>
<b>Resume</b>
</Link>
<button
class=”navbar-toggler”
type=”button”
data-toggle=”collapse”
data-target=”#navbarNav”
aria-controls=”navbarNav”
aria-expanded=”false”
aria-label=”Toggle navigation”
>
<span class=”navbar-toggler-icon” />
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<Link to=”/” class=”nav-link” href=”#”>
Home <span class=”sr-only”>(current)</span>
</Link>
</li>
<li class=”nav-item”>
<Link to=”/about” class=”nav-link” href=”#”>
About
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
}

App.js

To use different components we’ve to wrap the whole doc with Router. See the implementation and syntax for Route in the given code.

Here we’ve imported the components we created above and used.

import React from “react”;
import { BrowserRouter as Router, Route } from “react-router-dom”;
import About from “./components/About”;
import Home from “./components/Home”;
import Navbar from “./components/Navbar”;
function App() {
return (
<div className=”lead “>
<Router>
<Navbar />
<div className=”mt-5 container”>
<Route exact path=”/” component={Home} />
<Route exact path=”/about” component={About} />
</div>
</Router>
</div>
);
}
export default App;

So this is it.

Hosting your Web Application

There any many services to host your application like firebase, Heroku. But we’re gonna use Github.

1. Run the below code in your root folder -

npm install -S gh-pages

2. In your package.json file, locate “scripts” add these lines of code:

{
   ...
   "predeploy": "yarn run build",
   "deploy": "gh-pages -d build",
   ...
}

3. Now add your repository in your GitHub account by git add, commit and push commands.

4. Then Run

npm run deploy

Your project is hosted now!! Hurray!!!

You can find your link by going in your GitHub repository -> settings.

So this is the end of our project. I hope you all reached till the end and understood every part. I’m very glad if you did.

My project Link — https://anant016.github.io/React-for-beginners-course

Find my code at — https://github.com/Anant016/React-for-beginners-course

Thank you. Comment, claps would be appreciated. Do see my other projects on gitHub.