Building a React App From Scratch!
What is React?
React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page, multi-page and even mobile applications.
Installing Node.js
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
Node.js lets developers use JavaScript to write command line tools and for server-side scripting — running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser.
Go to Node.js official web site, download appropriate installation file based on your system and install it.
With the installation of Node.js, you can add npm packages to your projects and use various components/features.
npm is a package manager for the JavaScript programming language.
It is also the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.
Create Your First Project!
We should open the system terminal/command prompt and navigate to the path where your project will be located.
After navigating to the path, we should run the command below:
npx create-react-app NameOfYourProject
The “create-react-app” command is used for retrieving template project in order to start developing.
If you want to develop your project with Typescripts, you should also add the parameter “--template=typescript” like below:
npx create-react-app NameOfYourProject --template=typescript
After executing the appropriate command, Node.js will install all packages and dependencies. It can take some time, but don’t worry, everything is okay :)
At the end of the installation, navigate to the subdirectory whose name is NameOfYourProject that your gave on the prior command.
Run npm start to let your project start working on your localhost.
Doing this , we will be able to observe the effects of the changes we made in the code to our application. Open your browser and go to “http://localhost:3000/” to see your React project!
