Introduction to ReactJS

React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.

1. Introduction to ReactJS
Akshay Rana
(Software Consultant,
Knoldus Software LLP)

2. React Js
●React is a declarative, component-based JS library to build single page
applications.
●React is flexible and can be used in a variety of projects. You can create new
apps with it, but you can also gradually introduce it into an existing codebase
without doing a rewrite.

3. First React Application
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

4. Introducing JSX
●const element = <h1>Hello, world!</h1>;
●This funny tag syntax is neither a string nor HTML.It is called JSX
●JSX may remind you of a template language, but it comes with the full power
of JavaScript.
●You can embed any JavaScript expression in JSX by wrapping it in curly
braces.
const element = <h1>Hello, {getName()}</h1>;
●JSX just provides syntactic sugar for the React.createElement(element,
props, ...children) function.

5. Rendering Elements
<div id="root"></div>
const element = <h1>Hello, world</h1>;
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

6. React Component
●React Components let you split the UI into independent, reusable pieces,
and think about each piece in isolation.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
●This function is a valid React component because it accepts a single "props"
object argument with data and returns a React element.
●We call such components "functional" because they are literally JavaScript
functions.

7. React Component
ES6 :
●In ES 6 we have a render method that returns the JSX element for that
component.
class Welcome extends Component {
render() {
return <h1>Hello World</h1>;
}
}

8. Data handling between Components
Props :
Props are injected in all components. We use props to transfer data between two
components.
Two rules that you need to remember :
●Props are Read-Only : Whether you declare a component as a function or a
class, it must never modify its own props.
●All React components must act like pure functions with respect to their props.

9. Data handling between Components
Props :
Props are injected in all components. We use props to transfer data between two
components.
Two rules that you need to remember :
●Props are Read-Only : Whether you declare a component as a function or a
class, it must never modify its own props.
●All React components must act like pure functions with respect to their props.

10. Lifecycle Hooks
●componentDidMount()
The componentDidMount() hook runs after the component output has been
rendered to the DOM
●componentWillUnmount()
The componentWillUnmount() hook runs when the component is removed
from the DOM.

11. Events
●React events are named using camelCase, rather than lowercase.
●With JSX you pass a function as the event handler, rather than a string.
●Eg :
<button onClick={activateLasers}>
Activate Lasers
</button>

12. Demo

13. References
●https://reactjs.org/

14. Thank you.