Build a complete React app, step-by-step with the MERN stack

This is a tutorial to get started with React, using the MERN stack. You will not only learn React, but also associated environment and complimentary tools such as Mongo, Express, gulp etc.

In the unlikely event that you landed here first, the complete step-by-step instructions are available here on Hashnode. Read and follow the tutorial there.

Create index.html as a file, use all scripts (react, react-dom, babel) from CDN. Write a Hello World element within the HTML between <script> tags.

Use Node and Express to serve the HTML file.

Transform the JSX into JS at build-time rather than at run-time.

Split JSX and HTML into separate files.

Serve a transformed JSX rather than the JSX itself.

Start building a simple CRUD app.

Use React.createClass to create a class and render it instead of rendering a DOM element directly in ReactDOM.render().

Create a component by using other components.

Communicate between components using props

Create multiple components dynamically based on data

Dynamically update the data model and re-render.

Start using state, prepare for dynamic updates.

Dynamically update the state and see the magic.

Communicate from child to a parent component.

Move data to the server.

Implement a GET API on the server to return a list of records.

Implement a POST API to add a new record.

Change client code to fetch data from server.

Change client code to send data to server for Add record.

Persist the data in a database.

Write a script to initialize a MongoDB collection.

Create a permanent connection to the DB, change GET API to read from DB.

Change POST API to insert a record into the DB.

Modularize, use browserify to serve a bundle of all scripts.

Use browserify to create a bundle manually.

Use gulp to automate the manual tasks.

Use watchify to watch the source file for changes and auto-build.

Log errors in the source file while watching.

Split the single source file into multiple.

Modify GET API to handle a query string with filters.

Create a button that filters the list, using a hardcoded filter.

Create a form with controlled components and use state.

Use routing to handle different page views and query string.

Install React Router and build the first few routes.

Use URL parameters to initialize the filter.

Propagate a filter change to the bug list and the URL.

Listen to URL changes, reload the records and re-render the filter UI.

Add a new view / page that let's us edit a record.

Add a GET API to get a single record.

Add a PUT API to modify a single record.

Create a new route and a new page for editing a record.

Create links from and to the two pages.

Use React-Bootstrap to polish the UI.

Install and add a simple button.

Convert the filter to React-Bootstrap.

Convert the Add form to React-Bootstrap.

Convert the Table to React-Bootstrap.

Convert the Edit form to React-Bootstrap.