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 is somewhat difficult and the process is a little convoluted. This series of articles will make the learning curve a bit easier and get you creating your own applications much faster.
I went into learning this language with a strong understanding of HTML, CSS, and jQuery. 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 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 has grown quite a bit since my original writing of this tutorial. You can download and then import my current settings from here, or follow these directions to customize your own.
Open up settings, and click main. Set the font to something more easily read, like "Consolas", and set the font size to 18. Next, click Update on the left menu, and check the "startup" box. Now let's change the theme by clicking colors on the left, and selecting the "Twilight" scheme. I like a little transparency on my console so I can see what's underneath it, so finally click transparency and check the "active window transparency" and "use different transparency value for inactive". Set them to about 85% and 75% respectfully.
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 install atom-material-ui atom-material-syntax-dark language-babel minimap pigments
These plugins are not necessary to your development, but I have found that they make my programming more intuitive. Click file, then settings, to change themes and syntax highlighting colors.
Optional: Install Git from the console
One of the most powerful tools that we as developers have at our disposal is 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/react-node-tutorial.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:.
Navigate to wherever you'd like to keep all of your projects, and then type in the following to create a new directory:
$ mkdir journey-into-react
This will create our work directory, then you'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.