Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8dd54cb

Browse files
authored
Merge pull request #367 from cpdyj/master
add zh-cn(Chinese) version of README.
2 parents 7053af6 + 77f9fd4 commit 8dd54cb

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎README-zh_cn.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
[![Build Status](https://teamcity.jetbrains.com/app/rest/builds/buildType:JetBrainsUi_CreateReactKotlinApp/statusIcon.svg)](https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_CreateReactKotlinApp&guest=1)
2+
[![JetBrains team project](http://jb.gg/badges/team.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
3+
4+
[Japanese](https://github.com/JetBrains/create-react-kotlin-app/blob/master/README-ja.md)
5+
[Korean](https://github.com/JetBrains/create-react-kotlin-app/blob/master/README-ko.md)
6+
[Chinese](https://github.com/JetBrains/create-react-kotlin-app/blob/master/README-zh_cn.md)
7+
8+
# Create React Kotlin App
9+
10+
在不填加 build 配置的情况下,使用[Kotlin](https://kotlinlang.org/)创建[React](https://facebook.github.io/react/)应用。
11+
12+
请注意这是一个 **早期预览版本** 。
13+
14+
## 快速预览
15+
16+
**在开始之前,请确保你安装了[JDK 8](http://www.oracle.com/technetwork/java/index.html)** ,Java 9 目前是不支持的。
17+
18+
创建一个新的项目:
19+
20+
```sh
21+
npx create-react-kotlin-app my-app
22+
```
23+
([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) 存在于 npm 5.2+ 或更高版本,如果你使用旧的npm版本,请参见[安装](#安装))
24+
25+
运行这个项目
26+
27+
```sh
28+
cd my-app/
29+
npm start
30+
```
31+
然后打开 [http://localhost:3000/](http://localhost:3000/) 来查看你的应用。<br>
32+
当你做好部署到生产的准备,使用 `npm run build` 创建一个 minified bundle
33+
34+
Create React Kotlin App 将会配置 Kotlin, webpack 和 IntelliJ IDEA ,你可以专注于你的代码。
35+
36+
仅仅创建一个项目,你就可以轻松开始。
37+
38+
## 开始
39+
40+
### 安装
41+
42+
全局安装:
43+
44+
```sh
45+
npm install -g create-react-kotlin-app
46+
```
47+
48+
如果你已经安装了 `create-react-app` 或者你在使用 `npx`, 你可以跳过这步。
49+
50+
51+
**你需要使用 Node >= 6 的版本**. 你可以使用 [nvm](https://github.com/creationix/nvm#usage) 在不同项目间切换node版本
52+
53+
**This tool doesn’t assume a Node backend**. The Node installation is only required for Create React Kotlin App itself.
54+
55+
### 使用Kotlin编写React应用
56+
57+
要使用Kotlin编写React应用,你需要使用一个[Kotlin的React包装](https://www.npmjs.com/package/@jetbrains/kotlin-react),
58+
你可以在[这里](https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react)找到它的文档和示例
59+
60+
### 添加 Kotlin/JS
61+
62+
**不需要任何配置**来为基于Create React Kotlin App创建的项目添加用Kotlin编写的包,我们会为你做好这一切。
63+
比如,你可以简单地运行 `npm install @jetbrains/kotlin-react-router-dom` 来安装 [wrapper for React Router DOM](https://www.npmjs.com/package/@jetbrains/kotlin-react-router-dom).
64+
65+
66+
### 创建一个应用
67+
68+
要创建一个新的应用,运行:
69+
70+
```sh
71+
create-react-kotlin-app my-app
72+
cd my-app
73+
```
74+
如果你安装了 `create-react-app` ,你可以运行:
75+
76+
```sh
77+
create-react-app my-app --scripts-version react-scripts-kotlin
78+
cd my-app
79+
```
80+
它将创建一个叫 `my-app` 的文件夹在当前目录下。<br>
81+
项目将被自动预配置为使用 [IntelliJ IDEA](https://www.jetbrains.com/idea/) 开发。如果你不想创建 `.idea` 这个被 IntelliJ IDEA 需要的文件夹,请在运行时添加 `--no-idea` 选项。<br>
82+
以下初始的项目结构将被自动创建,依赖将会自动安装:
83+
84+
85+
```
86+
my-app/
87+
README.md
88+
node_modules/
89+
package.json
90+
.gitignore
91+
public/
92+
favicon.ico
93+
index.html
94+
manifest.json
95+
src/
96+
app/
97+
App.css
98+
App.kt
99+
index/
100+
index.css
101+
index.kt
102+
logo/
103+
kotlin.svg
104+
Logo.css
105+
Logo.kt
106+
react.svg
107+
ticker/
108+
Ticker.kt
109+
```
110+
111+
这是一个简单的应用程序,显示了自打开应用程序以来经过的时间。<br>
112+
安装完成后,您可以在项目文件夹中运行一些命令:
113+
114+
### `npm start` or `yarn start`
115+
116+
在开发模式下运行应用<br>
117+
打开 [http://localhost:3000](http://localhost:3000) 在浏览器中查看
118+
119+
当你编辑时,页面会自动刷新<br>
120+
你将在控制台中看到构建错误和 lint 警告
121+
122+
如果你遇到了 `Kotlin.defineModule is not a function` 错误,尝试删除npm缓存:
123+
124+
rm -rf node_modules/.cache
125+
126+
### `npm run build` or `yarn build`
127+
128+
在 `build` 目录中为生产环境构建<br>
129+
为生产环境构建的版本位于 `build` 目录中<br>
130+
它确保了 React 使用生产模式,并且这个构建已经过优化,可以获得最佳性能
131+
132+
这个构建是 minified 过的,且文件名包含了用于缓存管理的哈希
133+
134+
### 调试应用
135+
136+
你可以使用 IntelliJ IDEA 旗舰版内置的 JavaScript 调试器调试运行中的应用。IDE将会启动一个新的Chrome实力,并为此添加调试器。
137+
138+
使用 `npm start` 启动你的应用,并在Kotlin代码中添加断点
139+
140+
在右上角的 run/debug configurations 中选择 `Debug in Chrome` 并点击绿色的调式按钮,或按下 `^D`(在 Mac OS 上) / `F9` (在Windows和Linux上)来开始调试。
141+
142+
目前,调试器只被 IntelliJ IDEA Ultimate 2017.3 支持
143+
144+
你也可以使用浏览器中的开发者工具调试你的应用
145+
146+
147+
## Philosophy
148+
149+
* **一个依赖:** 只有一个构建依赖。它使用了webpack和其他出色的项目,但是在它们之上提供了富有凝聚力的开发体验。
150+
151+
* **无需配置:** 你什么都不需要配置。为您处理了开发和生产版本的合理且良好配置,因此您可以专注于编写代码。
152+
153+
* **No Lock-In:** 你可以随时回到你的个性化设置。 运行一个命令,所有配置和构建依赖项都将直接移到您的项目中,您可以轻松回到上次停下来的地方。
154+
155+
## 这里边有什么?
156+
157+
生成的项目使用了以下 npm 模块:
158+
* [Kotlin wrappers](https://github.com/JetBrains/kotlin-wrappers): [@jetbrains/kotlin-react](https://www.npmjs.com/package/@jetbrains/kotlin-react), [@jetbrains/kotlin-react-dom](https://www.npmjs.com/package/@jetbrains/kotlin-react-dom), [@jetbrains/kotlin-extensions](https://www.npmjs.com/package/@jetbrains/kotlin-extensions)
159+
* [Kotlin DSL for HTML](https://www.npmjs.com/package/kotlinx-html)
160+
* [Kotlin Compiler](https://www.npmjs.com/package/kotlin-compiler)
161+
* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [@jetbrains/kotlin-webpack-plugin](https://www.npmjs.com/package/@jetbrains/kotlin-webpack-plugin), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader)
162+
* and others.
163+
164+
## 为什么使用这个?
165+
166+
通过 `create-react-kotlin-app` 你可以快速开启一个使用 React 和 Kotlin 编写的应用。 你的环境将包含构建Kotlin React应用的一切:
167+
* Kotlin和React语法支持
168+
* 一个开发服务来自动编译你的Kotlin代码到JavaScript
169+
* 一个build脚本,用于将JavaScript,CSS和图像用于生产,并带有 source maps
170+
171+
## 限制
172+
173+
* 当前项目暂时不支持使用单元测试,我们现在致力于 Jest Kotlin wrapper 敬请关注!
174+
175+
## 转换为自定义设置
176+
177+
你可以将项目从工具中"弹出",并像模板生成器一样使用。
178+
179+
运行 `npm run eject` 复制所有配置文件和可转移的依赖 (webpack, Kotlin Compiler, etc) 到你的项目中,这使你拥有对项目的完整控制。诸如 `npm start` 和 `npm run build` 这样的命令将继续工作,但它们将指向复制出的脚本,因此你可以对其进行调整。 至此,你可以自由发挥了。
180+
181+
**注意:这是个单向操作,一旦你 `eject`,你将不能返回!**
182+
183+
## 贡献和报告问题
184+
185+
请在 [YouTrack](https://youtrack.jetbrains.com/issues/CRKA) 上报告问题,本项目的 Github issue 已经关闭
186+
187+
欢迎大家为此项目做贡献! 请查看这个打开的 [issues](https://youtrack.jetbrains.com/issues/CRKA?q=State:%20Open) ,或者在 **#react** [Slack](http://slack.kotlinlang.org/) 频道中与我们讨论
188+
189+
## 致谢
190+
191+
这个项目基于 Facebook 的 [Create React App](https://github.com/facebookincubator/create-react-app). 非常感谢其作者的工作和启发。
192+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /