hello world

-----------------------------
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

App.js
import React, { Component } from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

export default class App extends React.Component {

render() {
return (
<div>
<p>Bonjour!</p>
</div>
)
}
}

------------------------------

Using Prop in ReactJS

------------------------------
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import HouseFull from './HouseFull';
import registerServiceWorker from './registerServiceWorker';

// code goes here

ReactDOM.render(
<HouseFull hasSeat={false}/>,
document.getElementById('root')
);
registerServiceWorker();

housefull.js
import React, { Component } from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

This study source was downloaded by 100000830536393 from CourseHero.com on 03-05-2022 20:27:26 GMT -06:00

https://www.coursehero.com/file/49730397/All-handsonpdf/
 export class HouseFull extends React.Component {

render(){
var text;
if (this.props.hasSeat) {
text = 'Vacant';
} else {
text = 'HouseFull';
}
return (
<div>{text}</div>
);

}
export default HouseFull;
------------------------------

Using Events in ReactJS

------------------------------
App.js
import React, { Component } from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

class App extends Component {

constructor() {
super();
this.state = { count: 0 };
}

handleClick(){
this.setState(
{ count: this.state.count+1 });
console.log(this.state.count)

render() {
return (
<div>
<p>Clicks: { this.state.count }</p>
<button onClick={ () => this.handleClick() }>
click me
</button>
</div>
);
}
}
export default App;

This study source was downloaded by 100000830536393 from CourseHero.com on 03-05-2022 20:27:26 GMT -06:00

https://www.coursehero.com/file/49730397/All-handsonpdf/
 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

------------------------------

Life Cycle Eents In reactJs

------------------------------
App.js
import React, { Component } from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

class App extends Component {

constructor() {
super();
this.state = { count: 0 };
}
handleClick(){
this.setState(
{ count: this.state.count+1 });
console.log(this.state.count)

componentWillMount() {
console.log('Component WILL MOUNT!')
}
componentDidMount() {
console.log('Component DID MOUNT!')
}
componentDidUpdate() {
console.log('Component WILL UPDATE!');
}

componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}

render() {

This study source was downloaded by 100000830536393 from CourseHero.com on 03-05-2022 20:27:26 GMT -06:00

https://www.coursehero.com/file/49730397/All-handsonpdf/
 return (
<div>
<p>Clicks: { this.state.count }</p>
<button onClick={ () => this.handleClick() }>
click me
</button>
</div>
);
}
}
export default App;

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();
------------------------------

This study source was downloaded by 100000830536393 from CourseHero.com on 03-05-2022 20:27:26 GMT -06:00

https://www.coursehero.com/file/49730397/All-handsonpdf/
Powered by TCPDF (www.tcpdf.org)