Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka

5,426 views

Published on

This Edureka ReactJS Tutorial For Beginners will help you in understanding the fundamentals of ReactJS and help you in building a strong foundation in React framework. Below are the topics covered in this tutorial:

1. Why ReactJS?
2. What Is ReactJS?
3. Advantages Of ReactJS
4. ReactJS Installation and Program
5. ReactJS Fundamentals

Published in: Technology
  • We called it "operation mind control" - as we discovered a simple mind game that makes a girl become obsessed with you. (Aand it works even if you're not her type or she's already dating someone else) Here's how we figured it out... ■■■ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT, ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ◆◆◆ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka

  1. 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Agenda
  2. 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Why do we need ReactJS?
  3. 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS Remember the Facebook newsfeeds before 2009, when each time you had to refresh the page for new updates ??
  4. 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS Dispatcher Initial Data Real Time Data User Input Store ViewRefresh
  5. 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS ▪ Uses DOM (Document Object Model) ▪ More memory consumption ▪ Slow performance Drawbacks Of Traditional Data Flow DOM
  6. 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS ▪ Uses DOM (Document Object Model) ▪ More memory consumption ▪ Slow performance Drawbacks Of Traditional Data Flow DOM DOM DOM
  7. 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. React JS 1 2 43
  8. 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. React JS 101 2 43
  9. 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. React JS 1 2 43
  10. 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. React JS 2 43
  11. 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. React JS 101 2 43
  12. 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Facebook after implementation of ReactJS became more user friendly. Each time new stories are added, a New Stories notification appears. Clicking which will automatically refresh the news feeds section.
  13. 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Dispatcher Initial Data Real Time Data User Input Store View
  14. 14. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Dispatcher Initial Data Real Time Data User Input Store
  15. 15. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Dispatcher Initial Data Real Time Data User Input Store View
  16. 16. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Agenda ReactJS Fundamentals What Is ReactJS? Hello World Program ReactJS Installation Advantages Of ReactJS
  17. 17. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Now, let’s understand what is ReactJS.
  18. 18. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? ReactJS is an open source JavaScript library used to develop User Interfaces. ReactJS was introduced by Facebook on May, 2013. It was open sourced in March, 2015.
  19. 19. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? It is basically the View in MVC (Model-View-Controller) ReactJS is concerned with the components that utilizes the expressiveness of JavaScript with a HTML – like template syntax.
  20. 20. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Aspects Of ReactJS? Virtual DOM Data Binding Serverside Rendering Patch Virtual DOM Real DOM
  21. 21. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Aspects Of ReactJS? Virtual DOM Data Binding Serverside Rendering One Way Data Binding Action Dispatcher Store View Action
  22. 22. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Aspects Of ReactJS? Virtual DOM Data Binding Serverside Rendering
  23. 23. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of ReactJS Let’s find out the advantages of ReactJS.
  24. 24. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of ReactJS Application’s performance is increased Used on Client as well as Server Side Readability is improved Easily used with other frameworks
  25. 25. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Installation Let’s get started with ReactJS.
  26. 26. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Installation <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Add these <script> tags inside <head> tag of your HTML code.
  27. 27. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Hello World Program Let’s start coding with ReactJS.
  28. 28. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Hello World Program
  29. 29. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Hello World Program
  30. 30. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Hello World Program This is how the output will look like:
  31. 31. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Fundamentals Let’s find out about various concepts we just used in our code
  32. 32. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEventsStatesComponents RouterRefsLifecycleProps
  33. 33. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 2 6543 987 JSX KeysEventsStatesComponents RouterRefsLifecycleProps
  34. 34. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JSX ✓ JSX stands for JavaScript XML ✓ Makes HTML easy to understand ✓ It is Robust ✓ Boosts up the JS performance function intro(){ return <h1>Hello World!!</h1>; } JSX
  35. 35. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JSX Uses Embedding JavaScript Specifying Attributes JSX Nested Elements Regular JSX var MyComponent = React.createClass({ render : function () { return ( <div> Hello World!!! </div> ); });
  36. 36. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JSX Uses Embedding JavaScript Specifying Attributes JSX Nested Elements Regular JSX var MyComponent = React.createClass( { render : function () { return ( <div> <h1>Header</h1> <h2>Content</h2> <p>This is the content!!!</p> </div> ); } }); <h1>,<h2>,<p> nested inside <div>
  37. 37. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JSX Uses Embedding JavaScript Specifying Attributes JSX Nested Elements Regular JSX var styles={ backgroundcolor: ’cyan’}; var MyComponent=React.createClass({ render : function () { return ( <div style={styles}> <h1>Header</h1> </div> ); } }); Adding Attributes
  38. 38. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JSX Uses Embedding JavaScript Specifying Attributes JSX Nested Elements Regular JSX var MyComponent = React.createClass({ render: function () { return( <div> <h2> {2+4} </h2> </div> ); } }); JavaScript Expression
  39. 39. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEventsStates Components RouterRefsLifecycleProps
  40. 40. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components
  41. 41. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components Component 1
  42. 42. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components Component 2
  43. 43. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components Component 3
  44. 44. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Everything in ReactJS is component1 Each Component Return a DOM Object2 It splits the UI into independent reusable pieces3 Each independent piece is processed separately4 It can refer other components in output5 It can be further split into smaller components6 Components
  45. 45. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components ✓ A valid React component, accepts a single ‘props’ object argument to produce a React element. ✓ These are called “functional” as they literally are JavaScript functions. <button onClick={this.handleClick}>Click Here</button> Prop
  46. 46. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components Simplest way of defining a component is through JavaScript STATEFUL STATELESS <Component/> STATELESS <Component/> Components in ReactJS can be in two forms: 1. Stateful: Remembers everything it does 2. Stateless: Doesn’t remembers anything it does.
  47. 47. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Stateful Components 1 Core which stores information about components state in memory 2 Can change states 3 Contains knowledge of past, current and possible future state changes 4 Receives information from the stateless components if state change is required
  48. 48. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Stateless Components 1 Calculates states internal state of components 2 Never changes the state 3 Contains no knowledge of past, current and possible future state changes 4 Provides Referential Transparency i.e for same inputs will produce same output
  49. 49. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEventsStatesComponents RouterRefsLifecycle Props
  50. 50. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Props ✓ Props are read-only components ✓ Whether components are declared as function or class, it must never change its props ✓ Such components are called ‘pure functions’ RULE: All React components must act like pure functions with respect to their props.
  51. 51. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEvents States Components RouterRefsLifecycleProps
  52. 52. Copyright © 2017, edureka and/or its affiliates. All rights reserved. States ✓ Heart of react components ✓ Must be kept as simple as possible ✓ Determines components rendering and behavior ✓ Creates dynamic and interactive components Components Components Components Components Components Props Props Props Props State State State State Props
  53. 53. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEventsStatesComponents RouterRefs Lifecycle Props
  54. 54. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Lifecycle React provides various methods which notifies when certain stage of the lifecycle occurs called Lifecycle methods ✓ These are special event handlers that are called at various points in components life ✓ Code can be added to them to perform various tasks ✓ They are invoked in a predictable order ✓ Entire lifecycle is divided into 4 phases.
  55. 55. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Initial Phase
  56. 56. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Updating Phase
  57. 57. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Props Change Phase
  58. 58. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Unmounting Phase
  59. 59. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX Keys Events StatesComponents RouterRefsLifecycleProps
  60. 60. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Events Events are the triggered reactions to specific actions like mouse hover, mouse click, key press etc. React Component Action
  61. 61. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Events Events are the triggered reactions to specific actions like mouse hover, mouse click, key press etc. React Event React Component Action
  62. 62. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Events ✓ Events pass event arguments to the event handler ✓ Whenever an event is specified in JSX, a synthetic event is generated ✓ This synthetic event wraps up the browsers native event and are passed as argument to the event handler
  63. 63. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Event button button button Event handler Event handler Event handler Event listener Event listener Event listener In other UI
  64. 64. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Event button button button Event handler Event handler Event handler Event listener Event listener Event listener button button button Event handler Event listener In ReactIn other UI
  65. 65. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEventsStatesComponents Router Refs LifecycleProps
  66. 66. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Refs ✓ Refs stands for references ✓ Refs are used to return references to a particular element or component returned by render(). React Element render(){ } <Component/> ref render() { } ref
  67. 67. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ➢ Managing focus, text selection or media playback Refs Use Cases ➢ Triggering imperative animations ➢ Integrating with third-party DOM libraries
  68. 68. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX Keys EventsStatesComponents RouterRefsLifecycleProps
  69. 69. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Keys Key =101 Key=102 render() render() React Elements Keys are the elements which helps React to identify components uniquely
  70. 70. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Keys Key =101 Key=103 render() render() React Elements Keys are the elements which helps React to identify components uniquely
  71. 71. Copyright © 2017, edureka and/or its affiliates. All rights reserved. 1 2 6543 987 JSX KeysEventsStatesComponents Router RefsLifecycleProps
  72. 72. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Router ✓ React Router is a powerful routing library built on top of React Framework. ✓ It helps in adding new screens and flows to the application very quickly. ✓ It keeps the URL in sync with data that’s being displayed on the web page.
  73. 73. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Router Advantages Easily understands the application views.1 It can restore any state and view with simple URL.2 It handles nested views and the resolutions.3 State can be restored by the user by moving backward and forward.4 It maintains a standardized structure and behavior.5 While navigating it can do implicit CSS transitions.6
  74. 74. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

×