ReactJS-intro

Some examples of JSX elements with the attributes

<a href="http://www.yahoo.com">Welcome to the Yahoo</a>; var title = <h1 id="title">Introduction to React.js: Part I</h1>;

Example of a JSX element:

<h1>Hello world</h1> This JSX element looks exactly like HTML! The only noticeable difference is t

JSX elements can have attributes, just like HTML elements can. Example:

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this: my-attribute-name="my-attribute-value"

The basic unit of JSX

A basic unit of JSX is called a JSX element.

Special DOM attributes (some of them)

A few special DOM attributes are class, for and style. Example how to use them: React.DOM.h1( { className: "pretty", htmlFor: "me", style: { background: "black", color: "white", fontFamily: "Verdana", } }, "Hello world!" ),

Class Components

Class Components differ from Functional Components because they allow React Components to have life cycle methods and state. Class components have two instance properties, this.state and this.props, that represent the component's state and properties respectively.

Component life Cycle Phases

Mounting Phase Methods Updating Phase Methods Unmounting Phase Methods

React Elements

React Elements are objects that represent a DOM node. They are written using a syntax extension named JSX which we will cover later in this module. React Elements are different than React Components, which we will also cover later in this module.

What React.js is?

React.js is a JavaScript library developed by engineers at Facebook.

What DOM elements will be updated by ReactDOM.render?

ReactDOM.render updates only DOM elements that have changed. That means that if you render the exact same thing twice in a row, the second render will do nothing

What ReactDOM.render's first and second arguments.

ReactDOM.render's first argument should be a JSX expression, and it will be rendered to the screen. The first argument is appended to whatever element is selected by the second argument. Ex: ReactDOM.render(<h1>Render me!</h1>, document.getElementById('container'));

Code that will render a JSX expression:

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

Adding an initial state to Class Components

The initial state of a Class Component can be declared within the constructor() method. The state of the component must be declared as an object with attributes. class Counter extends React.Component{ constructor(props){ super(props) this.state = {foo:123,bar:456} } render(){ return <div>foo:{this.state.foo} bar:{this.state.bar}</div> } }

Mounting Phase Methods

The mounting phase begins when an instance of a component is created and rendered into the DOM. The following lifecycle methods occur in the order they are listed: - constructor(props) - called when the component is first initialized. This method is only called once. - componentWillMount() - called when a component is about to mount. - render() - called when a component is rendered. - componentDidMount() - called when a component has finished mounting. This is where network requests are usually made.

Adding properties to Class Components

The properties of a Class Component can be accessed through the this.props attribute. This differs slightly from Functional Components where the properties were passed in as a variable. class Welcome extends React.Component{ render(){ return <h1>Message: {this.props.message}</h1> } } You can supply property values the same way as you supply attribute values: <Welcome message="Hello World!"/>

The render() method of a class component

The render() method of a class component is used to describe what kind of React Element is going to be returned from the Class Component. It the same as the return value of of a Functional Component. For example, the following Class Component will render<h1>Hello World!</h1>: <div id="root"></div> class Welcome extends React.Component{ render(){ return <h1>Hello World!</h1> } } //renders <h1>Hello World!</h1> ReactDOM.render( <Welcome/>, document.getElementById("root") )

Unmounting Phase Methods

The unmounting phase begins when a component is being removed from the DOM. The following life cycle method occurs during the unmounting phase: - componentWillUnmount() - called when a component has been unmounted. This is where any cleanups are made such as cancelling timers or network requests.

Updating Phase Methods

The updating phase begins when a component's properties or state changes. The following lifecycle methods occur in the order they are listed: - componentWillReceiveProps(nextProps) - called when a component has updated and is receiving new props. - shouldComponentUpdate(nextProps, nextState) - called after receiving props and is about to update. If this method returns false, componentWillUpdate(), render(), and componentDidUpdate() will not execute. - componentWillUpdate(nextProps, nextState) - called when a component is about to be updated. - render() - called when a component is rerendered. - componentDidUpdate(prevProps, prevState) - called when a component has finished updating.

Are JSX elements treated as JavaScript expressions?

Yes

How to updated the state of the component?

this.setState()

An example of a nested JSX expression being saved as a variable:

var theGoogle = ( <a href="https://www.google.net"> <h1> Click me I am Gooooooooooogle </h1> </a> ); *If a JSX expression takes up more than one line, then you should wrap the multi-line JSX expression in parentheses.

How many outermost elements JSX should have?

1. (JSX expression must have exactly one outermost element.)

Reasons to choose to program on React

1. React is fast. Apps made in React can handle complex updates and still feel quick and responsive. 2. React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems. 3. React is scalable. Large programs that display a lot of changing data are where React performs best. 4. React is flexible. You can use React for interesting projects that have nothing to do with making a web app.

There are two types of React Components

Functional Components and Class Components. Class Components have state, lifecycle methods, and properties while Functional Components only have properties.

What JSX is?

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

Can Browsers read JSX?

JSX is not valid JavaScript. Web browsers can't read it! If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

How to make a custom component?

The API to create a new component: var Component = React.createClass({ render: function() { return React.DOM.span(null, "I'm so custom"); } }); ReactDOM.render( React.createElement(Component), document.getElementById("app") );

Constructor(props)

The constructor() method is called before a React Component is mounted and is used to set up the initial state of the component. It is important to call super(props) at the beginning of the constructor() method or else the this.props attribute may not work correctly. The first argument to the constructor() method represents the properties that are passed into the component. class Counter extends React.Component{ constructor(props){ super(props) } render(){ return <div>Hello World!</div> } }

React Component written using ES6 classes:

class Welcome extends React.Component{ render(){ return <h1>Hello World!</h1> } } This is the same as the following Functional Component: function Welcome(){ return <h1>Hello World!</h1> }