<commit_before># ES6 React Guide

This chapter guides you through important React concepts and ES6 features
for speeding up your React learning and development journey.

Let us revisit the Hello World code we wrote in the **Setup React Webpack** chapter, to understand
the React and ES6 features used so far.

## File and folder structure

React apps follow component based development. So understanding how components are organized,
how they relate to each other, simplifies several aspects of React. This includes how
React app folders and files are organized.

**Component Hierarchy.** React has parent components which import other child components.
This parent-child relationship continues across all components building a tree-like hierarchy.

In case of our Hello World example, ```index.js``` represents
the root parent component (one that does not have a parent).
The root component renders ```World``` component.
The ```World``` component is parent to ```Hello``` child component.

Root component inside a folder is named ```index.jsx```. Components other than root are
named same as the component class names, including camel case.

{title="Hello World files and folders", lang=text}
~~~~~~~
- /app
-- index.jsx
-- style.css
-- /components
--- Hello.jsx
--- World.jsx
- /build
- /node_modules
- .babelrc
- package.json
- webpack.config.js
~~~~~~~

## Component definition, export, and import

In React each component is typically defined in a single file. Any dependencies are
imported using ```import``` statement. The statement specifies name of the exported
component, constant, or function from the dependencies.

Dependencies are then used within a component by ```extend``` keyword to indicate
object-oriented inheritance. Dependencies are also used as child components
within a parent. Like in our case ```Hello``` child component is imported
by ```World``` parent component before it is rendered.

Similarly a module (file holding the component) exports a component
using ```export default``` keywords.

{title="Component definition, export, and import", lang=javascript}
~~~~~~~
import React from 'react';
import Hello from './Hello.jsx';

export default class World extends React.Component {
~~~~~~~

The constructor of our ```World``` component highlights three most important
features of how components talk to each other and the user.

**State.** Changing UI or internal state of a component is maintained using ```this.state```
object.

**Props.** Properties are the mechanism to pass data from parent to child components.

**Events.** Methods are bound to UI events (like onClick) to perform actions when the
event takes place.

{title="Constructor, state, props, event binding", lang=javascript}
~~~~~~~
constructor(props) {
  super(props);
  this.state = {greet: props.greet};
  this.slangGreet = this.slangGreet.bind(this);
  this.hindiGreet = this.hindiGreet.bind(this);
}
~~~~~~~


## Recommended reading list

- Get started with Facebook's perspective on using [ES6 in reusable components][1]. You can compare with ES5 style components within the same article.
- Review [Airbnb React/JSX Style Guide][2] for recommendations on using ES6 vs ES5 style.<commit_msg>c02 update World code walkthru<commit_after># ES6 React Guide

This chapter guides you through important React concepts and ES6 features
for speeding up your React learning and development journey.

Let us revisit the Hello World code we wrote in the **Setup React Webpack** chapter, to understand
the React and ES6 features used so far.

## File and folder structure

React apps follow component based development. So understanding how components are organized,
how they relate to each other, simplifies several aspects of React. This includes how
React app folders and files are organized.

**Component Hierarchy.** React has parent components which import other child components.
This parent-child relationship continues across all components building a tree-like hierarchy.

**Root Component.** In case of our Hello World example, ```index.js``` represents
the root parent component (one that does not have a parent).
The root component renders ```World``` component.
The ```World``` component is parent to ```Hello``` child component.

**Component File Naming.** Root component inside a folder is named ```index.jsx```.
Components other than root are named same as the component class names, including camel case.

{title="Hello World files and folders", lang=text}
~~~~~~~
- /app
-- index.jsx
-- style.css
-- /components
--- Hello.jsx
--- World.jsx
- /build
- /node_modules
- .babelrc
- package.json
- webpack.config.js
~~~~~~~

## Component definition, export, and import

In React each component is typically defined in a single file. Any dependencies are
imported using ```import``` statement. The statement specifies name of the exported
component, constant, or function from the dependencies.

Dependencies are then used within a component by ```extend``` keyword to indicate
object-oriented inheritance. Dependencies are also used as child components
within a parent. Like in our case ```Hello``` child component is imported
by ```World``` parent component before it is rendered.

Similarly a module (file holding the component) exports a component
using ```export default``` keywords.

{title="Component definition, export, and import", lang=javascript}
~~~~~~~
import React from 'react';
import Hello from './Hello.jsx';

export default class World extends React.Component {
~~~~~~~

## Constructor, State, Props, and Events

The constructor of our ```World``` component highlights three most important
features of how components talk to each other and the user.

**State.** Changing UI or internal state of a component is maintained using ```this.state```
JSON object.

**Props.** Properties are the mechanism to pass data from parent to child components.

**Events.** Functions are bound to UI events (like onClick) to perform actions when the
event takes place.

Constructor is called when component is created, so it is the right place for following three objectives.

1. Setting initial state. Using ```this.state``` JSON object.
2. Binding events. Using ```bind(this)``` method.
3. Passing props up within the inheritance tree. Using ```super(props)``` keyword.

{title="Constructor, state, props, event binding", lang=javascript}
~~~~~~~
constructor(props) {
  super(props);
  this.state = {greet: props.greet};
  this.slangGreet = this.slangGreet.bind(this);
  this.hindiGreet = this.hindiGreet.bind(this);
}
~~~~~~~

Here is a simple cheatsheet to remember these important concepts.

**Properties:** Propagate from Root/Patent component to Child. Parent defines a property=value which is used within Child component. Parent child relationship can exist without property passing, as in parent rendering a child component.

**Event functions:** Bind, define, UI association within event generating component. Components can exist with no events defined.

**State:** Defined within component whose state changes. Can represent internal (logic driven) or external (UI driven) state. Components can be stateless.

## Recommended reading list

- Get started with Facebook's perspective on using [ES6 in reusable components][1]. You can compare with ES5 style components within the same article.
- Review [Airbnb React/JSX Style Guide][2] for recommendations on using ES6 vs ES5 style.
{'fraction_non_alphanumeric': 0.09276538201487491, 'fraction_numerical': 0.003110209601081812, 'mean_word_length': 4.823622047244094, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4648611', 'n_tokens_mistral': 1840, 'n_tokens_neox': 1789, 'n_words': 962}