Getting Started
22 Nov 20232 minutes to read
This section explains how to create a simple Avatar using Styles in the React Framework
Dependencies
The Avatar Component is pure CSS component so no specific dependencies to render the avatar.
Installation and configuration
You can use Create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
To set-up a React application in TypeScript environment, run the following command.
```
npx create-react-app my-app --template typescript
cd my-app
npm start
```
To set-up a React application in JavaScript environment, run the following command.
```
npx create-react-app my-app
cd my-app
npm start
```
## Adding Syncfusion packages
All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
To install `Avatar` component, use the following command
```bash
npm install @syncfusion/ej2-layouts --save
```
## Adding CSS Reference
The Avatar CSS files are available in the `ej2-layouts` package folder. This can be referenced in your application using the following code.
`src/App.css`
```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
```
## Adding a simple Avatar
Add the HTML `div` element with `e-avatar` class into your `App.tsx`.
```
## See Also
[Types of Avatar](./types)
AJ
```
## Run the application
Run the application in the browser using the following command:
```
npm start
```
Output will be as follows:
import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
return (<div>
<span className="e-avatar e-avatar-xlarge"></span>
<span className="e-avatar e-avatar-large"></span>
<span className="e-avatar"></span>
<span className="e-avatar e-avatar-small"></span>
<span className="e-avatar e-avatar-xsmall"></span>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
return (
<div>
<span className="e-avatar e-avatar-xlarge"></span>
<span className="e-avatar e-avatar-large"></span>
<span className="e-avatar"></span>
<span className="e-avatar e-avatar-small"></span>
<span className="e-avatar e-avatar-xsmall"></span>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));