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`. ```
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"));
## See Also [Types of Avatar](./types)