From 4ab5d0f44dd42ea3bde6b6212da48c07c1d70537 Mon Sep 17 00:00:00 2001 From: Dany Shaanan Date: Thu, 30 Jul 2015 17:49:11 +0300 Subject: [PATCH] Update markdown files --- CONTRIBUTING.md | 33 +++++++++++++++++++++++++++++++++ README.md | 16 ++++++++++------ docs/cli.md | 4 ++-- 3 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..9a8b9aa --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,33 @@ +# Contributing to React-Templates + +Thanks for coming! Contributions of any kind are welcome. + +## Setup + +* Fork [React-Templates](https://github.com/wix/react-templates) +* Clone your fork +* In your `react-templates` directory, run `npm i && grunt all` + +## Submitting an issue + +You can submit an issue [here](https://github.com/wix/react-templates/issues). +Please make sure that there isn't already an issue regarding the same matter, +and include as many details as possible about the issue and on how to reproduce it, +if relevant. + +## Creating a pull request + +* Please adhere to the style and formatting of the code +* Write tests for new functionality +* Create purposeful and complete commits + +### Before committing + +* Make sure that `grunt all` passes. +* Pick a concise commit message + +When working on [wix.github.io/react-templates](http://wix.github.io/react-templates), +run `grunt pgall` to create the minified files, +but do not include their updated version in your commit. +Describe in your PR what you did to the site and we'll update them after the merge. +(This is important for preventing merge conflicts in the minified files). diff --git a/README.md b/README.md index f553c9e..24bee2d 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ # React Templates -Lightweight templates for [React](http://facebook.github.io/react/index.html). +Lightweight templates for [React](http://facebook.github.io/react/index.html). * No runtime libraries. No magic. Simply precompile your way to clear React code. * Easy syntax that's similar to HTML, supported by most IDEs. @@ -13,7 +13,7 @@ Lightweight templates for [React](http://facebook.github.io/react/index.html). * Supports AMD, CommonJS, ES6, Typescript and globals. ## How does it work -React Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file. This file, which uses AMD syntax, returns a function. When invoked, this function returns a virtual React DOM based on React.DOM elements and custom user components. +React Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file. This file, which uses AMD syntax, returns a function. When invoked, this function returns a virtual React DOM based on React.DOM elements and custom user components.

A common use case would be that a regular React component would require a JavaScript file generated from a template, and then perform `func.apply(this)`, causing the template to have that component as its context. ## Playground @@ -31,7 +31,7 @@ http://plugins.jetbrains.com/plugin/7648 ###### Basic concepts for React templates -* Any valid HTML (including comments) is a template +* Any valid HTML (including comments) is a template * {} to identify JS expression * Built-in directives: * [rt-if](#rt-if) @@ -238,7 +238,7 @@ define([ ``` ## style -React templates allow the settings of styles inline in HTML, optionally returning an object from the evaluation context. By default, style names will be converted from hyphen-style to camelCase-style naming. +React templates allow the settings of styles inline in HTML, optionally returning an object from the evaluation context. By default, style names will be converted from hyphen-style to camelCase-style naming. To embed JavaScript inside a style attribute, single curly braces are used. To embed an entire object, double curly braces are used. *Note*: When embedding objects, styles must conform to camelCase-style naming. @@ -274,7 +274,7 @@ define([ ``` ## event handlers -React event handlers accept function references inside of {}, such as `onClick="{this.myClickHandler}"`. When functions are not needed, lambda notation can be used, which will create a React template that creates a function for the included code. There is no performance impact, as the function created is bound to the context instead of being recreated. +React event handlers accept function references inside of {}, such as `onClick="{this.myClickHandler}"`. When functions are not needed, lambda notation can be used, which will create a React template that creates a function for the included code. There is no performance impact, as the function created is bound to the context instead of being recreated.

The lambda notation has the form: `onClick="(evt) => console.log(evt)"`. In this example, **evt** is the name of the first argument passed into the inline function. With browser events, this will most likely be the React synthetic event. However, if you expect a property that starts with **on**Something, then React templates will treat it as an event handler. If you have an event handler called **onBoxSelected** that triggers an event with row and column params, you can write `onBoxSelected="(row, col)=>this.doSomething(row,col)"`. A no-param version is supported as well: `onClick="()=>console.log('just wanted to know it clicked')"`. ###### Sample: @@ -361,8 +361,12 @@ export default function () { }; ``` +## Contributing + +See the [Contributing page](CONTRIBUTING.md). + ## License -Copyright (c) 2014 Wix. Licensed under the MIT license. +Copyright (c) 2015 Wix. Licensed under the MIT license. [npm-image]: https://img.shields.io/npm/v/react-templates.svg?style=flat-square [npm-url]: https://npmjs.org/package/react-templates diff --git a/docs/cli.md b/docs/cli.md index 2dbfa29..a323b96 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -25,7 +25,7 @@ $ rt [,] [] Options: -h, --help Show help. -c, --color Use colors in output. - default: true - -m, --modules String Use output modules. (amd|commonjs|es6|none) - default: none + -m, --modules String Use output modules. (amd|commonjs|es6|typescript|none) - default: none -r, --force Force creation of output. skip file check. - default: false -f, --format String Use a specific output format. (stylish|json) - default: stylish -t, --target-version String React version to generate code for (0.12.1, 0.12.0, 0.11.2, 0.11.1, 0.11.0, 0.10.0) - default: 0.12.1 @@ -47,7 +47,7 @@ This option allows to override the output file even if there are no changes. ### `-m`, `--modules` -Use output modules. (amd|commonjs|none|typescript) - default: none +Use output modules. (amd|commonjs|es6|typescript|none) - default: none ### `-f`, `--format`