GithubHelp home page GithubHelp logo

gaearon / reactview Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zackify/reactview

3.0 2.0 1.0 291 KB

reactview lets you instantly view (and hot reload) any react component in your browser

HTML 1.58% JavaScript 98.22% CSS 0.20%

reactview's Introduction

##ReactView

##Install

npm install -g reactview

###Usage

This is the perfect tool for prototyping React components. Instead of setting up webpack to convert ES6 features or setup a server, it's as easy as:

	reactview component.jsx

It'll automagically compile it using webpack and babel, then start a server and open your browser. Optionally, you can specify the port as the second argument: reactview component.jsx 8000

It will also read json from stdin and pass them in as component props, eg:

	cat props.json | reactview example.jsx

###Example

The example component looks like:

	import React from 'react'
	import Test from './test.css'

	export default class Woah extends React.Component{
		render(){
			return <div className="test">this is sick</div>
		}
	}

No need to add React.render. CSS importing is also included.

How do I set what gets rendered?

You need to specify export default on the component you want rendered. In 0.5.2, you can explicitly pass the component / class name you want rendered: reactview component.jsx ComponentName. Useful if you're importing components and there are multiple exports.

##Contributing

To modify reactview, take a look at src/reactview.js. After making changes you'll need to do npm run build then npm install . -g if you're wanting to access it without doing node bin/reactview.js

###Todos

  • passing props like --props {test: 'value'}
  • allow .js files to be compiled (only .jsx is supported now)
  • display error if component doesn't have a default export
  • whatever you send in a pull request

reactview's People

Contributors

joshwnj avatar taion avatar zackify avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

rubythonode

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.