React - Js Ebook Download - React Js Cookbook PDF
React - Js Ebook Download - React Js Cookbook PDF
React - Js Ebook Download - React Js Cookbook PDF
Visualpath.in Page 1
ReactJs
What is React js :
React is a JavaScript library for building user interfaces. It is
maintained by Facebook, Instagram and a community of individual
developers and corporations.
A Simple Component
React components implement a render()method that takes
input data and returns what to display. This example uses an
XML-like syntax called JSX. Input data that is passed into the
component can be accessed by render() via this.props.
JSX is optional and not required to use React. Try
the Babel REPL to see the raw JavaScript code produced by
the JSX compilation step.
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);
Visualpath.in Page 2
ReactJs
A Stateful Component
In addition to taking input data (accessed via this.props), a
component can maintain internal state data (accessed
via this.state). When a component’s state data changes,
the rendered markup will be updated by re-
invoking render().
tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
Visualpath.in Page 3
ReactJs
An Application
Using props and state, we can put together a small Todo
application. This example uses state to track the current list
of items as well as the text that the user has entered.
Although event handlers appear to be rendered inline, they
will be collected and implemented using event delegation.
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Visualpath.in Page 4
ReactJs
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (!this.state.text.length) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(prevState => ({
items: prevState.items.concat(newItem),
text: ''
}));
}
}
Visualpath.in Page 5
ReactJs
</ul>
);
}
}
handleChange(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
const md = new Remarkable();
return { __html: md.render(this.state.value) };
}
Visualpath.in Page 6
ReactJs
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">
Enter some markdown
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
Visualpath.in Page 7
ReactJs
:9704455959
Address:-
Flatno:205,2ndFloor,
NILGIRIBlock,AdityaEnclave,
Ameerpet, Hyderabad-16
PhNo:+91-9704455959,9618245689
E-Mail ID : [email protected]
Visualpath.in Page 8