From 66728d6860893835c00b8063600e060204ae15fa Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Thu, 21 Jun 2018 18:15:34 -0400 Subject: [PATCH 1/2] Add getting started section --- README.md | 43 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b2922a6..f358797 100644 --- a/README.md +++ b/README.md @@ -30,11 +30,46 @@ Read more about x0 in our [blog post](https://compositor.io/blog/x0-making-react \* Custom [webpack configuration](#webpack) is required for components that rely on webpack-based features +## Getting Started + +x0 renders a directory of React components, automatically handling routing based on filename. +Create a `docs` folder and add and `index.js` file. + +```jsx +// index.js +import React from 'react' + +export default class extends React.Component { + render () { + return ( +

Hello

+ ) + } +} +``` + +Start a development server by running: + +```sh +x0 docs --open +``` + +To add more pages, add a new component for each route. For example, create an about page: + +```jsx +// about.js +import React from 'react' + +export default props => +

About

+``` + +The about page should now render when navigating to . ## Isolated development environment ```sh -x0 components +x0 docs ``` Options: @@ -47,7 +82,7 @@ Options: ``` ```sh -x0 components -op 8080 +x0 docs -op 8080 ``` @@ -56,13 +91,13 @@ x0 components -op 8080 Export static HTML and client-side bundle ```sh -x0 build components +x0 build docs ``` Export static HTML without bundle ```sh -x0 build components --static +x0 build docs --static ``` Options From 956e1239f66b5e836055d40aada871f015aa01db Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Thu, 21 Jun 2018 18:17:47 -0400 Subject: [PATCH 2/2] Typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f358797..49a235e 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ Read more about x0 in our [blog post](https://compositor.io/blog/x0-making-react ## Getting Started x0 renders a directory of React components, automatically handling routing based on filename. -Create a `docs` folder and add and `index.js` file. +Create a `docs` folder and add an `index.js` file. ```jsx // index.js