Skip to content

Commit 4bda8f7

Browse files
selbekkgaearon
authored andcommitted
5238 set up basic docs structure (#5245)
* Add a temporary README file This commit adds a temporary readme file that points users to the main README file or the User Guide. * Add a "getting started" doc This commit adds a page for getting started, copying the "Get started now" from the current `README.md`. * Add link to the get started page from the index page * Add the getting started doc to the site header * Add footer link to getting started info * Add getting started to the sidebar * Add placeholder for the user guide page * Add links to the user-guide page as well * Add auto-generated i18n file * Move all docusaurus related files into own folder
1 parent 2655b42 commit 4bda8f7

File tree

17 files changed

+160
-24
lines changed

17 files changed

+160
-24
lines changed

docusaurus/docs/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Nothing to see here right now
2+
3+
Please refer to the [Readme](https://github.com/facebook/create-react-app/blob/master/README.md) or the [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md).

docusaurus/docs/getting-started.md

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
id: getting-started
3+
title: Getting started
4+
sidebar_label: Getting started
5+
---
6+
7+
## Quick Overview
8+
9+
```sh
10+
npx create-react-app my-app
11+
cd my-app
12+
npm start
13+
```
14+
15+
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
16+
17+
Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
18+
When you’re ready to deploy to production, create a minified bundle with `npm run build`.
19+
20+
<p align='center'>
21+
<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start'>
22+
</p>
23+
24+
### Get Started Immediately
25+
26+
You **don’t** need to install or configure tools like Webpack or Babel.<br>
27+
They are preconfigured and hidden so that you can focus on the code.
28+
29+
Just create a project, and you’re good to go.
30+
31+
## Creating an App
32+
33+
**You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects.
34+
35+
To create a new app, you may choose one of the following methods:
36+
37+
### npx
38+
39+
```sh
40+
npx create-react-app my-app
41+
```
42+
43+
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
44+
45+
### npm
46+
47+
```sh
48+
npm init react-app my-app
49+
```
50+
51+
_`npm init <initializer>` is available in npm 6+_
52+
53+
### Yarn
54+
55+
```sh
56+
yarn create react-app my-app
57+
```
58+
59+
_`yarn create` is available in Yarn 0.25+_
60+
61+
It will create a directory called `my-app` inside the current folder.<br>
62+
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
63+
64+
```
65+
my-app
66+
├── README.md
67+
├── node_modules
68+
├── package.json
69+
├── .gitignore
70+
├── public
71+
│ ├── favicon.ico
72+
│ ├── index.html
73+
│ └── manifest.json
74+
└── src
75+
├── App.css
76+
├── App.js
77+
├── App.test.js
78+
├── index.css
79+
├── index.js
80+
├── logo.svg
81+
└── registerServiceWorker.js
82+
```
83+
84+
No configuration or complicated folder structures, just the files you need to build your app.<br>
85+
Once the installation is done, you can open your project folder:
86+
87+
```sh
88+
cd my-app
89+
```
90+
91+
Inside the newly created project, you can run some built-in commands:
92+
93+
### `npm start` or `yarn start`
94+
95+
Runs the app in development mode.<br>
96+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
97+
98+
The page will automatically reload if you make changes to the code.<br>
99+
You will see the build errors and lint warnings in the console.
100+
101+
<p align='center'>
102+
<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'>
103+
</p>
104+
105+
### `npm test` or `yarn test`
106+
107+
Runs the test watcher in an interactive mode.<br>
108+
By default, runs tests related to files changed since the last commit.
109+
110+
[Read more about testing.](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
111+
112+
### `npm run build` or `yarn build`
113+
114+
Builds the app for production to the `build` folder.<br>
115+
It correctly bundles React in production mode and optimizes the build for the best performance.
116+
117+
The build is minified and the filenames include the hashes.<br>
118+
119+
Your app is ready to be deployed.

docusaurus/docs/user-guide.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
id: user-guide
3+
title: User guide
4+
sidebar_label: User guide
5+
---
6+
7+
The user guide can be found on [GitHub](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) for now.
File renamed without changes.

website/core/Footer.js renamed to docusaurus/website/core/Footer.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ class Footer extends React.Component {
3434
</a>
3535
<div>
3636
<h5>Docs</h5>
37-
<a href={this.docUrl('doc1.html', this.props.language)}>
38-
Getting Started (or other categories)
37+
<a href={this.docUrl('getting-started', this.props.language)}>
38+
Getting Started
3939
</a>
40-
<a href={this.docUrl('doc2.html', this.props.language)}>
41-
Guides (or other categories)
40+
<a href={this.docUrl('user-guide', this.props.language)}>
41+
User Guide
4242
</a>
4343
<a href={this.docUrl('doc3.html', this.props.language)}>
4444
API Reference (or other categories)

website/i18n/en.json renamed to docusaurus/website/i18n/en.json

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,26 @@
44
"next": "Next",
55
"previous": "Previous",
66
"tagline": "Create React apps with no build configuration.",
7-
"docs": {},
7+
"docs": {
8+
"getting-started": {
9+
"title": "Getting started",
10+
"sidebar_label": "Getting started"
11+
},
12+
"README": {
13+
"title": "README"
14+
},
15+
"user-guide": {
16+
"title": "User guide",
17+
"sidebar_label": "User guide"
18+
}
19+
},
820
"links": {
9-
"Docs": "Docs",
10-
"API": "API",
21+
"Getting started": "Getting started",
1122
"Help": "Help"
1223
},
1324
"categories": {
14-
"Docusaurus": "Docusaurus",
15-
"First Category": "First Category",
16-
"Second Category": "Second Category"
25+
"Getting Started": "Getting Started",
26+
"User Guide": "User Guide"
1727
}
1828
},
1929
"pages-strings": {
File renamed without changes.

website/pages/en/index.js renamed to docusaurus/website/pages/en/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,10 @@ class HomeSplash extends React.Component {
8282
<ProjectTitle />
8383
<PromoSection>
8484
<Button href="#try">Try It Out</Button>
85-
<Button href={docUrl('doc1.html', language)}>Example Link</Button>
86-
<Button href={docUrl('doc2.html', language)}>Example Link 2</Button>
85+
<Button href={docUrl('getting-started', language)}>
86+
Get started
87+
</Button>
88+
<Button href={docUrl('user-guide', language)}>User guide</Button>
8789
</PromoSection>
8890
</div>
8991
</SplashContainer>

docusaurus/website/sidebars.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"docs": {
3+
"Getting Started": ["getting-started"],
4+
"User Guide": ["user-guide"]
5+
}
6+
}

website/siteConfig.js renamed to docusaurus/website/siteConfig.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ const siteConfig = {
2626

2727
// For no header links in the top nav bar -> headerLinks: [],
2828
headerLinks: [
29-
{ doc: 'doc1', label: 'Docs' },
30-
{ doc: 'doc4', label: 'API' },
29+
{ doc: 'getting-started', label: 'Getting started' },
3130
{ href: 'https://reactjs.org/community/support.html', label: 'Help' },
3231
],
3332

File renamed without changes.

website/sidebars.json

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)