Learn React: Foundation I
React Skyscraper is a series of coding tutorials that will build upon each other to help you learn and master React! This is the first tutorial of the series, where we’ll lay the foundation to build-up a great React application.
There are quite a few things we need to get setup before we can start coding. So, without further ado:
Getting Setup
- Install Node.
- Install Yarn.
- Create a new project folder:
mkdir reactSkyscraper - Change into your project folder and we’ll initialize our project with
yarn init. You can type in answers to all the questions or just hit enter for all of them to set them to the default answer. - Install webpack and the webpack-dev-server:
yarn add webpack webpack-dev-server --dev - Install react and react-dom:
yarn add react react-dom - Let’s create a folder called ‘build’ to hold the output bundle that webpack will create for us:
mkdir build - We’ll also create a source directory ‘src’ and a sub-directory within it called ‘components’ to hold our React components. This is a common directory structure used in React applications.
- At this point, your directory structure should look like this:
Your package.json file should look like this:
Splainin’
We just did a bunch of setup without much explanation, so allow me to break it down for you a bit…
When we create our application with React, which is a JavaScript framework, our web browser(s) won’t know how to run the application. That’s where Webpack comes in and saves the day like a badass.
From the Webpack page itself “ When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles — often only one — to be loaded by the browser”.
Version Control AKA the “Save” button
At this point, it’s a good idea to setup a Git repository so we can save our progress on the application.
If you’re not familiar with Git, or why you should use version control, take a break and check-out the following:
After you have setup your git repository, don’t forget to add a .gitignore file to prevent committing unnecessary files (mainly, all the node modules). If you’ve never created or used a .gitignore file before, feel free to use this one from Facebook or the template below:
Let’s go ahead and add everything we’ve setup thus far and push it to our git repository with an initial commit:
git add -A
git commit -m "Initial commit"
git push origin master
Phew. Now that’s out of the way, let’s get started with…
Webpaaaaaaaaack
Webpack requires a very specifically named configuration file in order to do its magic. We’ll create a filed named webpack.config.js in the root directory of our project to appease webpack. Our initial webpack configuration will consist of the following code:
The first line of code is requiring the path module to make our path manipulation easier. The module.exports allows our settings to be exported as a module object — read more about that here if you wish.
The entry key/value pair tells webpack where to enter our app and figure out all it’s dependencies. We haven’t created that file yet, so let’s go ahead and create a file called index.js in the /src directory. Next, add a console.log("Oh my. It works!"); line to theindex.js file. We’ll beef-up our index.js file later, but we’re using the console.log() to verify everything is working.
The output key/value pair tells webpack where to put the bundle of joy it will create.
In addition to the JavaScript bundle that webpack will generate for us, we need to create a html file in our /build folder.
Public HTML
We’ll create a standard HTML file. Our HTML file will have a <div> with an id="app" attribute that our React app will use as an entry point. Your index.html file should look somewhat like the file below:
Webpack Dev Server
We installed webpack-dev-server earlier, but now we need to add some configuration options to webpack. We’ll tell the dev server to serve our bundle from the /build folder we setup with contentBase: './build'. Your webpack.config.js file should now look like:
We also need to add a script to our package.json file to tell it to run our server. We’ll add a "scripts": section to our package.json file and create a script to start our server:
The --open options will automatically open the URL in your default browser. Go ahead and remove that option if you don’t want the app to auto start in your default browser.
Does this thing work?
We’ve made quite a bit of progress, so let’s take a second to make sure everything we’ve setup so far is working. Make sure you have saved the progress we’ve made in all of the files. Open up your terminal, make sure you’re in the root directory and enter the command: yarn start to test it out:
You should see a new browser window/tab open with a blank screen. If you open up the browser console, you should see the output from our conosole.log() statement. Here are a few links to open the dev tools in various browsers: Chrome | Firefox | IE | Safari
Great job. We’ve gone through quite a bit of configuration and setup for our application, but we still have a few more things to setup before we can start coding in React. Let’s take a quick break and continue in the next section, where we will setup Babel, our webpack loaders and start coding some React (fin-a-lly):
