Disha Jain's blog
Introduction to React

Introduction to React

Disha Jain's photo
Disha Jain
·

4 min read

Table of contents

  • React is an open-source JavaScript library for building user interfaces.

  • It was created by Facebook and is widely used in web development.

  • React allows developers to create reusable UI components and manage the state of an application more efficiently.

  • React uses a declarative approach, meaning that developers write what they want to achieve, and React figures out how to do it.

  • React can be used to build both web and mobile applications and is often used in combination with other libraries and frameworks.

  • React uses lifecycle methods to manage the lifecycle of a component, such as when it is first created or when it is about to be removed from the DOM.

  • React is known for its ease of use, efficiency, and ability to create complex and dynamic user interfaces.

  • React can be used with various tools and libraries for development, including TypeScript, webpack, Babel, and more.

Hello World Program

To create a "Hello, world!" program in React, you'll need to do the following:

  1. Set up a new React project: You can do this by using a tool like Create React App.

  2. Create a new component: In React, components are the building blocks of the UI. You can create a new component by creating a JavaScript file that exports a function or class.

For example, you could create a component called HelloWorld that looks like this:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, world!</h1>;
}

export default HelloWorld;

This component simply returns a h1 element with the text "Hello, world!".

  1. Render the component to the DOM: Once you have your component, you can render it to the DOM by using the ReactDOM.render() method. This method takes two arguments: the component you want to render and the DOM element you want to render it to.

For example, you could render your HelloWorld component to a div element like this:

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

This code imports the ReactDOM library and the HelloWorld component, then calls the ReactDOM.render() method to render the HelloWorld component to a div element with the id of root.

When you run this code, you should see the text "Hello, world!" displayed on the page.

And that's it! This is a very basic example, but it demonstrates the basic structure of a React component and how to render it to the DOM.

Overview of the hierarchy of React files-

There are some common files and directories that you may find in most React projects. Here is a general overview of the hierarchy of React files:

  1. node_modules: This directory contains all the dependencies that are installed for the project. This directory is usually generated automatically by the package manager such as npm or yarn.

  2. public: This directory contains static files that are served by the web server. This includes the index.html file, which is the entry point of the React application.

  3. src: This directory is the main source directory of the React project. It contains all the components, styles, images, and other assets required for the application.

    a. index.js: This is the main entry point of the React application. It usually imports the necessary modules and renders the top-level component.

    b. App.js: This is the main component of the React application. It usually contains the routing logic, state management, and other application-level logic.

    c. components: This directory contains all the reusable UI components of the React application.

    d. styles: This directory contains all the CSS or SCSS files used for styling the application.

    e. assets: This directory contains all the images, fonts, or other static assets used in the application.

  4. package.json: This file contains the metadata of the project, such as the name, version, dependencies, scripts, and other configuration details. It is also used by the package manager to manage the project dependencies and scripts.

  5. package-lock.json: This file is generated by the package manager to lock the version of the dependencies installed in the project. It ensures that the same version of dependencies is installed across different environments.

  6. README.md: This file contains the documentation and instructions for the project. It usually includes the installation guide, usage instructions, and other important details about the project.

ReactJSXHello World