[React](https://reactjs.org/) is an open source front-end javascript library to build web application and websites. React is build by [Facebook](https://facebook.com/) in may 2013.

There are so many resources to learn react.js but here, I've shared my journey about how I learned react.js after learning javascript. Before to learn react.js, You've to learn basic javascript concepts.

## List of concepts to learn before react

-   Function Declarations and Arrow Functions
-   Template Literals
-   Short Conditionals
-   Three Array Methods: `.map()`, `.filter()`, `.reduce()`

Warning: These array methods are very useful while implementing data populating concepts where you'll fetch data from an API to your front-end interface. very useful while implementing data populating.

-   Object Tricks: Property Shorthand, Destructuring, Spread Operator
-   Promises + Async/Await Syntax
-   ES Modules + Import / Export syntax

Here's the [blog post](https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/) to refer all the things and I've list out above concepts from this article.

## Learning perspectives

There are 2 learning point of views by my side.

1.  Learn concepts by doing projects.
2.  Learn concepts by making notes for those concepts.

Personally, I prefer 1st aspect to learn any technology. Again, there's nothing is wrong with 2nd point of view. It's also a good way to learn concepts. But 2nd way is better when if we are learning any particular programming language.

### Here's, Why I prefer 1st way to learn react.js

I've noticed one thing while learning react.js or learning any framework or library implementation where every youtuber or anyone who is teaching react.js, there are directly implementing concepts of that library or framework in any project and again trust me, It's the best way to learn framework.

Tip: The best way to learn any framework is from it's own documentation.

## Where We've to learn React.js

So, Finally came to the point, I wasn't following any particular course from youtube or udemy. I switched to many courses and tutorials and finally I've realized the one thing, which is to learn react.js by doing projects and implementing concepts in my projects.

## Personal advice to learn React.js

So, my personal advice to learn react.js is to not stick to any one course or tutorial. The best way to learn react.js is to explore blogs which is written by developers but for that you need to get an index or kind of [roadmap of react.js](https://github.com/adam-golab/react-developer-roadmap)

So, first explore react.js road map [(github repository)](https://github.com/adam-golab/react-developer-roadmap) and then go with the flow. You can also follow youtube videos for any specific concept or a topic.

### Why I prefer online tutorials over books?

React.js versions update on daily bases. In current version of `react@18.2.0` There are top updates and it [changes](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) some code basis of index root files. In this versions they've [updated to server side rendering apis](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-server-rendering-apis). So, the point is when you're learning from books, it can't be update but online tutorials can be. That's why, I prefer to learn from online resources.

## Creating animations with react.js

There's one of the best library to create animations with react.js is called [Framer Motion](https://www.framer.com/motion/).

## React.js examples

Here, I'm mentioning the best websites for react examples

-   [ReactJs Examples](https://reactjsexample.com/)
-   [FreeCodeCamp Tags](https://www.freecodecamp.org/news/tag/reactjs/)

[I](https://www.abhidadhaniya.com/) and my developer friend [Rohan](https://www.rohankiratsata.xyz/) have created free resources to master full stack web development by using this [free resources](https://web-dev-resources.notion.site/web-dev-resources/Web-Development-Resources-be1207bcc32e434481c1ce6e90756964).

Eager to learn react.js? But don't know how and where to start?

Guide to learn react.js

Guide to learn React.js

There are lots of hosting services available to publish websites. Github is a free hosting service provider. You can publish your front-end website using github pages. Here, I will explain you how to publish your github website for free in easy steps.

Before you host your website on github first of all you have to learn about git. Git is a open source version control system to track your code history and changes. Git is created by Linus Torvalds (creator of linux).

You can upload your codes in github using git terminal or any other graphical user interface like sublime merge, Github desktop and also you can use vscode to track your code using git. Here is the blog post which is written by me on git.

If you feels hard to remember all git commands then you should use all commands cheat sheet [PDF](https://education.github.com/git-cheat-sheet-education.pdf).

## How to upload website code on github

### Upload files using git

First of all you need to create an account on github. So if you don't have any github account then you need to create it right now. Now, you need to create a repository by clicking on + icon which is shown in below picture.

![hello](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI7_O92CTZznLf0MDTVh3Y0P2npYc50rs3GQ&usqp=CAU)

Github will ask you about repository name and visibility of repository.

First of all let's set repository name. You need to strictly follow this rules to publish website from github. Your repository name must be unique and follow this sequence **`name.github.io`** Example : if your project name is **color-game** then you should set repository name `color-game.github.io`

You have to choose unique name otherwise github will not allow you to create repository. Once you create your repository and published your code in that repository then your URL of website is like `https://<username>/<project-name>/github.io/`

Once you pass and select the name of your repository then you have to choose **public repository** insted of private repository because when you want to publish your website you have to set your code as public repository.

![enter image description here](https://developers.sap.com/tutorials/webide-github-create-git-repo/_jcr_content.github-proxy.1563441917.file/p2_4.png)

Now, click on create repository and your repository will be created. Once you will create repository, you will able to see below picture.

![enter image description here](https://curriculum-content.s3.amazonaws.com/web-development/enough-git-for-learn-co/github_quick_setup.png)

Now, you have to click on marked copy button and it will copy the ssh URL of your repository. This URL called your remote repository URL. You have to open git bash by clicking right click in your website code folder. Make sure you are inside your code folder and you have to keep **`` `index.html` ``** outside any folder **(not from this folder)**.

![enter image description here](https://i.stack.imgur.com/7BI04.png)

> Before we use git commands make sure you have already set ssh key of your computer in github.

Now, you have to use basic commands of git. If you good at git commands then not any problem but if you don't know about basic git commands then first you have to learn all those commands.

Here, I will show some basic commands to upload files and folder to remote repository (GitHub Repository). This is called a local repository.

First of all we need to initialize repository using

```
git init
```

After initializing repository, we have to stage files and folders using

```
git add .
```

After staging all files and folder, we have to commit files from staging area. So that git can understand we have finally commit changes.

```
git commit -m "initial commit"
```

In inverted commas you can write any message about what you have change in code.

after commit we have to push our changes or files & Folder to local repository.

But, before we use the push command we need to add that remote URL to git so that out git can understand about where we want to push our files (at which location).

To add remote HTTP URL instead of SSH, we need to run this command

```
git remote add origin <remote url>
```

Don't forget to replace your remote repository url in above command like

```
git remote add origin https://github.com/abhidadhaniya23/demo.git
```

Once we add remote origin now we have to use push command to push all data on out github repository.

```
git push -u origin master
```

Once we don't this all process then we able to see our files and folder on github repository. If it's now showing your files and folder then you have to refresh your repository page.

Once again, make sure you keep `` `index.html` `` outside the folder so github pages can easily check `` `index.html` `` file to publish our website.

Now, you have to go repository setting and go to github pages. If you don't able to find github pages you can search github pages.

![enter image description here](https://i.stack.imgur.com/4upKT.png)

In github pages you have to select master branch. After selecting master branch also you have to mark below option to get secure connection in your website.

![enter image description here](https://docs.github.com/assets/images/help/pages/enforce-https-checkbox.png)

Mark this Enforce HTTPS to get secure connection for your website.

If you want to add any custom domain then you can add that also in custom domain but for now, we can keep it simple and default pages link.

Now, click on save button and it will show you website is publishing at **`<website-link>`**.

> Warning: When you click on that link you will see 404 not found error but don't worry github will generate your website page shortly. (around 20 - 25 min OR maximum 2 - 3 hours).

If you will not able see your published website you probably made any mistake.

## Conclusion

We discussed about how we can publish our front-end website using github pages. Github is a free hosting service provider by microsoft. We don't need to purchase money to host code of our website and we can easily host our website in github completely for free. I think it's the best platform to host front-end websites.

Publish frontend website using github as a free hosting solution

2 Posts found for Guide

Guide to learn React.js

Publish your first website using github pages

Want to build brand website?

2 Posts found for Guide

Guide to learn React.js

Publish your first website using github pages

Get the latest updates

Want to build brand website?