` is just a div.
[Top 5 Things You Should Know about Solid](https://dev.to/ryansolid/introducing-the-solidjs-ui-library-4mck)
## 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
> _`npm init solid
` is available with npm 6+._
You can get started with a simple app with the CLI with by running:
```sh
> npm init solid app my-app
```
Or for a TypeScript starter:
```sh
> npm init solid app-ts my-app
```
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
> This is the documentation for the 1.0.0 RC. THese are significantly slimmed down from what was here previously as we are moving things to the new Docs site. If you wish to see the older docs in the mean time [look here](https://github.com/solidjs/solid/tree/0.x/#documentation).
- [API](https://github.com/solidjs/solid/blob/main/documentation/api.md)
- [FAQ](https://github.com/solidjs/solid/blob/main/documentation/faq.md)
- [Comparison with other Libraries](https://github.com/solidjs/solid/blob/main/documentation/comparison.md)
### Guides
- [Getting Started](https://github.com/solidjs/solid/blob/main/documentation/guides/getting-started.md)
- [Reactivity](https://github.com/solidjs/solid/blob/main/documentation/guides/reactivity.md)
- [Rendering](https://github.com/solidjs/solid/blob/main/documentation/guides/rendering.md)
- [SSR](https://github.com/solidjs/solid/blob/main/documentation/guides/server.md)
### Resources
- [Examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)
- [Articles](https://github.com/solidjs/solid/blob/main/documentation/resources/articles.md)
- [Projects](https://github.com/solidjs/solid/blob/main/documentation/resources/projects.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)]
