|
| 1 | +[](https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_CreateReactKotlinApp&guest=1) |
| 2 | +[](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