Introduction to ReactJS

Introduction to ReactJS

• 1.
  Introduction to ReactJS AkshayRana (Software Consultant, Knoldus Software LLP)
• 2.
  React Js ● Reactis 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 npminstall -g create-react-app create-react-app my-app cd my-app npm start
• 4.
  Introducing JSX ● constelement = <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> constelement = <h1>Hello, world</h1>; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
• 6.
  React Component ● ReactComponents 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 betweenComponents 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 betweenComponents 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() ThecomponentDidMount() 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 eventsare 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.