The following ST3 plugins are need for React development:
- babel - for jsx syntax highlighting
- sublime-jshint - for linting your js code
- sublime-jsxhint - for linting your jsx code
Install babel
This one is very straight forward, just find babel in package control and install it. To use the Babel's JSX syntax highlight whenever a .jsx file is opened:
- open up a .jsx file in ST3
- Goto 'View -> Syntax -> Open all current extention as ... > Babel > Javascript (Babel)'
Linting JSX
I have written a blog about Linting react code here. Follow the instructions in that blog, it will give you real time linting as you code in sublime.
Install React Chrome plugin
Install this plugin if you use Chrome for development, go to this link and install.
Once installed, open up Extensions find the React plugin and check the Allow access to file URLS. This is important if you want to test React files locally.
If you have a webpage using React opened, such as this page, an extra tab named React should appear in your Developer Tools
Convert JSX files to JS files
React uses a syntax called JSX. To use it in your webpage, you have to convert it to regular JS format first. There are two ways to do it:
- Use the 'JSXTransformer.js' (which comes with React.js download) to do the conversion
- Use the 'react-tools' npm package to perform the conversion
Which one should you choose?
If you want to write your JSX code inside the HTML page, then use JSXTransformer.js like this:
<html>
<body>
<script src="js/vendor/react.min.js"></script>
<script src="js/vendor/JSXTransformer.js"></script>
<script type="text/jsx">
...React code inside...
</script>
</body>
</html>
This is good for debugging but not good for production. Because compiling from .jsx to .js takes time, you want to precompile the .jsx files to regular .js files before serving them to your customers.
So, how to compile .jsx files?
Install the 'react-tools' package via npm:
npm install -g react-tools
Once finished, go into your dev directory and use this command:
Assuming this is the structure of your dev directory
dev_dir/
js/
src/
build/
cd dev_dir/js
jsx -w src/ build/
This command means watching all .js files inside the src folder and compile them if modified to regular .js files and save them to the build folder.
WARNING: This command works only if you saved the JSX files with .js extension, if you saved your JSX files with the .jsx extension, then you need to use this command:
jsx -x jsx -w src/ build/
If the command has been executed successfully, you should see a message like this:
built Module("your_js_or_jsx_filename")
["your_js_or_jsx_filename"]
You can import the compiled js files like this (without the need of JSXTransformer.js):
<html>
<body>
<script src="js/vendor/react.min.js"></script>
<script type="text/javascript" scr="js/build/precompiled.js"></script>
</body>
</html>
XMLHttpRequest cannot load
Just when you thought you can import a .jsx file like regular .js file locally like this:
<html>
<body>
<script src="js/react.min.js"></script>
<script src="js/JSXTransformer.js"></script>
<script type="text/jsx" src="react_module.jsx"></script>
</body>
</html>
You will see an error in Chrome's console: XMLHttpRequest cannot load, this is because the JSXTransformer.js loads jsx files via XHR which is prohibited for local files.
There are a few ways to overcome this problem which is explained in the StackOverflow link above, but the easiest way to deal with it is to precompile your .jsx files into regular .js files and import them. (which has been explained in the previous section)
A very good React tutorial link
Reactjs Introduction for People Who Know Just Enough JQuery to Get by
This is about it to kickstart your React project using ST3.
