Scribd
Upload
59 views7 pages

Important Methods

The render() method is the only required method in a class component and it returns React elements, arrays, fragments, strings, numbers, booleans, or null based on examining this.props and this.state; it should be pure and not modify state or interact with the browser. The render() method returns one of several types including React elements created with JSX, arrays and fragments to return multiple elements, and portals to render children into a different DOM subtree.

Uploaded by

Shruti Nasre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
59 views7 pages

Important Methods

The render() method is the only required method in a class component and it returns React elements, arrays, fragments, strings, numbers, booleans, or null based on examining this.props and this.state; it should be pure and not modify state or interact with the browser. The render() method returns one of several types including React elements created with JSX, arrays and fragments to return multiple elements, and portals to render children into a different DOM subtree.

Uploaded by

Shruti Nasre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

render() Method

The render() method is the only required method in a class component. It examines this.props and this.state .
It returns one of the following types:
React elements – These are created via JSX(Not required).
For example, <div /> and <App /> are React elements that instruct React to render a DOM node, or another
user-defined component, respectively.
Arrays and fragments - It is used to return multiple elements from render.
Portals – It is used to render children into a different DOM subtree.
String and numbers - These are rendered as text nodes in the DOM.
Booleans or null - It renders nothing. (Mostly exists to support return test && <Child /> pattern, where test is
boolean.)

Note - The render() function should be pure, meaning that it does not modify component state, it returns the
same result each time it’s invoked, and it does not directly interact with the browser.
React Element
You can create a react element using React.createElement() method but there is a easy
way to create element via JSX.

Using createElement() Method


React.createElement(“h1”, null, “Hello GeekyShows”);

Using JSX
<h1>Hello GeekyShows</h1>
React.createElement(type, props, children)
React.createElement(type, props, children) - It creates a React Element with the given
arguments.
Syntax:- React.createElement(type, props, children)
• type: Type of the html element or component. (example : h1,h2,p,button..etc ).
• props: The properties object.
Example: {style :{ color:“blue”}} or className or event handlers etc.
• children: anything you need to pass between the dom elements.
Ex:-
React.createElement(‘h1’, null, ‘Hello GeekyShows’);
React Fragment
Fragment is used to group a list of children without adding extra nodes to the DOM.
Syntax:-
Syntax:- Syntax:-
<React.Fragment> <React.Fragment key={id}>
<>
</React.Fragment> </> </React.Fragment>

Ex:- Ex:- Ex:-


<React.Fragment> <> <React.Fragment key={item.id}>
<h1>Hello</h1> <h1>{item.title}</h1>
<h1>Hello</h1>
<h2>GeekyShows</h2> <p>{item.description}</p>
<h2>GeekyShows</h2> </React.Fragment>
</>
</React.Fragment>
ReactDOM.render(element, DOMnode)
ReactDOM.render(element, DOMnode) - It takes a React Element and render
it to a DOM node.
Syntax:- ReactDOM.render(element, DOMnode)
• The first argument is which component or element needs to render in the
dom.
• The second argument is where to render in the dom.
Ex:-
ReactDOM.render(< App />, document.getElementById(“root”));
Webpack parses through the application starting at src/index.js, following any imported
modules, until it has a complete dependency graph.

In order to convert the ES2015+ code that Webpack comes across into a version of
JavaScript that will behave consistently across browsers, Webpack passes any
JavaScript files it comes across through Babel.

Babel is a transpiler which parses newer and experimental JavaScript syntax, and
transforms the code into a version of JavaScript which has better support across
browsers.

Files src/index.js and public/index.html, these files can be modified as necessary, but
the names and locations shouldn't be altered.
App.test.js is a simple unit test Create React App sets up to test if the App
component renders without crashing.

You might also like