Getting Started with ReactJS | JavaScript Frameworks Part2

Introduction to ReactJS

React is a JavaScript library that was originally created and was maintained, by Facebook. React is more like an open-source JavaScript library rather than a framework. It is mainly used for building stunning user interfaces with better rendering performance.

React has gained a good reputation within a short period. It was built with the aim of developing and operating the dynamic User Interface of the web pages. It gives the use of a virtual DOM and hence the integration of applications are more straightforward.

You will have to write less code with React and it even makes better due to the implementation of virtual DOM. This gives a huge weight on the scales when selecting it for a project. It provides React a sense of stability that more new frameworks lack. As React has just started its community is growing.

React is an effective framework and a tool for any large, comprehensive project and one of the most developer-friendly frameworks for 2020.

The following tools are required for developing a React application on any platform.

1. NodeJS

2. Node Package Manager (NPM)

3. IDE (WebStorm, VS Code) or TextEditor

If you don't have installed the above tools please visit my NodeJS article. It has step by step to download, install, and verify.

Link:- Getting Started with NodeJS | JavaScript Frameworks Part1

Installing with Create React App

All we need to do is open up your terminal, and run the following:

npx create-react-app <app-name>

Where <app-name> is the name of your app.

You’ll get output that looks like this:

Then, in the Terminal, type the following to get into the application’s directory:

cd my-app

Next, start the development web server and test run the default React application by typing,

npm start

Above command should also open your app in the browser on port 3000

Then, open up the application in your IDE. The first thing you want to look at is the project structure. Create-React-App has already installed several files for you and organized several of them into folders.

node_modules is where packages installed by NPM or Yarn will reside.

public is where your static files reside. If the file is not imported by your JavaScript application and must maintain its file name, put it here. Files in the public directory will maintain the same file name in production, which typically means that they will be cached by your client and never downloaded again. If your file does not have a filename that matters — such as index.html, manifest.json, or robots.txt— you should put it in src instead.

src is where your dynamic files reside. If the file is imported by your JavaScript application or changes contents, put it here. In order to make sure the client downloads the most up-to-date version of your file instead of relying on a cached copy, Webpack will give changed files a unique file name in the production build. This allows you to use simple, intuitive file names during development, such as banner.png instead of banner-2020-03-01-final.png. You never have to worry about your client using the outdated cached copy, because Webpack will automatically rename banner.png to banner.unique-hash.png, where the unique hash changes only when banner.png changes.

Component - Everything in React is a component, an application made of a collection of Components. Components usually take the form of JavaScript classes. You create a component by extending upon the React-Component class.

Props - Component is completely static. It renders out the same message no matter what. However, a big part of React is reusability, meaning the ability to write a component once, and then reuse it in different use cases.

State - The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.

React Router - React Router helps you create routes to your single-page applications. It’s very powerful and easy to use with your React application.

Webpack - Webpack is a famous JavaScript module bundler. Webpack helps you to maintain dependencies as static files for your project so developers don’t have to do it.

Webpack also comes with loaders. Loaders help run specific tasks around your project.