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 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.
I'll also be referencing a few different tutorials I've found useful throughout my journey into React, in particular the one over at Slate Peak. I work closely with Josh on many projects, and his React tutorial is particularly useful for Mac users. As this tutorial will focus primarily on my experience with a Windows computer, his tutorial might be able to fill in any gaps that you Mac users may run into. That being said, this tutorial should be pretty friendly across all platforms.
What we'll be making
We're going to be making an application that will store our contacts in a database. We'll use React to create a friendly front end interface, and Node to create an API that will securely authenticate logins, and interact with a Mongo database. Using these technologies we'll be able to login into our application, create or delete our contacts, and view them to interact with them (i.e. call or email them).
So, let's get started!
Download and install Node
You can download and install Node here.
Download and install Atom
The next great tool we'll be using is Atom.io. I highly recommend you transition into this text editor as it provides a variety of useful features for project development as well as coding in React and Node.
Let's make the Windows Console pretty
As it's been said a million times before, the Windows command Console is quite lacking in aesthetics and functionality. So, let's fix that. We're going to install ConEmu, a local terminal emulator. With ConEmu we have much more flexibility over the appearance, and functionality of our console. Since we'll be using a lot, it's not a bad idea make ourselves at home in it.
Start downloading ConEmu, and we'll talk about the configuration that I am using.
My current set up is fairly straight forward, and as I continue to learn about ConEmu and it's capabilities I may return here and update this segment. For now, simply choose a color scheme that appeals to you: I use Tomorrow. After you've selected a scheme, go to the "settings" panel and click "main". I've changed my console font to "Source Code Pro" and adjusted the font size to 18pt. To me, this makes a nice clean work area that's easy to read - but feel free to customize to your hearts content.
Lastly, make sure that under the "start up" options you have the specified named task set to
Optional: Enhance Atom.io
After you've installed Atom, I would then make use of these addons by opening your ConEmu and typing:
$ apm atom-material-ui language-babel minimap pigments
These plugins are not necessary to your development, but I have found that they make my programming more intuitive.
Optional: Install Git from the console
One of the most powerful tools that we as programmers have at our disposal would be GitHub. If you'd like to download the repository for this complete project, you can do so using the console.
We're going to use Scoop to install git so that we can have access to github directly from our command line. Scoop is to windows users, as Homebrew is to Mac users.
Start by updating our execution policy, this will allow us to use the command line to install from. You'll do this by opening up your shiny new ConEmu console and typing in:
$ set-executionpolicy unrestricted -s cu
Next we want to actually install Scoop, so enter:
$ iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
Now let's install git:
$ scoop install git
Now that that is done, you can easily clone this projects repository by navigating to a directory in your console (see below) and entering:
$ git clone https://github.com/dmeents/journey-into-react.git
Creating our Project Directory
Now that you've got all the tools that you'll need to start programming in React, let's actually get started by creating our project directory.
In your console (ConEmu) you can navigate between you computers directories by typing in cd to change directories, or cd .. to go up a directory. You can change drives by simply typing in the drive letter and a colon, like so: d:.
We're going to navigate to my D drive where I keep all my projects, and I'm going to type in the following to create a new directory:
$ mkdir journey-into-react
This will create our work directory, now I'll navigate to it by inputting:
$ cd journey-into-react
Initializing our Application
Now that we've got our new directory, and we're currently working in it, let's initialize our program with the command:
$ npm init
This will begin a step by step procedure to get some basic information populated into our package.json file - which is a crucial piece to every React app.
Feel free to simply hit the enter key a few times to skip through this as it will set appropriate defaults for this tutorial. I did input a name, author, and of course my github url. Afterwards, type "yes" to complete the initialization.
Now, open Atom and on the left hand side, right click, and select "add project folder". Navigate to your new project and select it. We can now view the package.json file that "npm init" created for us. Pretty nifty, huh?
Import our first dependency
One of the key things that the package.json does is tells the npm installer what dependencies the program needs to function properly, so that it only installs the ones we need. So let's tell the package.json file that we're going to need "react" in our project - which is kind crucial to this tutorial.
In the command line input:
$ npm install --save react
After a few moments, react will be installed into a new directory titled "node_modules". And if you check the package.json file, you'll see "react" and some version number under the dependencies object. And that's it, we're ready to start building our first application in React!
Head on over to my Journey into React Part 2 where we'll start our own local server, and make a hello world application.