From 05f65973db75a4ff094857a28b067f5dc5081476 Mon Sep 17 00:00:00 2001 From: William Billingsley <wbilling@une.edu.au> Date: Tue, 7 Aug 2018 16:38:43 +1000 Subject: [PATCH] Added beginnings of React solution --- README.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/README.md b/README.md index 9f84431..0369284 100644 --- a/README.md +++ b/README.md @@ -388,3 +388,66 @@ Period: ``` Notice this button is bound so it's disabled until we've created the game. It's onClick is bound to the `toggleTimer` method, and the text changes from Start to Stop depending on whether the timer is already started. + + +## Solving this tutorial with React + +There's a worked solution to this tutorial using React.js on the `react-solution` branch. But let's talk you through it. + +### Some config changes + +First, there's some config changes we'll make to make things easier. By default, React won't give you nice error messages -- it left them out of the library to save space. So make the HTML load the development scripts from our node_modules directory: + +```html +<script src="./node_modules/react/umd/react.development.js"></script> +<script src="./node_modules/react-dom/umd/react-dom.development.js"></script> +``` + +And tell webpack not to put React itself into bundle.js (because we're loading its development scripts separately). In webpack.config.js, inside `module.exports`: + +```js +externals: { + "react": "React", + "react-dom": "ReactDOM" +} +``` + +We're also going to want to use TSX, so let's update compilerOptions in `tsconfig.json`: + +```js + "jsx": "react" +``` + +And let's also rename `index.ts` to `index.tsx`, and then update `webpack.congfig.js` to tell it about the new entry point: + +```js + entry: './src/index.tsx', +``` + +### Getting React on-screen + +Let's get React rendering something, even if just Hello World. + +In index.html, create a div that Vue can render to. Let's put this above the svg for the game: + +```html +<div id="app"></div> +``` + +And inside index.tsx, let's import React and ReactDOM, and something to that div + +```ts +import * as React from "react"; +import * as ReactDOM from "react-dom"; +``` + +and now for our first bit of TSX: + +```ts +ReactDOM.render( + <div>Hello React</div>, + document.getElementById("app") +); +``` + +Reload, and check we get "Hello Vue" appearing. If so, good -- React is working, can compile templates, and we can progress. -- GitLab