Scribd
Upload
35 views7 pages

1-Chapter-1 - Introduction

Uploaded by

geeta sree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views7 pages

1-Chapter-1 - Introduction

Uploaded by

geeta sree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Chapter-I Introduction to React

1. What is React?

- React, often referred to as React.js or ReactJS, is an open-source


JavaScript library for building user interfaces (UIs). It was developed by
Facebook and is now maintained by both Facebook and a community of
individual developers and companies.

- React is a popular choice for creating interactive and dynamic web


applications.

● Library for UI: React is not a full-fledged framework but rather a library
focused on the view layer of an application. It helps you build user
interfaces efficiently.

● Declarative: React uses a declarative approach to define how your UI


should look based on the current application state. You describe what you
want, and React takes care of rendering it correctly.

● Component-Based: React encourages a modular approach to building


UIs. UIs are composed of independent and reusable components, making
it easy to manage and maintain large applications.

● Virtual DOM: React uses a virtual representation of the Document Object


Model (DOM) for performance optimization. When data changes, React
calculates the most efficient way to update the actual DOM, reducing
unnecessary re-renders.

● Unidirectional Data Flow: React follows a unidirectional data flow, meaning


that data flows in one direction from parent to child components. This
helps in understanding and debugging the application's state.
Chapter-I Introduction to React
2

2. Why use React for building user interfaces?

a. Efficiency: React's virtual DOM and smart diffing algorithm make updates to the
UI efficient. This leads to better performance and a smoother user experience.

b. Component Reusability: React promotes the creation of small, reusable


components. This reusability saves development time and reduces code
redundancy.

c. Ecosystem: React has a rich ecosystem of libraries and tools (e.g., React Router,
Redux) that extend its functionality and make it suitable for building various types
of applications.

d. Large Community: React has a vast and active community, which means plenty
of resources, tutorials, and third-party components are available. You can find
solutions to common issues and stay up to date with best practices.

e. SEO-Friendly: React can be used on the server-side (server-rendered React) to


improve search engine optimization (SEO). This is important for content-driven
websites.

f. Developed and Backed by Facebook: React was developed by Facebook, which


means it's been battle-tested in large-scale applications. It's actively maintained
and improved.
Chapter-I Introduction to React
3
3. What is React's component-based architecture ?

- React's component-based architecture is a fundamental concept in React


development

- Components: In React, everything is a component. Components are reusable


building blocks of a user interface. They can be as simple as a button or as
complex as an entire webpage.

- Modularity: Components encourage a modular and organized code structure.


Each component focuses on a specific aspect of the UI and its functionality.

- Composition: You can compose complex user interfaces by combining multiple


components. This makes it easier to understand, develop, and maintain
applications.

- Reusability: Since components are self-contained and independent, they can be


reused across different parts of an application or even in other projects,
promoting code reusability.

- Data Flow: Data flows unidirectionally from parent components to child


components. This predictable data flow makes it easier to reason about the state
of the application.

- React's component-based architecture is one of the main reasons for React's


popularity, as it simplifies UI development, promotes code reusability, and
enhances maintainability.
Chapter-I Introduction to React
4
4. How to do the react Set up ?

- install Node.js and npm

After installing, check versions

- node -v // Check Node.js version


- npm -v // Check npm version

- creating a React application with Create React App

npx create-react-app my-react-app

- Understanding the project structure:

cd my-react-app

my-react-app/
├── node_modules/ # Dependencies installed by npm
├── public/ # Static assets and HTML template
├── src/ # React application source code
├── package.json # Project configuration and dependencies
├── README.md # Project documentation
Chapter-I Introduction to React
5

- public/ Directory:
- Contains the index.html file, which is the entry point for your React app.
- You can place static assets like images and fonts in this directory.
- src/ Directory:
-
- This is where you will write your React application code.
- The src directory typically contains App.js, which is the root component of
your application.
- You can create additional components in this directory.

- package.json:
- Defines the project's metadata, including dependencies, scripts, and
configuration.
- You can add or update dependencies here.

Development Scripts:

● CRA (create-react-application) provides scripts like start, build, and test in


your package.json.
● Use npm start to start the development server, which will run your React app
locally for testing.
● Use npm run build to create a production-ready build of your app in the build/
directory.
Chapter-I Introduction to React
6

5. How to create a simple Hello World program in React JS ?

- Locate the App.js file in your project. This file is typically found in the src
directory if you're using the default project structure created by
create-react-app.

- Open the App.js file and replace the existing code with the following:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, World</h1>
</div>
);
}

export default App;

And do

npm start

You can see the Hello World in the default port 3000, in your browser from the
following URL :-

http://localhost:3000/
Chapter-I Introduction to React
7

1. React JS Featues

2. React - Virtual DOM

You might also like