The project files for the Journey into React tutorial on davidmeents.com
JavaScript CSS HTML
Latest commit f8c2915 Aug 23, 2016 @dmeents updated for part 6!
Permalink
Failed to load latest commit information.
client
server
.gitignore
README.md

README.md

Journey into React

The project files for the Journey into React tutorial that I'm writing on my website. It is still in development and the next part will be released as soon as possible.

Get started with this tutorial here.

Part Five: Creating a RESTful API with Express

We're going to be changing gears a bit here with Part 5 of our React.js tutorial and focus now on the back-end of our application. This section will center on creating an express server that uses cors and body-parser to send JSON responses to our clients. It'll do this when they send a "get" request to our hello world API. We'll also create our first controller and first API route to handle these requests!

Part 5 is a little unique in that it does not rely on the previous 4 tutorials, and our server stands completely independent of what we've previously worked on. However, the API that we'll be starting today will be the one that'll connect with our client application in the future parts of this series. This API will handle our server side authentication and database communication in the future.

Read Journey into React Part 5

Part Four: Styling your App with Scss and Webpack

I'm back! There was a bit of some down time there while I relocated my business (and myself!) to Minnessota, but after much ado - part 4 is here! If you missed the last few segments you can always catch up here.

This time we are going to be working on styling our application with some scss by implementing a whole host of new loaders into our webpack.config.js file that will allow us to preprocess that scss for some slick customization. We'll be working with a grid system to streamline our web design, and then we'll put it all together to get our navigation bar looking pretty - all the while setting us up for easy improvements down the road. I'm pretty excited to get started on this one with you, so let's go!

Read Journey into React Part 4

Part Three: Navigating Between Webpages with React Router

Hello and welcome back for part 3 of our journey into React. By now, you've set up your windows based work environment, and have created your first hello world app. If you've missed these, I'd highly recommend going back and reviewing them: part 1 is here, and part 2 is here.

Today we are going to be expanding on this hello world app to start to fit the needs of the end application we'll be building. In review, we are working on an address book application that is going to store our contacts in a Mongo database. Our application will support multiple accounts, will authenticate securely, and will provide us with the ability to add, erase, call, or email our contacts all from within the browser. So going forward we are going to start pushing our application in that direction.

Read Journey into React Part 3

Part Two: Creating your first React App

In part 1 of our journey into react we got our windows work environment set up; we installed ConEmu to set up a pretty windows console, the text editor Atom.io to improve our coding experience, and then from within that console we installed Node.js and git. After that we learned how to navigate using the command line, and we created our project directory, and initialized our project with the npm init command. Lastly, we got a feel for how installing dependencies works by installing React itself.

In this part of our tutorial we'll get a working development server set up, and our first hello world app to display in the web browser. To do this we are going to install several new dependencies, set up our webpack.config file, and of course get our first taste of programming in React. So let's dive right in!

Read Journey into React Part 2

Part One: Getting Started with React on Windows

After recently taking the plunge into React myself, I decided I would write a series of posts on my experience. I found that while there are countless well written articles on the subject, tutorials to follow, and the endless knowledge of professionals on Stack Overflow, getting a working knowledge of React was difficult and the process was convoluted. It's my hope that that this series of articles and their accompanying videos will make the learning curve a bit easier, and get you creating much faster.

I went into learning this language with a strong understanding of HTML, CSS, and JQUERY, as well as experience in C#. Even with this experience I initially found the concepts of React, Node, and all of their dependencies a bit overwhelming, so stick with it and you'll be creating your own apps in no time.

Read Journey into React Part 1