React single page application with server side rendering step-by-step quick start demo.
This is a simple isomorphic app for list of cars. There are four pages:
- home page;
- cars list page;
- car form page (the page is used for create and update actions);
- not found page.
- Clone and install the project:
git clone https://github.com/gustarus/react-spa-ssr-quick-start-demo.git
cd react-spa-ssr-quick-start-demo
nvm use && yarn install
- Launch the json server for the api:
nvm use && yarn run api
- Launch the app:
nvm use && yarn run start
You can checkout to steps via git checkout
.
Please, run git log
to see which steps this demo have.
You'll see something like that:
commit 5242e49fb9ff5787481d327954a2cf832644f6e4
Author: Pavel Kondratenko <iam@kondratenko.me>
Date: Tue Sep 19 23:43:47 2017 +0300
12. Add snapshot tests via jest.
commit e3cf40bb5815f2f3ad38414ec6acbfb5ebf77706
Author: Pavel Kondratenko <iam@kondratenko.me>
Date: Tue Sep 19 23:40:55 2017 +0300
11. Add page hoc for loading indicator.
commit 74ed8dc88932e7067cb23fe2c2344a72c2902567
Author: Pavel Kondratenko <iam@kondratenko.me>
Date: Tue Sep 19 23:36:38 2017 +0300
10. Add form, create action, update and delete actions for cars in the table.
...
This is the steps which I did to create this react js spa with ssr demo.
Then, checkout to the needed step via git checkout
.
For example, with this command you'll see code for step number 11:
git checkout e3cf40bb5815f2f3ad38414ec6acbfb5ebf77706
Then you can see changes for every step via git diff
command:
git diff 74ed8dc88932e7067cb23fe2c2344a72c2902567
Or just see changes in the commits tab.
- Init the repo and empty readme file.
- Init the project: package.json, editorconfig, nvmrc, .gitignore.
- Add rship to the project, implement an example of server side rendering.
- Add react js, implement an example for react and server side rendering.
- Add styles support, enable css modules, customize the page.
- Add code style validation tool (eslint).
- Add router, create mocks for pages and connect them to the router.
- Add redux, implement table view, add table mode switcher (via redux store).
- Add json server for the local demo api.
- Add api support for cars list via redux actions.
- Add form, implement create, update and delete actions for cars.
- Add page hoc for loading indicator.
- Add snapshot tests via jest.