Skip to content

Commit

Permalink
Merge pull request #483 from bobaekang/patch-1
Browse files Browse the repository at this point in the history
Update getting-started.md
  • Loading branch information
ryansolid committed May 31, 2021
2 parents 0fa887c + cc682c7 commit 2ce7a1e
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions documentation/guides/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ Or for a TypeScript starter:

## Learn Solid

Solid is all about small composable pieces that serve as building blocks for applications. These pieces are mostly functions which make up many shallow top-level APIs. Fortunately, to start, you won't need to know about most of them.
Solid is all about small composable pieces that serve as building blocks for applications. These pieces are mostly functions which make up many shallow top-level APIs. Fortunately, you won't need to know about most of them to get started.

The two main types of building blocks you have at your disposal are Components and Reactive Primitves.
The two main types of building blocks you have at your disposal are Components and Reactive Primitives.

Components are functions that accept a props object and return JSX elements including native DOM elements and other components. They can be expressed as Pascal Cased JSX Elements:
Components are functions that accept a props object and return JSX elements including native DOM elements and other components. They can be expressed as JSX Elements in PascalCase:

```jsx
function MyComponent(props) {
Expand All @@ -36,9 +36,9 @@ function MyComponent(props) {
<MyComponent name="Solid" />
```

Components are lightweight in that they are not stateful themselves and have no instances but instead serve as factory functions for DOM elements and reactive primitives.
Components are lightweight in that they are not stateful themselves and have no instances. Instead, they serve as factory functions for DOM elements and reactive primitives.

Solid's fine-grained reactivity is built on 3 simple primitives, Signals, Memos, and Effects. They form an auto-tracking synchronization engine that ensures your view stays up to date. Reactive computations take the form of simple function-wrapped expressions that execute synchronously.
Solid's fine-grained reactivity is built on 3 simple primitives: Signals, Memos, and Effects. Together, they form an auto-tracking synchronization engine that ensures your view stays up to date. Reactive computations take the form of simple function-wrapped expressions that execute synchronously.

```js
const [first, setFirst] = createSignal("JSON");
Expand All @@ -47,13 +47,13 @@ const [last, setLast] = createSignal("Bourne");
createEffect(() => console.log(`${first()} ${last()}`))
```

You can learn more about them here [Solid's Reactivity](reactivity.md) and [Solid's Rendering](rendering.md).
You can learn more about [Solid's Reactivity](reactivity.md) and [Solid's Rendering](rendering.md).

You can also view full [API Reference](../api.md)
You can also view our full [API Reference](../api.md).

## Think Solid

Solid's design carries several opinions and principles on how to create websites and applications. It is easier to learn and use Solid knowing the philosophy behind it.
Solid's design carries several opinions on what principles and values help us best build websites and applications. It is easier to learn and use Solid when you are aware of the philosophy behind it.

### 1. Declarative Data

Expand All @@ -73,21 +73,21 @@ A lesson that comes hard for fine-grained reactivity. Explicit and consistent co

## Web Components

Solid was born with the desire to have Web Components as first class citizens. Over time its design has evolved and goals have changed. However, Solid is still a great way to author Web Components. [Solid Element](https://github.com/solidjs/solid/tree/main/packages/solid-element) let's you to write and wrap Solid's function components to produce small and performant Web Components. Inside Solid apps Solid Element is able to still leverage Solid's Context API and Solid's Portals support Shadow DOM isolated styling.
Solid was born with the desire to have Web Components as first class citizens. Over time its design has evolved and goals have changed. However, Solid is still a great way to author Web Components. [Solid Element](https://github.com/solidjs/solid/tree/main/packages/solid-element) lets you to write and wrap Solid's function components to produce small and performant Web Components. Inside Solid apps Solid Element is able to still leverage Solid's Context API and Solid's Portals support Shadow DOM isolated styling.

## Server Rendering

Solid has a dynamic server side rendering solution that enables a truly isomorphic development experience. Through the use of our Resource primitive async data requests are easily made, and more importantly automatically serialized and synchronized between client and browser.

Since Solid supports asynchronous and streaming rendering on the server you get to write your code one way and have it execute on the server. Things like [render-as-you-fetch](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense) and code splitting just work.
Since Solid supports asynchronous and streaming rendering on the server, you get to write your code one way and have it execute on the server. This means that features like [render-as-you-fetch](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense) and code splitting just work in Solid.

For more information read the [SSR guide](./server.md)
For more information, read the [SSR guide](./server.md).

## No Compilation?

Dislike JSX? Don't mind doing manual work to wrap expressions, worse performance, and having larger bundle sizes? Alternatively in non-compiled environments you can use Tagged Template Literals or HyperScript.
Dislike JSX? Don't mind doing manual work to wrap expressions, worse performance, and having larger bundle sizes? Alternatively, you can create a Solid app using Tagged Template Literals or HyperScript in non-compiled environments.

You can run them straight from the browser using SkyPack:
You can run them straight from the browser using [Skypack](https://www.skypack.dev/):

```html
<html>
Expand All @@ -109,4 +109,4 @@ You can run them straight from the browser using SkyPack:
</html>
```

Remember you still need the corresponding DOM Expressions library for these to work with TypeScript. Tagged Template Literals [Lit DOM Expressions](https://github.com/solidjs/dom-expressions/tree/main/packages/lit-dom-expressions) or HyperScript with [Hyper DOM Expressions](https://github.com/solidjs/dom-expressions/tree/main/packages/hyper-dom-expressions).
Remember you still need the corresponding DOM Expressions library for these to work with TypeScript. You can use Tagged Template Literals with [Lit DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions) or HyperScript with [Hyper DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions).

0 comments on commit 2ce7a1e

Please sign in to comment.