New Journey: Getting Started With React - Introduction & creating your first React App

New Journey: Getting Started With React - Introduction & creating your first React App

I've have been using mostly Angular for all of my projects and it is my go to js framework for builidng web apps. But recently have been hearing alot about react js from the community and decided to give it a try again. As of now, I have been pretty much impressed how far react has come up from what it was 2 years ago when I initially tried it and then settled with Angular.

What is React ?

React is a front-end js library. The perks of react are it's easy to get started compared to other js frameworks like angular. Secondly there is a huge community support for react which increase the chance of getting help and also directly affects the number of jobs in the industry. The cons of reacts are firstly high pace of development in the react world everything changes very quickly, the community adapts pretty quickly, so you always have to be ready to re learn new ways to do things. Secondly its only concerned about the view part and requires additional packages anything else for e.g. routing, advanced state management.

Prerequisites

The barrier entry for getting started with react is pretty low, you just need the following

  • Basic HTML, CSS.
  • Basic JavaScript, ES6 (Optional you can learn it on the fly while building your react apps).
  • Basic understanding of the DOM.
  • Nodejs installed globally on your machine

Creating your first react app

Creating reactjs app is easy, just use create-react-app with npx as shown below and would create a working react project with the latest version of react and its dependencies

npx  create-react-app  app-name

Running your first react app

cd  app-name && npm start

This would spin a local development server at localhost:3000, Visit localhost:3000 to view the app running in the browser.

Building your first react app

When you have finished building your react application, you can build it out using the following command, it will create a optimised version of your react app inside the build directory.

npm run build

Deploying your react app

The final build project is a js project and can be hosted in any js environment that is almost anywhere as of now Apache, Heroku, Github pages, Amazon aws are a few of the widely used hosting platforms for react apps.

And that's it!

I hope this tutorial has been helpful for you to get started with react. You can have lots of fun with react, let me know about your react projects in the comments.

Thanks for reading and have fun learning! Cheers!