This is a repository to demonstrate some basic use cases for React. It was previously shown at IT Carrer Night 2018, Rostock and was enabled by Gecko.
Special Thanks to @Harper for his guidance and help with the major problem of this boilerplate.
This repository grew somewhat to a boilerplate for React projects, including a solution for routing, fetching data and server-side rendering pages. Feel free to use it for whatever project you're involved.
- Install Node8
- Install npm
- Run
npm i -g webpack-cli webpack
to install webpack globally
- Run
git checkout tags/basic
- You see a single component
src/components/Hello.tsx
src/index.tsx
loadsHello.tsx
and puts it into the containerexample
- The container
<div id="example" />
can be found inindex.html
- To run the page just use
npm run build
and open theindex.html
in a browser
- Run
git checkout tags/state
- You see a new folder
pages
, that includes the fileFirstPage.tsx
FirstPage
composes the componentsHello
,Switch
and some default tags (div
,p
)Switch
provides its own state, that will be changed on a clickEvent and can be bootstrapped by a property
- Run
git checkout tags/lifecycle
FirstPage
was enhanced to load a string from numbersapi.com and use it withincomponentDidMount()
- Run
git checkout tags/typestyle
- First page was enhanced for several style classes, which can be toggled
- typestyle can be used for css specific behaviors, like transitions, media queries, etc...
- Run
git checkout tags/tictactoe-messy
- We see a messy example of a TicTacToe game
- see it as a bad example
- Run
git checkout tag/tictactoe
- is an example of a somewhat larger project