Skip to content

Commit 1f68a97

Browse files
authored
Merge pull request reactjs#856 from kalcifer/use-fragments-instead-of-divs
🔥 use Fragments instead of Divs
2 parents 24d8885 + 38cf9ec commit 1f68a97

File tree

11 files changed

+784
-756
lines changed

11 files changed

+784
-756
lines changed

lib/assets/react-source/development/react-server.js

Lines changed: 171 additions & 136 deletions
Large diffs are not rendered by default.

lib/assets/react-source/development/react.js

Lines changed: 589 additions & 576 deletions
Large diffs are not rendered by default.

lib/assets/react-source/production/react-server.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

lib/assets/react-source/production/react.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

lib/generators/templates/component.es6.jsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
<%= file_header %>class <%= component_name %> extends React.Component {
22
render () {
3-
<% if attributes.size > 0 -%>
43
return (
5-
<div>
4+
<React.Fragment>
65
<% attributes.each do |attribute| -%>
7-
<div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
6+
<%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
87
<% end -%>
9-
</div>
8+
</React.Fragment>
109
);
11-
<% else -%>
12-
return <div />;
13-
<% end -%>
1410
}
1511
}
1612

lib/generators/templates/component.js.jsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,13 @@
88
<% end -%>
99

1010
render: function() {
11-
<% if attributes.size > 0 -%>
1211
return (
13-
<div>
12+
<React.Fragment>
1413
<% attributes.each do |attribute| -%>
15-
<div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
14+
<%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
1615
<% end -%>
17-
</div>
16+
</React.Fragment>
1817
);
19-
<% else -%>
20-
return <div />;
21-
<% end -%>
2218
}
2319
});
2420
<%= file_footer %>

lib/generators/templates/component.js.jsx.coffee

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,9 @@
77

88
<% end -%>
99
render: ->
10-
<% if attributes.size > 0 -%>
11-
`<div>
10+
`<React.Fragment>
1211
<% attributes.each do |attribute| -%>
13-
<div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}</div>
14-
<% end -%>
15-
</div>`
16-
<% else -%>
17-
`<div />`
12+
<%= attribute[:name].titleize %>: {this.props.<%= attribute[:name].camelize(:lower) %>}
1813
<% end -%>
14+
</React.Fragment>`
1915
<%= file_footer %>

test/generators/coffee_component_generator_test.rb

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,9 @@ def class_name
4040
end
4141

4242
test 'that it generates working jsx' do
43-
expected_name_div = /\.createElement\(\s*"div",\s*null,\s*"Name:\s*",\s*this\.props\.name\s*\)/x
44-
expected_shape_div = /\.createElement\(\s*"div",\s*null,\s*"Address:\s*",\s*this\.props\.address\s*\)/x
45-
4643
run_generator %w(GeneratedComponent name:string address:shape --coffee)
4744
jsx = React::JSX.transform(CoffeeScript.compile(File.read(File.join(destination_root, filename))))
4845

49-
assert_match(Regexp.new(expected_name_div), jsx)
50-
assert_match(Regexp.new(expected_shape_div), jsx)
46+
assert_match(Regexp.new(expected_working_jsx), jsx)
5147
end
5248
end

test/generators/component_generator_test.rb

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,9 @@ def filename
5858
end
5959

6060
test 'generates working jsx' do
61-
expected_name_div = /\.createElement\(\s*"div",\s*null,\s*\"Name:\s*\",\s*this\.props\.name\s*\)/x
62-
expected_shape_div = /\.createElement\(\s*"div",\s*null,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
63-
6461
run_generator %w(GeneratedComponent name:string address:shape)
6562
jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
6663

67-
assert_match(Regexp.new(expected_name_div), jsx)
68-
assert_match(Regexp.new(expected_shape_div), jsx)
64+
assert_match(Regexp.new(expected_working_jsx), jsx)
6965
end
7066
end

test/generators/es6_component_generator_test.rb

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,9 @@ def class_name
3434
end
3535

3636
test 'generates working jsx' do
37-
expected_name_div = /\.createElement\(\s*"div",\s*null,\s*\"Name:\s*\",\s*this\.props\.name\s*\)/x
38-
expected_shape_div = /\.createElement\(\s*"div",\s*null,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
39-
4037
run_generator %w(GeneratedComponent name:string address:shape --es6)
4138
jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
4239

43-
assert_match(Regexp.new(expected_name_div), jsx)
44-
assert_match(Regexp.new(expected_shape_div), jsx)
40+
assert_match(Regexp.new(expected_working_jsx), jsx)
4541
end
4642
end

0 commit comments

Comments
 (0)