SublimeText and React

Question

I'm new to React, I'm reading this tutorial an this is the code I'm writing:

import React from 'react'

export default class App extends React.Component {      

    render() {

        const person = {
            firstName: 'John',
            lastName: 'Doe'
        };

        function formatName(user) {
            return user.firstName + ' ' + user.lastName;
        }

        function formatDate(date) {
            return date.toLocaleDateString();
        }

        function getGreeting(user) {
            if(user) {
                return <h1>Hello, {formatName(user)}!</h1>;
            }
            return <h1>Hello, Stranger.</h1>;
        }

        function tick() {
            const element = (
                <div>
                    <h1>Hello, world!</h1>
                    <h2>It is {new Date().toLocaleTimeString()}.</h2>
                </div>
            );
        }

        function Welcome(props) {
            return <h1>Hello, {props.name}</h1>;
        }
        function App() {
            return (
                <div>
                    <Welcome name='Sara'/>
                    <Welcome name='Cahal'/>
                    <Welcome name='Edite'/>
                </div>
            );
        }

        // other code...

        const hi = <h1>{getGreeting(person)}</h1>;

        return (hi);
    } 
} 

This is how I see the code:

Why the colors are in this form? In this way is difficult to read code. How can I see colors like in the tutorial? Where I'm wrong? Is there a way to set React as language?

Answer 1

You'll need babel plugin for Sublime. It will give you es6 and jsx syntax highlighting. Just follow their documentation to enable it by default for your .js and .jsx files.

https://github.com/babel/babel-sublime

Cheers!