A proof-of-concept plugin for Atom that applies JS/React Atomist editors. For more details, refer to the atomist-js package (https://github.com/triforkse/atomist-js).
Atomist:
)If you don't have a React codebase that you can test the plugin on, try the following two files:
App.js
import logo from './logo.svg';import './App.css';const Welcome = (props) => <h1>Hello, {props.name}</h1>;const Home = () => <p>Welcome home!</p>;class App extends Component {constructor(props) {super(props);}handleClick() {// Test commentconsole.log('handleClick() was called in component', this);console.log('check my indentation! woo!');}render() {return (<div className="App"><div className="App-header"><img src={logo} className="App-logo" alt="logo" onClick={this.handleClick} /><h2>Welcome to React</h2></div><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p><p className="App-outro" style={{backgroundColor: 'black', color: 'white'}}>Peace, out!</p></div>);}}export default App;
App.css
text-align: center;}.App-logo {animation: App-logo-spin infinite 20s linear;height: 80px;}.App-header {background-color: #222;height: 150px;padding: 20px;color: white;}.App-intro {font-size: large;}@keyframes App-logo-spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.