<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css';

const App = () => {
  const actors = ['George', 'Peter', 'Steven', 'Dave'];
  return (
    <div className="App">
      <p className="App-intro">
        Des gens sympas
      </p>
      <ul>
        {actors.map(
          (actor, index) => <li key={index}>{actor}</li>
        )}
      </ul>
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

// pass actors as props to <App /><commit_msg>Finished introduction<commit_after>import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css';

const Actor = ({name}) => (
  <li>Acteur : {name}</li>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      actors: ['George', 'Peter', 'Steven', 'Dave'],
    };
  }

  render() {
    const addHugues = () => {
      this.setState({
        actors: this.state.actors.concat('Hugues'),
      });
    };

    const favouriteActors = this.state.actors.filter(name => name === 'Peter' || name === 'Steven');

    return (
      <div className="App">
        <p className="App-intro">
          Des gens sympas
        </p>
        <ul>
          {this.state.actors.map(
            (actor, index) => <Actor key={index} name={actor} />
          )}
        </ul>
        <button
          onClick={addHugues}
        >
          Ajouter Hugues
        </button>
        <div>Mais mes préférés sont :</div>
        <ul>
          {favouriteActors.map((actor, index) => <Actor key={index} name={actor} />)}
        </ul>
      </div>
    );
  }
}
renderPage();

function renderPage() {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}

// pass actors as props to <App />
// add button to addHugues, that modifies actors and rerenderPage
// show chrome inspector to show what is actually added/removed from the dom
// Use class for App and use setState instead of triggering a full rerender
// Add a simple component ~ reusable template
{'fraction_non_alphanumeric': 0.16610978520286396, 'fraction_numerical': 0.0, 'mean_word_length': 2.342902711323764, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '6761152', 'n_tokens_mistral': 682, 'n_tokens_neox': 652, 'n_words': 177}