<commit_before># React-Rails

[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
[![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)
[![Build Status](https://img.shields.io/travis/reactjs/react-rails/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-rails)
[![Maintainers Wanted](https://img.shields.io/badge/Maintainers-Wanted-red.svg?style=flat-square)]()


React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
* Automatically renders React server-side and client-side
* Supports Webpacker 4.x, 3.x, 2.x, 1.1+
* Supports Sprockets 4.x, 3.x, 2.x
* Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)

A source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Contents

- [Get started with Webpacker](#get-started-with-webpacker)
  - [File naming](#file-naming)
- [Use with Asset Pipeline](#use-with-asset-pipeline)
  - [Custom JSX Transformer](#custom-jsx-transformer)
  - [React.js versions](#reactjs-versions)
- [View Helper](#view-helper)
    - [Custom View Helper](#custom-view-helper)
- [UJS](#ujs)
  - [Mounting & Unmounting](#mounting--unmounting)
  - [Event Handling](#event-handling)
  - [`getConstructor`](#getconstructor)
- [Server-Side Rendering](#server-side-rendering)
    - [Configuration](#configuration)
    - [JavaScript State](#javascript-state)
    - [Custom Server Renderer](#custom-server-renderer)
- [Controller Actions](#controller-actions)
- [Component Generator](#component-generator)
    - [Use with JBuilder](#use-with-jbuilder)
  - [Camelize Props](#camelize-props)
- [Upgrading](#upgrading)
  - [2.3 to 2.4](#23-to-24)
- [Common Errors](#common-errors)
  - [During installation](#during-installation)
  - [Undefined Set](#undefined-set)
  - [Using TheRubyRacer](#using-therubyracer)
  - [HMR](#hmr)
- [Related Projects](#related-projects)
- [Contributing](#contributing)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


After reading this README file, additional information about React-Rails can be found in the Wiki page:
https://github.com/reactjs/React-Rails/wiki
The Wiki page features a significant amount of additional information about React-Rails which includes instructional articles and answers to the most frequently asked questions.


## Get started with Webpacker

[Alternatively, get started with Sprockets](#use-with-asset-pipeline)

[Webpacker](https://github.com/rails/webpacker) provides modern JS tooling for Rails. Here are the listed steps for integrating Webpacker and Rails-React with Rails:

##### 1) Create a new Rails app:
```
$ rails new my-app
$ cd my-app
```

##### 2) Add `webpacker` and `react-rails` to your gemfile:
```ruby
gem 'webpacker'
gem 'react-rails'
```

##### 3) Now run the installers:

###### Rails 6.x:
```
$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install
```
Note: For Rails 6, You don't need to add `javascript_pack_tag` as in Step 4. Since its already added by default.

###### Rails 5.x:
```
$ bundle install
$ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install
```
This gives you:

- `app/javascript/components/` directory for your React components
- [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
- `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)

##### 4) Link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
```erb
<!-- application.html.erb in Head tag below turbolinks -->
<%= javascript_pack_tag 'application' %>
```

##### 5) Generate your first component:
```
$ rails g react:component HelloWorld greeting:string
```

##### 6) You can also generate your component in a subdirectory:
```
$ rails g react:component my_subdirectory/HelloWorld greeting:string
```
Note: Your component is added to `app/javascript/components/` by default.


##### 7) [Render it in a Rails view](#view-helper):

```erb
<!-- erb: paste this in view -->
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
```

##### 8) Lets Start the app:
```
$ rails s
```
output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.

### Component name

The component name tells `react-rails` where to load the component. For example:

`react_component` call | component `require`
-----|-----
`react_component("Item")` | `require("Item")`
`react_component("items/index")` | `require("items/index")`
`react_component("items.Index")` | `require("items").Index`
`react_component("items.Index.Header")` | `require("items").Index.Header`<commit_msg>Add nested component call info<commit_after># React-Rails

[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
[![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)
[![Build Status](https://img.shields.io/travis/reactjs/react-rails/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-rails)
[![Maintainers Wanted](https://img.shields.io/badge/Maintainers-Wanted-red.svg?style=flat-square)]()


React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
* Automatically renders React server-side and client-side
* Supports Webpacker 4.x, 3.x, 2.x, 1.1+
* Supports Sprockets 4.x, 3.x, 2.x
* Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)

A source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Contents

- [Get started with Webpacker](#get-started-with-webpacker)
  - [File naming](#file-naming)
- [Use with Asset Pipeline](#use-with-asset-pipeline)
  - [Custom JSX Transformer](#custom-jsx-transformer)
  - [React.js versions](#reactjs-versions)
- [View Helper](#view-helper)
    - [Custom View Helper](#custom-view-helper)
- [UJS](#ujs)
  - [Mounting & Unmounting](#mounting--unmounting)
  - [Event Handling](#event-handling)
  - [`getConstructor`](#getconstructor)
- [Server-Side Rendering](#server-side-rendering)
    - [Configuration](#configuration)
    - [JavaScript State](#javascript-state)
    - [Custom Server Renderer](#custom-server-renderer)
- [Controller Actions](#controller-actions)
- [Component Generator](#component-generator)
    - [Use with JBuilder](#use-with-jbuilder)
  - [Camelize Props](#camelize-props)
- [Upgrading](#upgrading)
  - [2.3 to 2.4](#23-to-24)
- [Common Errors](#common-errors)
  - [During installation](#during-installation)
  - [Undefined Set](#undefined-set)
  - [Using TheRubyRacer](#using-therubyracer)
  - [HMR](#hmr)
- [Related Projects](#related-projects)
- [Contributing](#contributing)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


After reading this README file, additional information about React-Rails can be found in the Wiki page:
https://github.com/reactjs/React-Rails/wiki
The Wiki page features a significant amount of additional information about React-Rails which includes instructional articles and answers to the most frequently asked questions.


## Get started with Webpacker

[Alternatively, get started with Sprockets](#use-with-asset-pipeline)

[Webpacker](https://github.com/rails/webpacker) provides modern JS tooling for Rails. Here are the listed steps for integrating Webpacker and Rails-React with Rails:

##### 1) Create a new Rails app:
```
$ rails new my-app
$ cd my-app
```

##### 2) Add `webpacker` and `react-rails` to your gemfile:
```ruby
gem 'webpacker'
gem 'react-rails'
```

##### 3) Now run the installers:

###### Rails 6.x:
```
$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install
```
Note: For Rails 6, You don't need to add `javascript_pack_tag` as in Step 4. Since its already added by default.

###### Rails 5.x:
```
$ bundle install
$ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
$ rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install
```
This gives you:

- `app/javascript/components/` directory for your React components
- [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
- `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)

##### 4) Link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
```erb
<!-- application.html.erb in Head tag below turbolinks -->
<%= javascript_pack_tag 'application' %>
```

##### 5) Generate your first component:
```
$ rails g react:component HelloWorld greeting:string
```

##### 6) You can also generate your component in a subdirectory:
```
$ rails g react:component my_subdirectory/HelloWorld greeting:string
```
Note: Your component is added to `app/javascript/components/` by default.

Note: If you generated into a subdirectory you will append the directory path to your erb component call.

Example: 
```
<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
```

##### 7) [Render it in a Rails view](#view-helper):

```erb
<!-- erb: paste this in view -->
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
```

##### 8) Lets Start the app:
```
$ rails s
```
output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.

### Component name

The component name tells `react-rails` where to load the component. For example:

`react_component` call | component `require`
-----|-----
`react_component("Item")` | `require("Item")`
`react_component("items/index")` | `require("items/index")`
`react_component("items.Index")` | `require("items").Index`
`react_component("items.Index.Header")` | `require("items").Index.Header`
{'fraction_non_alphanumeric': 0.16091634205156743, 'fraction_numerical': 0.006306807642366908, 'mean_word_length': 4.876294277929155, 'pattern_counts': {'":': 0, '<': 22, '<?xml version=': 0, '>': 18, 'https://': 22, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1475276', 'n_tokens_mistral': 3702, 'n_tokens_neox': 3364, 'n_words': 899}