Getting Started with ReactJS20 Feb 2016
ReactJS is a library created by Facebook. It is getting hot and more and more popular recently. One of the great companion of ReactJS is Webpack, which can tremendously help to speed up and ease the coding of ReactJS.
In this article, I would like to introduce how we can get started with the combination of Webpack and ReactJS. This would cover some basic setup and how we can start using ReactJS to develop a web app straight away.
Before carrying on, let’s make sure we have the latest nodejs. You can check your nodejs version by running the following command
At the point that I am writing this article, my nodejs version is
5.6.0. Hence, make sure your nodejs version is later than mine.
If your nodejs’s version is
0.10.xx or even lower, you should upgrade it. On Mac, you can trigger the following command to upgrade nodejs
Next stuff, let’s install Yeoman by running the following command:
Following by install
Finally, you can create a folder and create a react-webpack for your project:
The installer will ask you a few questions as following:
You can experiment your answers. However, in the scope of this article, let’s use the following setups:
- Please choose your application name: myNewProject
- Which styles language you want to use? scss
- Enable postcss? No
Once you are done with your answers, yeoman would carry on with all the necessary installation. After the installation, it should have the following folder structure:
Running Webpack application
From the directory that we have done the installation, trigger the following command to run the application:
After it runs, you should see a home page with Yeoman image in the middle
Creating first ReactJS component
The generator already creates an initial component for you which resides in
src/components/Main.js. If you would like to create a new ReactJS component, you can trigger the following command:
For instance, I can generate a Home component by issuing the following command:
This will generate
src/components/HomeComponent.js, which you can start coding inside that file
Intall and use React Router
This will perform the downloading of react-router library. At the same time, it will add a line inside your
Once we have react-router library installed, we can replace the code inside
src/index.js with the following code:
Install and use jQuery
Same as install react-router library, we can easily install jQuery library by issuing the following command:
After you can import jquery wherever you want to start using it:
However, I feel quite inconvenient that every time I need to use jQuery, I would need to import. jQuery is a component that I would like to use on most of this site. If you have this kind of thought, then there is a way to automatically import jQuery everytime you call $ or jQuery. Let’s move on to the next section
Lazy load a component
You can set jQuery or any library to be lazy loaded by using
webpack.ProvidePlugin. This would need to be set inside
cfg/dev.js like following.
You would also need to add in the same set of codes inside
cfg/dist.js to enable to lazy load when distribute the folder as well:
After we have done with the setup, we would need to restart your
node server by stop and start this process. Moving fowards, we would not need to import jQuery anymore, wherever we use either
jQuery, Webpack would automatically import jQuery for us.
We have gone through the entire process after do basic initial setup with ReactJS, Webpack and Yeoman. After this setup, we would be able to start all the coding for the project.