These two are equivalent
Using const syntax for javascript
const logHelloWorld = () => {
console.log("Hello World");
}
Using function syntax for javascript
function logHelloWorld() {
console.log("Hello World");
}
These two are equivalent
Using const syntax for JSX
const App = () => {
return (
<View>
<Text>This is an app</Text>
</View>
);
}
Using function syntax for JSX
function App() {
return (
<View>
<Text>This is an app</Text>
</View>
);
}
These two are equivalent
Closing tag for components that do not encapsulate anything
function App() {
return (
<Button title="Press Me"></Button>
);
}
Self-closing tag for components that do not encapsulate anything
function App() {
return (
<Button title="Press Me" />
);
}
These three are equivalent
Nesting components together
const MainComponent = () => {
return (
<View>
<View>
<Text>Subcomponent one</Text>
</View>
<View>
<Text>Subcomponent two</Text>
</View>
</View>
);
}
Extracting the components into their own components within the same page
const MainComponent = () => {
return (
<View>
<SubComponentOne />
<SubComponentTwo />
</View>
);
}
const SubComponentOne = () => {
return (
<View>
<Text>Subcomponent one</Text>
</View>
);
}
const SubComponentTwo = () => {
return (
<View>
<Text>Subcomponent two</Text>
</View>
);
}
Extracting the components into their own components into other files, export them and importing them for use
// index.jsx
import SubComponentOne from "./component-one.jsx"
import SubComponentTwo from "./component-two.jsx"
const MainComponent = () => {
return (
<View>
<SubComponentOne />
<SubComponentTwo />
</View>
);
}
// component-one.jsx
const SubComponentOne = () => {
return (
<View>
<Text>Subcomponent one</Text>
</View>
);
}
export default SubComponentOne;
// component-two.jsx
const SubComponentTwo = () => {
return (
<View>
<Text>Subcomponent two</Text>
</View>
);
}
export default SubComponentTwo;
Last updated