` is just a div.
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
## The Gist
```jsx
import { render } from "solid-js/web";
const HelloMessage = props =>
Hello {props.name}
;
render(() =>
, document.getElementById("hello-example"));
```
A Simple Component is just a function that accepts properties. Solid uses a `render` function to create the reactive mount point of your application.
The JSX is then compiled down to efficient real DOM expressions:
```js
import { render, template, insert, createComponent } from "solid-js/web";
const _tmpl$ = template(`
Hello
`);
const HelloMessage = props => {
const _el$ = _tmpl$.cloneNode(true);
insert(_el$, () => props.name);
return _el$;
};
render(
() => createComponent(HelloMessage, { name: "Taylor" }),
document.getElementById("hello-example")
);
```
That `_el$` is a real div element and `props.name`, `Taylor` in this case, is appended to its child nodes. Notice that `props.name` is wrapped in a function. That is because that is the only part of this component that will ever execute again. Even if a name is updated from the outside only that one expression will be re-evaluated. The compiler optimizes initial render and the runtime optimizes updates. It's the best of both worlds.
Want to see what code Solid generates:
### [Try it Online](https://playground.solidjs.com/)
## Quick Start
You can get started with a simple app by running the following in your terminal:
```sh
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
Or for TypeScript:
```sh
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
This will create a minimal client-rendered application powered by [Vite](https://vitejs.dev/).
Or you can install the dependencies in your own project. To use Solid with JSX (recommended) run:
```sh
> npm install solid-js babel-preset-solid
```
The easiest way to get setup is add `babel-preset-solid` to your .babelrc, or babel config for webpack, or rollup:
```js
"presets": ["solid"]
```
For TypeScript remember to set your TSConfig to handle Solid's JSX by:
```js
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js",
}
```
## Documentation
Check out the [Documentation](https://www.solidjs.com/guide) website.
[Examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)
## Browser Support
The last 2 versions of modern evergreen browsers and Node LTS.
## Community
Come chat with us on [Discord](https://discord.com/invite/solidjs)
### Contributors
### Open Collective
Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]
### Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]
