This post helps setting up the development environment for React on VS Code using Browserify and Gulp
I have been playing around with React for the past few days and liking the one way binding and immutability concept that it puts forward. The component-based approach and having all related code in a single place is really interesting. Need to explore more and see how it really turns out building UI’s with React.
Package Manager for External Dependencies
One of the first things we need when starting with a fresh project on React, is the React library itself. I use Node Package Manager(npm) for managing all my code and development dependencies. Use the below commands to set up the npm configuration (package.json) and install the latest version of React library.
1 2 3
Setting up VS Code
Intellisense for libraries is available through type definition files, usually available in the DefinitelyTyped repository. With npm, you can manage these definition files using the TypeScript Definition Manager (typings) package. To get started install the typings package and support for node packages. Now you can use typings to manage all the typescript definitions and use it for getting IntelliSense support. Once you have the correct type definitions installed for the packages you use, VSCode will show IntelliSense as shown below.
1 2 3
Hello World from React
Now that we have enough to get us started let’s write our first react component, which displays a message passed into it.
1 2 3 4 5 6 7 8 9 10 11 12 13
Let’s save the above into components/helloworld.js. To use this component in the application, it needs to be rendered into the HTML page. So let’s add a main entry point for the application as below and save it into main.js. Notice how the component is referred in here and rendered into the HTML div element app.
1 2 3 4 5 6 7 8 9 10
For completeness below is how the Index.html looks
1 2 3 4 5 6 7 8
Using Browserify for Bundling
If you now manually copy over the HTML file into the dest folder and open it from there you should be seeing the ‘Hello World from React’ message.
Automating Build and More
I definitely did not want to keep running the above command and copy the HTML(/CSS) files, every time I make a change, to see the output - so automating it was very much required. What I would essentially like to have is every time I make a change on any of the files in the project, the build to trigger and output the updated application into the dest folder and automatically refreshing the browser so that I can see the changes (near) real-time. I chose to use Gulp as this is popular and I have had some experience using it before.
To organize all the different path’s used in the gulp build file, I have an object, path holding all the properties together, that’s used in the gulp tasks. The different tasks that I have defined are to build ( which copyHtmlFiles and builds and transforms js files), lint, watch‘es the source folder for changes and triggers the required build, connect’s a server to host the application and automatically reload’s the browser whenever code is changed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
With the default gulp task running, either using VSCode Task Runner or the command line, any edits that I make to the code gets build and pushed to the output directory and the browser refreshes to show the latest changes.
If you find any package details missing see the package.json file.
You can find the hello world project template here. The repository size is a bit high as I have included the npm packages (node_modules) in the repository, which you would have anyways downloaded when doing a ‘npm install’.
Hope this helps you to get started with React!