Scribd
Upload
68 views2 pages

ReactJS Solved Practicals 1-3

The document outlines practical exercises for advanced web development using React-JS, including setting up the React environment, creating a basic 'Hello World' component, and understanding functional versus class components with props. Each practical includes objectives, code examples, and conclusions about the outcomes. The exercises aim to familiarize users with fundamental React concepts and practices.

Uploaded by

Uma Singh
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
68 views2 pages

ReactJS Solved Practicals 1-3

The document outlines practical exercises for advanced web development using React-JS, including setting up the React environment, creating a basic 'Hello World' component, and understanding functional versus class components with props. Each practical includes objectives, code examples, and conclusions about the outcomes. The exercises aim to familiarize users with fundamental React concepts and practices.

Uploaded by

Uma Singh
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/ 2

Advanced Web Development using React-JS - Solved Practicals

Practical 1: Setting up React environment, Create React App

Objective:
To set up a development environment for React and create a basic React app.

Tools:
- [Link]
- npm (Node Package Manager)
- VS Code

Steps:
1. Install [Link] and npm.
2. Run the following in terminal to create a new app:
npx create-react-app my-app
cd my-app
npm start

Code:
No custom code, just initial setup.

Output:
A development server starts and displays the default React welcome page.

Conclusion:
React environment is set up successfully using Create React App.

Practical 2: Hello World, Components, JSX

Objective:
Create a simple component and render 'Hello World' using JSX.

Code:
In [Link]:
import React from 'react';

function HelloWorld() {
return <h1>Hello World from React!</h1>;
}

export default HelloWorld;

In [Link]:
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './App';

[Link](<HelloWorld />, [Link]('root'));

Conclusion:
Advanced Web Development using React-JS - Solved Practicals

'Hello World' is rendered using JSX inside a functional component.

Practical 3: Functional vs Class Components, Props

Objective:
Understand the difference between functional and class components and how props work.

Code:
Functional:
function Welcome(props) {
return <h1>Hello, {[Link]}</h1>;
}

Class:
class Welcome extends [Link] {
render() {
return <h1>Hello, {[Link]}</h1>;
}
}

Usage:
<Welcome name="React Learner" />

Conclusion:
Both functional and class components can accept and use props to render dynamic content.

You might also like