Develop Reference

difference between rfc and rfce in Reactjs

I am new in Reactjs and I want to know what is the difference between "react functional component"
and "react functional component export"?
Here is react functional component code
import React from 'react'
export default function Test() {
return (
<div>Test</div>
)
}
Here is "react functional component export"
import React from 'react'
function Test() {
return (
<div>Test</div>
)
}
export default Test

I want to add more context to your question: I suppose your question comes from the different snippets rfc and rfce of ES7+ React/Redux/React-Native snippets extension in VScode.
Two both cases do the same thing. The differences are the syntax of export. It's not particular to ReactJS but about JavaScript.
1st case: you use export directly before the declaration function line.
2nd case: you declare a function first and later use export with the function's name at the bottom of your code.
I'm used to using 2nd case.
You can read more about export syntax variant + named export vs. default export in this link

You mean the difference between Functional Components And Class Components?
The functions you have shared are the same, both are React Functional Component
React Class Components: is a class component requires you to extend from React Component and create a render function which returns a React element.
example:
import React from 'react'
export default class Test extends React.Component {
render () {
console.log(this.props)
return <div>Test</div>
}
}
React Functional Components: is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX)
example:
import React from 'react'
export default function Test(props) {
console.log(props)
return (
<div>Test</div>
)
}

Returning Code from a TypeScript Module in React

I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
This is fine.
But, in the ./Guide/Guide.tsx, I have:
import React, { Component } from "react";
import Menu from "./Menu/Menu";
export default class Guide extends Component {
constructor(props: {}) {
super(props);
}
return (
<Menu />
);
}
Menu.tsx:
import React, { Component } from "react";
export default class Menu extends Component {
return (
<h1>Test</h1>
);
};
However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..
What's going on here?
You can probably tell I'm very new to React and TypeScript!

In class component (such as your Guide and Menu components), you render some HTML code inside the render function. Insinde functional components (such as your App component), you render some HTML code inside the return function. Here you are mixing those 2 different syntax, that is why you are getting this error.
In order to fix this, simply replace your return function in the Menu and Guide components by the render function

having access to a parent state from component's props.children:

I am making a container for a d3 line graph that I'm going to create, my format so far is this:
import React from "react";
import AnalyticPads from "../AnalyticPad/AnalyticPad";
import Pad from "../AnalyticPad/Pad";
import MainContent from "../AnalyticPad/MainContent";
import Extention from "../AnalyticPad/Extention";
const GraphPad = () => {
return (
<AnalyticPads properties={{height: "200px"}}>
<Pad>
<MainContent>
</MainContent>
<Extention>
</Extention>
</Pad>
</AnalyticPads>
)
}
export default GraphPad;
And my "AnalyticsPad" looks like this:
import React from "react";
const AnalyticPads = (props) => {
return (
<div className="analytic-pad-container">
{props.children}
</div>
)
}
export default AnalyticPads;
What I want is that there will be a grid of "Pads" and I want this "AnalyticsPad" to provide default styles for each pad, for example if I want each pad to have a height of 200px I set it in this wrapper and then for any individual pad that I want to differ from the default I can overide it.
The "MainContent" component is where the line graph will be and any extra information will be put inside the "Extention" which will render if a button is pressed.
Throughout my react app I keep using the context api to provide the data to the children components, but I know ( or think ) it is bad practice to do this, from what I understand context should only be used for providing data to global components.
What is best practice?
please don't answer with a solution for class components as I have never used them before as I am new to react.

Best practices to design some specific react components, like notification

There are three way people to use components like notification/toast in React:
In React docs, there are a modal example which is similar with notification like this:
class Modal extends React.Component {
...
}
class App extends React.Component {
...
render() {
return (
<div>
{this.state.isOpen ? <Modal>...</Modal> : null}
</div>
)
}
}
In Material-UI, like this:
import React from 'react';
import Snackbar from 'material-ui/Snackbar';
import RaisedButton from 'material-ui/RaisedButton';
export default class SnackbarExampleSimple extends React.Component {
...
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
<div>
<Snackbar
open={this.state.open}
message="Event added to your calendar"
autoHideDuration={4000}
onRequestClose={this.handleRequestClose}
/>
</div>
);
}
}
And in Ant Design:
import { message, Button } from 'antd';
const info = () => {
message.info('This is a normal message');
};
ReactDOM.render(
<Button type="primary" onClick={info}>Display normal message</Button>
, mountNode);
Clearly, the third way is the easiest way for user to use, so why React docs and Material-UI implement this type of components like that? Is it easier to implement or maybe just more "React" way? Or other reasons?

Your question is a subjective one and also your 3 examples are all a little bit different. From my experience (developing in React and Material-UI for about 1 year), the biggest gains that you get from your vanilla React and Material-UI examples is reusability and composability.
In the first example, you can take that Modal class that you defined and, if it is exported, you can reuse it anywhere in your application and just pass it down different dynamic props to change its content or appearance.
In the second example with Material UI it is the same thing except you are provided the component and a set of predefined properties to act on it.
I have not used Ant Design personally but it looks like the example you gave is not doing anything different, but merely showing/explaining its rendering in the top-most location of your React application. Both of your other 2 examples (Modal component and the Snackbar component) could be rendered on the ReactDOM.render() level as well, it's just that those docs have chosen to put them in a more realistic position deeper in a theoretical application.
Hope this helps!

parentheses around import ES6

I'm learning React Native, just curious about the parentheses in the first line of import
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Why wrap Component with {} but not React?

React is the default export (there can only be one of these per module). Default exports can be imported like this:
import React from "react";
Component is a named export (there can be many of these). Named exports are imported like this:
import { Component } from "react";
What you're seeing is both of these things imported on the same line.
default exports aren't automatically available everywhere, so they still need importing.
Note that the reason React needs importing at all is because of the way that JSX is transformed into JS - React needs to be available so <Text> can be transformed into React.createElement(Text, ....

I think it's just a matter of shorting the next invocations, since Component is a subclass of React, so that way you use React as default with all it has in it. and Component as a single class you'd use. By the way you use braces in import when you want something specific as a method or class, that is named export. There's a better explanation in here.
Having both named exports and a default export in a module
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}