React single page application with server side rendering step-by-step quick start demo.

What is it?

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.

How to launch it?

1. 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

2. Launch the json server for the api:

nvm use && yarn run api

3. Launch the app:

nvm use && yarn run start

How to use it?

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.

Which steps this demo have?

0. Init the repo and empty readme file.
1. Init the project: package.json, editorconfig, nvmrc, .gitignore.
2. Add rship to the project, implement an example of server side rendering.
3. Add react js, implement an example for react and server side rendering.
4. Add styles support, enable css modules, customize the page.
5. Add code style validation tool (eslint).
6. Add router, create mocks for pages and connect them to the router.
7. Add redux, implement table view, add table mode switcher (via redux store).
8. Add json server for the local demo api.
9. Add api support for cars list via redux actions.
10. Add form, implement create, update and delete actions for cars.
11. Add page hoc for loading indicator.
12. Add snapshot tests via jest.