Skip to main content

react 001 hosting reactjs via github pages

Wherein learn how to configure a ReactJS project to be hosted by github. I'm already using github pages, already have a working ReactJS application, and have a tutorial - but stuff I don't know and have not linked the technologies in this way - so should be interesting. I also intend, like before, to bake-in improvements. I'm starting with my react-000 project (tic-tac-toe) but adding some features. Considering either adding a one-player mode or making it three-dimensional (4x4x4).


Context

Started with my implementation of the tutorial (+ requested improvements) from the ReactJS site. Then baking in the integration.


Demo

https://dvjc.github.io/react_001_github_integration/


Instruction/Tutorial Link

original code source: https://reactjs.org/tutorial/tutorial.html

integration configuration: https://medium.com/better-programming/how-to-host-your-react-app-on-github-pages-for-free-919ad201a4cb
note: This is on Medium and not free - so you may need to subscribe or open it in another browser.


Code Link

https://github.com/dvjc/react_001_github_integration


Challenges / What I hope to lear

Getting ReactJS to play nice with github.

Refactoring a ReactJS in a more clean way.

Learning how to identify modern/cleaner vanilla JS and the syntax for ReactJS.


Notes / thoughts

It will be nice to be able (presumably) to offer a link to a demo of the function code.

It will also be nice to add an AI for single-player mode; haven't worked that out yet.

And it will be nice to have the code a bit cleaner; offensive to my eyes a bit right now.


Actions

01. Walk through the tutorial.

02. Implement mode selection (one and two player)

[   ] 1. Add a button which allows a person to choose one or two player.

[   ] 2. Allow a person who chose one player to choose to go first or second.

[   ] 3. Build a first-pass AI which plays randomly against the player.

[   ] 4. Build an equally fast AI which plays to win.

[   ] 5. Optional: Keep metrics on games played during the session; offer graphics?


Lessons Learned

(Pending ...)

Comments

Popular posts from this blog

react 000 tic tac toe

Wherein we begin the journey to learn / improve in different technologies. This first effort is simply the default tutorial from the ReactJS site. I will walk through the tutorial learning as I go. At the end there are six enhancements recommended for the tutorial code; I'll do those too.                                                                                                                                                                                                                                                                                                                                  Context The one from the ReactJS site. Instruction/Tutorial Link https://reactjs.org/tutorial/tutorial.html Code Link https://github.com/dvjc/react_000_tictactoe Challenges I'm not quite used to the way in which React apps are broken out. I ultimately hope to build some more robust things - so failing in this controlled way (within the context of a working app) is very helpful.