Intro to React.js
-
Upload
smita-prasad -
Category
Software
-
view
241 -
download
0
Transcript of Intro to React.js
![Page 1: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/1.jpg)
REACT.JSSmita Prasad
![Page 2: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/2.jpg)
Intro• Big, fast Web apps with JavaScript can be easily built with
React. • It has scaled very well for Facebook and Instagram.• One of the many great parts of React is how it makes you
think about apps as you build them.
![Page 3: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/3.jpg)
Hello World (In JSX Syntax)var HelloWorld = React.createClass({
render: function() { return (
<h1> Hello world </h1>
); }
}); React.render(<HelloWorld />, document.body);
![Page 4: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/4.jpg)
Hello World in Javascriptvar HelloWorld = React.createClass({ displayName: "HelloWorld", render: function() {
return React.createElement("h1", null, "Hello World"); } }); React.render( React.createElement(HelloWorld, null), document.body);
![Page 5: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/5.jpg)
React Element• An element is a plain object describing what you want to appear on the screen in
terms of the DOM nodes or other components.
• Elements can contain other elements in their props.
• Creating a React element is cheap. Once an element is created, it is never mutated.
• The primary type in React is the ReactElement.
• It has four properties: type, props, key and ref. It has no methods and nothing on the prototype.
• You can create one of these objects through React.createElement.
• var root = React.createElement('div');
![Page 6: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/6.jpg)
Factories
• A React Element-factory is simply a function that generates a React Element with a particular type property.
• • React has a built-in helper for you to create factories.
• It allows you to create a convenient short-hand instead of typing out React.createElement('div') all the time.
var div = React.createFactory('div'); var root = div({ className: 'my-div' }); ReactDOM.render(root, document.getElementById('example'));
![Page 7: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/7.jpg)
• React already has built-in factories for common HTML tags:
var root = React.DOM.ul({ className: 'my-list' }, React.DOM.li(null, 'Text Content') );
![Page 8: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/8.jpg)
React Nodes
• A ReactNode can be either:• ReactElement• string (aka ReactText)• number (aka ReactText)• Array of ReactNodes (aka ReactFragment)
• These are used as properties of other ReactElements to represent children.
• Effectively they create a tree of ReactElements.
![Page 9: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/9.jpg)
React Components• A component can be declared in several different ways. It can be a
class with a render() method. Alternatively, in simple cases, it can be defined as a function.
• var MyComponent = React.createClass({ render: function() { ... } });
• When this constructor is invoked it is expected to return an object with at least a render method on it. This object is referred to as a ReactComponent.
• Every time the state change the component render itself.
• Usage—var element = React.createElement(MyComponent); OR using JSX:var element = <MyComponent />;
![Page 10: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/10.jpg)
State and Properties are taken as input in a component and html is sent out as output.
Components can only change there states and not their properties.
![Page 11: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/11.jpg)
Virtual DOM
• React code acts on a fake DOM (virtual dom) • React.js take care of keep virtual DOM and real DOM
synchronized • Every ReactElement is a light, stateless, immutable,
virtual representation of a DOM Element • A virtual DOM div element contains only 6 properties.
![Page 12: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/12.jpg)
Advantages• Easy to learn, easy to use • True reusable components (1 single file per component) • Functional approach • Human error messages • Active community
![Page 13: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/13.jpg)
Sample
![Page 14: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/14.jpg)
DOM Tree Structure
![Page 15: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/15.jpg)
Steps to build a React Page• Step 1: break the UI into a component hierarchy• Step 2: Build a static version in React• Step 3: Identify the minimal (but complete)
representation of UI state• Step 4: Identify where your state should live • Step 5: Add inverse data flow
![Page 16: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/16.jpg)
Samples• https://plnkr.co/users/sendmita
• https://github.com/sendmita/react-samples
![Page 17: Intro to React.js](https://reader036.fdocuments.us/reader036/viewer/2022062316/58ecfcca1a28abf40e8b4617/html5/thumbnails/17.jpg)
Thank You