A beginner’s guide on how to build a React single page application from scratch and how to connect it to Github
If you are facing the challenge to build your first project in React and don’t know how to start, you are not alone. Learning a new technology and not knowing how to proceed can be an intimidating experience. However, having a step-by-step guide for tackling the task can help you to gain confidence, organize your thought process, and get your own project off the ground. With practice, creating a single page application in React can become a much easier and enjoyable experience. This article is a beginner’s guide where I teach you my approach on how to build a React application from scratch and how to connect it to a Github repository.
Step 1 —Creating a React app from scratch
Firstly, make sure you have the newest version of npm, by running “npm install -g npm” in your terminal:
Still in your terminal, navigate to a location where you would like your React application directory to be located. Then, create a name for you app and run the following command, with your app’s name instead of “your-app-name”:
Note that there is no need to run “npm install”, because the “--use-npm” flag instructs Create React App to install the dependencies.
Now that the barebone of your app was created, let’s navigate into it by changing directories, so run this command in your terminal (remember to type your app’s name instead of “your-app-name”):
Run “npm start” to open the React application in the browser. The app will display some default content and you can now start building it from here, with the features and functionalities you want.
Step 2— Creating features for your React app
To start coding your application, you need to open it in a code editor program. I use VS code for that, so, assuming you have this program installed, type “code .” in your terminal:
Start building the features you want. You can, for example, implement a client-side routing structure, like I did for my project. For that, I used React Router, a routing library for React that allows us to link to specific URLs and conditionally render components depending on which URL is displayed.
Note that, if you want to use a db.json file to get your data from, you will have to manually add a server script in your package.json file, as Create React App does not automatically add this script. Create a db.json file and type your data in it. Then, open the package.json file, look for the “scripts” key and add “server”: “json-server --watch db.json -p 6001” inside it, like in the example below.
Close the app in the browser and type “npm run server” in your terminal, to start up json-server. Then, in a new terminal tab, run “npm start” again.
That’s it! With Create React App, it is fast and easy to get a React app up and running. But, before we finish this article, there is just one last step you need to do, in order to save your code and to be able to share it.
Step 3— Connect your app to a Github repository
Assuming you already have an account at Github, click on your profile picture, then go to “your repositories”.
Click on the “new” green button at the top-right corner, to create a new repository.
Look at the field “Owner” and make sure you are the owner of the repo. Then, type your repository name, which should match the name of your app. Select the “public” option and click “create repository”, like in the snippet below:
Now that you have created your remote repo, you need to connect it with your app, so you can start committing and pushing changes.
Go back to your terminal, make sure you are in your app’s folder and type “git init”. This will initialize your repo in the terminal.
Then, run “git remote add origin” followed by the URL of the remote repo, like in the example below (copy the repo’s URL from the browser’s address bar).
After that, run “git add .”, then run “git commit -m ‘initial commit’”.
Then, run “git push -u origin”, to have your changes saved in the remote repository.
Conclusion
Congratulations, you now have created your first React app from scratch and connected it to a Github repo! Create React App is definitely a handy solution to quickly get past any setup and get straight to designing your app.
Thank you for reading. Please leave a like if you think this article is useful, and leave your comment or feedback. Also, if you are a beginner, always remember that one small step at a time will get you there! Happy coding! :)
Sources:
