Content deleted Content added
m Reverted 1 edit by 14.140.240.82 (talk) to last revision by Webdesignermall. |
→Hello World: This code is incomplete. I am including an explanation of ReactJS states. |
||
Line 57:
==Notable features==
===One-way data flow with props===
Properties (commonly, ''props'') are passed to a component from the parent component. Components receive props as a single set of immutable values<ref>{{cite web|url=https://reactjs.org/docs/components-and-props.html#props-are-read-only|website=React|title=Components and Props|publisher=Facebook|accessdate=7 April 2018}}</ref> (a JavaScript object). Whenever any prop value changes, the component's render function is called allowing the component to display the change.
=== Two-way data flow with states ===
States hold values throughout the component and can be passed to child components through props:<syntaxhighlight line="1" start="1">
this.state = {
color:'red'
}
render() {
return (
<child_component childColor={this.state.color} />
)
}
</syntaxhighlight>
===Virtual DOM===
Line 186 ⟶ 199:
A [["Hello,_World!"_program| Hello, World]] program in React Native looks like this:
<syntaxhighlight lang="js" line="1">
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
Line 200 ⟶ 213:
// skip this line if using Create React Native App
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
The ReactJS code can also be imported into another component with the following code:
import HelloWorldApp from './HelloWorldApp';
</syntaxhighlight>
| |||