It will be a series of blogs where we are going to setup the react application from the scratch. It is completely for the beginners. If you are new to react then you can start learning from here. Let's start with a step by step journey of setting React Application from scratch.
TABLE OF CONTENTS
- Create react app
- Node.js - Installation
- Git - Installation
- Code editors
If you want to start coding in react without taking any configuration headache, then you can use create-react-app.
As per react docs:
Like this we have:
Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It includes styling and routing solutions out of the box.
Gatsby.js is the best way to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
To create our own configuration, we need:
- A package manager, npm or yarn. We will be using npm here. It help us in using the third party packages and easily install or update them.
- A bundler, webpack or parcel. We will be using webpack here. it help us in writing modular code and bundle it together into small packages to optimize load time.
These toolchains have created an abstraction in which they have hidden the configuration part. On top of which we can start building our applications. As a developer I can say, we are inherently curious nerds. And curious nerd ( like me 😉 ), would definitely want to know how things works and which part does what.
In this blog, let's setup the prerequisites, i.e environment and software. And to achieve our goal, we need to install:
- Code Editor
After installing node try below command in command line:
node --version or
Upon executing it, node version gets displayed in command line, marking a successful installation. Node installs npm by default. You can try to run.
npm --version or
Similarly, the version of npm gets displayed in command line.
Note* - If you are using your office system and office network, you might need to do some extra configurations. Configure .npmrc file with proxy, username and password. Otherwise you can not download packages by npm.
The most widely used modern version control system in the world today is Git. We need git while downloading third-party packages by using npm. Go ahead and download git from here and follow instructions from here.
To check whether git is installed or not, try to run
Above command will display the installed version of git.
We need an editor to write the code. It depends on your choice, which code editor you like. I am using visual studio code from microsoft. You can download and install it from here. Also, you might like to try atom or sublime text. You can find more detail on visual studio code usage for react here.
Almost all of the open source tools can be installed on every operating systems. I was using Ubutu LTS v18.04 (now using macOS Catalina). I never found any difficulties while installing and using open source tools.
Part - 2: React application project setup part 2.
Part - 3: React application project setup part 3.
Part - 4: React application project setup part 4.