What Tool Are Needed?
Getting started with ReactJS isn't as straight forward as working with a framework like jQuery or ExtJS. There are several tools and a couple of software packages needed to create a ReactJS site with a Web API 2 backend.
First, the IDEs. Yes, there are two that I use for a single project! I use Visual Studio 2015 (you can use Visual Studio Community Edition) for creating the base Web API 2 project. Then I use Visual Studio Code to work with ReactJS. It has some built in features that make working with React easier than working with it in Visual Studio 2015 (seems odd to me too!). You can download both here.
Once you have the two IDEs set up, go ahead and create a new ASP.NET Web Application in Visual Studio. For this example, I'm calling the project 'MyProject' and saving it in 'C:\Projects\'.
Make it an empty project and include WebAPI folders and references.
Once the project is set up and being displayed in Visual Studio, open up Visual Studio Code and go to File > Open Folder and navigate to 'C:\Projects\MyProject'. This will put you in the root folder above the folder where your project files exist (you will see a 'MyProject' folder inside the selected folder).
Setting up ECMA6, ReactJS, and the Kitchen Sink
This is the part that took me a while to fully grasp, and I may still not have a complete grasp of the process! However, I can provide the steps to get you pointed in the right direction. First, you need to go out to https://nodejs.org and download NodeJS. I downloaded the current version, but you can safely download the recommended version.
This will install NodeJS and the Node Package Manager, which we will be using heavily. Next go back into Visual Studio Code and press [Ctrl + `] (that's back tick, not single quote) to bring up the terminal window. Now this is where the magic starts!
We will be making a lot of calls to the Node Package Manager using the 'npm' command in the terminal window. Press [Enter] after you type each of the commands below into the terminal window.
Next we will initialize our project so that it can work with npm packages. This will create a package.json file and node_modules folder for our project.
Next we will install all of the dependencies we need to be able to develop our application. We need babel, and several add-ons called loaders in order to have WebPack process all of these files for use and organize them neatly at the end. You can copy this and paste it into the terminal window. This will allow us to work with ECMA6, SASS, JSON, and Images.
Next, in Visual Studio Code, you will need to create a new file named '.babelrc' (it starts with a '.'). In this file, you will put the following, along with any additional presets you may need for Babel.
Now we need to install the client-side dependencies we need for our project. This will allow our application to use the ReactJS framework and have AJAX capabilities.
Now, we need to create a file named 'webpack.config.js' and put the following code in it. This is what tells WebPack how to work with our files. We will be specifying that our processed files will go into 'C:\Projects\MyProject\MyProject\content\', and that those files will be called bundle.js and bundle.css.
Whew! Now that all of that is done, we now need to set up our folder structure in our project to accommodate our files. In the project folder 'C:\Project\MyProject\MyProject\' create a 'content' folder. This is where bundle.js and bundle.css will go.
In the same folder, create an index.html file with the following.
In the root folder 'C:/Projects/MyProject' create a 'src' folder. This is where all of your components and styles will go. In the 'src' folder, create a 'components' folder, an 'images' folder, and a 'styles' folder. In the 'src' folder, create an 'index.js' file. This will be the entry point into your application.
In 'index.js' type the following, changing your Routes as needed.
When creating components, add the *.js file to the 'components' folder, and add the *.scss file to the 'styles' folder. We will create four components: Page, Home, About, and Missing.
Once all of this is in place, your file structure should look like the one in the image below.
Now in the Visual Studio Code terminal window, type 'webpack' and your files should be compiled and placed in the 'C:\Projects\MyProject\Myproject\content\' folder as 'bundle.js' and 'bundle.css'.
Are We There Yet?
Yes! Now all that is left is to run your application in Visual Studio (not Code) and your index.html should come up with three links and some text, all with a silver background. You can click the links to go from Home to About and then to a bad link called Bad Link to demonstrate the Missing component.
You will notice the url in the address bar for these end in #/Home, #/About, and #/BadLink. This is how React-Router's client-side MVC works. It creates a single page app that still has navigable links.
Thanks for Reading!
Thank you all for reading this tutorial. I hope it helps you to get started with WebPack and ReactJS without so much intimidation. Once you get the hang of it, you'll refer to setup instructions less and less! You can learn more about ReactJS
This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.
Suresh Dasari on March 20, 2019:
Thanks for the post. It helps me to implement in my Tutlane.com site.
hi on November 22, 2018:
i need a sample applciation