Getting Started with React

What is React?

React is a component-based and JavaScript library for building interactive, scalable, maintainable, and performant user interfaces, used for web development which handles the view layer of the web application. It lets you to separate the complex user interface of an application into independent reusable components that form the building blocks of the whole application.

Key Features of React JS

1. Declarative programming: React allows you to describe how your UI should look at any given point in time, rather than imperatively manipulating the DOM. This makes it easier to reason about your code and write reusable components.

2. Component-based architecture: React encourages a modular approach to building UIs, where each component represents a self-contained unit of functionality. This makes it easier to build complex UIs and reuse code.

3. Virtual DOM: React uses a virtual representation of the DOM, which allows it to optimize updates and minimize DOM manipulations. This can improve the performance of your app and reduce the risk of bugs.

4. JSX syntax: React allows you to write HTML-like syntax within your JavaScript code, which can make it easier to visualize the structure of your UI and catch errors early.

5. Unidirectional data flow: React follows a unidirectional data flow, where data flows down from parent components to child components. This can make it easier to manage state and avoid data inconsistencies.

6. React Native: React also supports building native mobile applications for iOS and Android platforms, using a similar component-based approach to building UIs.

Why do we use Node.JS to create React App?

React uses Node.JS(JavaScript Runtime) to build your JavaScript code and it provides all the dependencies needed to run your React app. During development, Node.JS uses NPM (Node Package Manger) registry to install the new packages as well as to create production bundles using webpack and other Node modules.

Install Node.JS (We need Node.JS >=14 on your local development machine)

Install VS Code

Useful Plugins: The following plugins can be installed in your VS Code.

ES7 React/Redux/GraphQL/React-Native snippets Tailwind CSS IntelliSense npm intellisense

Using Create React App

After installing Node.JS, you can create a new Single Page React Applications, open a command-line interface (CLI) on your computer or terminal window in VS Code and create a new React app by running following the command, where "App-Name" is the name of your app. Wait for the installation process to finish. This may take a few minutes.

> npx create-react-app <App-Name>

Note: 'Create React App' helps to setup a React app with modern build setup with no configuration. It lets you to focus on code, as we don't need to install or configure build tools such as webpack or Babel.

Once the installation is complete, navigate to the new app directory by running the command: cd app-name, where "app-name" is the name of your app.

> cd app-name

Start the development server by running the command.This will open your app in a web browser and display a "Welcome to React" message.

> npm start

You can see your app at http://localhost:3000/

Start editing the source code of your app in the "src" directory. You can use a code editor like Visual Studio Code to do this. Save your changes and watch the app reload in the browser automatically. You can also see any errors or warnings in the console.

​import React from 'react' 
const App = () => {  
 return (    
    <div>  	
       <h1> Simple React Component</h1>    
   </div>  
   ) 
  }
export default App;

Note: Customize your app by adding new components, libraries, and features. You can use the React documentation and community resources to learn more about React development.

Deploying React App to Production

Once you're ready to deploy your app, run the command: npm run build. This will create a production-ready version of your app in the "build" directory, which you can deploy to a web server or a hosting service.

> npm run build