Preparation
First make sure that you have the latest version of node.js installed. The easiest way to do that is to download the installer package from nodejs.org.
npm is the node package manager. It is updated more frequently than node itself. To make sure your have the latest version, at the prompt type npm install npm@latest -g.
Create-react-app
Now change to the root folder where you want the app to live and type npx create-react-app [yourapp] to create the initial app. npx was installed when we installed npm. It executes an npm package directly. It downloads a starting point for an application using the latest version of React. Besides that it configures a complete environment to develop in which we will explore a bit further.
Type cd [yourapp] and then npm start. start in this case is a script that gets executed by npm. As you can see a development webserver is starting and a browser is launched with the template app. It runs the app in development mode. That's not the fastest mode it can run in, but in return it gives you as much context information as possible which is great for debugging.
Before create-react-app existed you had to install and configure all the needed tools manually to get this running. Now you're up and running within minutes.
Create-react-app installed and configured all kinds of tools for us that make up the development pipeline. If you take a look in the node_modules folder you can see all the bits and pieces. There are two tools here that play important parts: Webpack is a smart bundler that packages up our components that are in modules in the application. And Babel translates jsx into javascript. It also translates our ES2015 and higher syntax to ES5 so older browsers can run the app as well.
Now open up app.js in an editor while the development server still runs. Near the bottom notice the jsx. Now type something that makes the jsx invalid and take a look at the console where the development server runs. It immediately detects that something's wrong. So it actively watches the changes in the app and generates an error with info that lets us easily fix the problem. Be sure to change back before we continue.
Production mode
To create a build that runs in production mode, without debug information but faster, type npm run build at the console.
It creates a build directory which now contains everything that is needed to run the app on a web server.
Let's see what in the newly created build directory. You can see it has created a minimized index.html file that references one bundled and minified css and javascript file. The javascript file contains not only React itself and React DOM but also all javascript present in the app. So when this application is used a browser there are only a few requests needed to load up the entire app.
Let me introduce you to my editor of choice next.
Visual Studio Code
As the editor I chose Visual Studio Code because it's lightweight, cross platform and it seems to be the most popular editor these days. It's integration with a React setup is great.
Install it by downloading it from here. VS Code is not required, there are many other great editors out there that work perfectly.
To open your project open a console window, change the directory to where you created the app and type "code .". Or you can just start VS code and choose the open folder option.
Now press ctrl-shift-x to open the extension console and type chrome debug. Install the chrome debugger.
Now make sure the development server is still running in the console window. If not restart it.
In Visual Studio Code press the debug button in the sidebar and press the run icon. You can also press F5. Because there is no launch configuration yet you'll get the choice to debug with node.js which is supported by default or chrome. You've just added chrome support by installing the extension. Choose Chrome and a launchsettings.json file is created which is a configuration file for VS code. Change the port to 3000 which is the port the development server is running on.
Now press run or F5 again. A seperate instance of Chrome launches. In app.js set a breakpoint at the render function for example and refresh the browser that just launched. The breakpoint is hit. Press stop and change something in the text that is rendered. After a second the browser adapts to the change. VS Code has autosave on by default and the development server is still monitoring changes.
A handy feature of VS Code is it's terminal. Instead of starting the development server in a seperate window, you can also start it from this tab.
Next let's see how we can make Chrome aware that we're using React.
React developer tools
In Chrome go to the extension screen and press get more extensions. Search for react developer tools and install them. Close all chrome windows and stop the VS code debugger. Now run again. Press F12 in the browser and now you should see a React tab on the right side of the menu. The power of the extension lies in the fact that you can see the entire React component hierarchy. So this is not the HTML you're seeing, but the jsx. By clicking on a component you can inspect the props and the state of the component in the right pane. This is a great tool for debugging.
