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.

Learn react-js


Published on

Introduction to know what why how find your way to start react js ...

Published in: Engineering
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website!
    Are you sure you want to  Yes  No
    Your message goes here

Learn react-js

  2. 2. AGENDA  Introduction to REACT  Requirement and tooling  Installing react  JSX  REACT Ecosystem  Component LifeCycle  REACT COMPONENTS  Components interacting
  4. 4. Welcome to React.js React.js is a JavaScript library developed by Facebook engineers. Here are just a few of the reasons why people choose to program with React Fast Apps made in React can handle complex updates and still feel quick and responsive 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 Scalable Large programs that display a lot of changing data are where React performs best Flexible You can use React for interesting projects that have nothing to do with making a web app Popular While this reason has admittedly little to do with React's quality, the truth is that understanding React will make you more employable
  6. 6. Prior knowledge No prior React knowledge is expected but if you are new to JavaScript please read more JS then returning to React.
  7. 7. Tooling Browser, IDE, Node Js, Console, Curiosity ...
  9. 9. INSTALLING REACT [SPA] Create React App is the best way to starting building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.  npm install -g create-react-app  create-react-app hello-world  cd hello-world  npm start Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses webpack, Babel and ESLint under the hood, but configures them for you.
  10. 10. INSTALLING REACT [AREA] You don't need to rewrite your app to start using React. We recommend adding React to a small part of your application, such an individual widget, so you can see if it works well for your use case. While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of :  A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.  A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time.  A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.
  11. 11. INSTALLING REACT [AREA] //To install React with Yarn, run // To install React with npm, run: Both Yarn and npm download packages from the npm registry.  Enabling ES6 and JSX We recommend using React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React. yarn init yarn add react react-dom npm init npm install -- save react react-dom
  12. 12. Development and Production Versions By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.  Create React App : If you use Create React App, npm run build will create an optimized build of your app in the build folder.  Webpack : Include both DefinePlugin and UglifyJsPlugin into your production Webpack configuration as described in this guide.  Browserify : Run Browserify with NODE_ENV environment variable set to production and use UglifyJS as the last build step so that development-only code gets stripped out.
  13. 13. INSTALLING REACT [CDN]  Using a CDN If you don't want to use npm to manage client packages : Minified and optimized production versions of React are available at: To load a specific version of react and react-dom, replace 15 with the version number. <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script>
  14. 14. JSX REACTJS
  15. 15. JSX JSX is a syntax extension for JavaScript code looks a lot like HTML (not valid JavaScript web browsers can't read it), It was written to be used with React. 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. 
  16. 16. JSX You can use the JSX directly with the Babel JavaScript library in the Development mode just for test and not in production ! <script src=""></script>
  17. 17. JSX vs JS ? var jsVar = ‘<h1>Hello world</h1>’ //JS VARIABLE var jsxVar = <h1>Hello world</h1> //JSX ELEMENTS var product = <img src="images/product-id.jpg" alt=‘product-name" width="500px" height="500px" /> ATTRIBUTES IN JSX
  18. 18. Use JSX or JS ?  In React, it's possible to write your component in pure JS like:  But I think it's not very comfortable to write your HTML in this way. Luckily we can write it in a JSX syntax (JavaScript extension) which let us write HTML inline: render () { return <div>Hello {}</div>; } render () { return React.createElement("div", null, "Hello ",; }
  19. 19. Nested If a JSX expression takes up more than one line, then you should wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it: Nested JSX expressions can be saved as variables, passed to functions, etc., just like non- nested JSX expressions can! var theGoogleLink = ( <a href=""> <h1> Click me I am Google </h1> </a> );
  20. 20. Nested Best practices : To make this more readable, you can use HTML-style line breaks and indentation : <a href=""><h1>Click me I am Google</h1></a> <a href=""> <h1>Click me I am Google</h1> </a>
  21. 21. Nested There's a rule that we haven't mentioned : A JSX expression must have exactly one outermost element. // This code is not valid  var paragraphs = ( <p>I am a paragraph.</p> <p>I, too, am a paragraph.</p> ); // This code will work fine  var paragraphs = ( <div id="i-am-the-outermost-element"> <p>I am a paragraph.</p> <p>I, too, am a paragraph.</p> </div> );
  23. 23. What's a component? A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML. The terms "component," "React component," and "component instance" all refer to the same thing.
  24. 24. React ecosystem var React = require('react'); var ReactDOM = require('react-dom'); //or import React from 'react‘; import ReactDOM from 'react-dom'; ReactDOM.render( element, container, [callback] ); ReactDOM : several React-specific methods, all of which deal with the DOM in some way or another. ReactDOM.render makes its first argument appear onscreen. But where on the screen should that first argument appear? The first argument is appended to whatever element is selected by the second argument. Returns a JavaScript object ( contains methods that you need in order to use React).
  25. 25. Component LifeCycle
  26. 26. Component render in action Take a look at the code below. This code will create and render a new React component: import React from 'react‘; import ReactDOM from 'react-dom'; let ProductElement = React.createClass( { render: function () { return ( <div> <h1>{}</h1> <img src={product.image.src} alt={product.image.alt} width={product.width} /> </div> ); }}); ReactDOM.render( <ProductElement />, document.getElementById('app') ); //import library // Component // Render
  27. 27. React Component Calling React.createClass is the way to make a new component class. When you make a new component class, you should store it in a variable so that you can use it later. On line 4, notice that our component class is stored in a variable named MyComponentClass. Component class variable names must begin with capital letters! This adheres to the naming convention in which class names are written in UpperCamelCase. There are technical reasons for it as well.
  28. 28. React Component  An other Example with a class extends React.component
  29. 29. Reactdom Render let Product = ( <div> <img src="pics/pk-004.jpg" /> <h1> BLEU DE CHANEL </h1> <article> <strong> EAU DE PARFUM VAPORISATEUR </strong> L’éloge de la liberté masculine dans un aromatique-boisé au sillage captivant. Un parfum intemporel, anticonformiste, contenu dans un flacon d'un bleu énigmatique. En savoir plus ,,, </article> </div> ); ReactDOM.render(Product , document.getElementById('app') );
  30. 30. Updating the Rendered Element React elements are immutable. Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().
  31. 31. The virtual dom
  32. 32. The virtual dom React Only Updates What's Necessary One special thing about ReactDOM.render is that it only updates 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: var title = <h1> BLEU DE CHANEL </h1>; // This will add " BLEU DE CHANEL " to the screen: ReactDOM.render(title, document.getElementById('app')); // This won't do anything at all: ReactDOM.render(title, document.getElementById('app')); React Diff Algorith
  33. 33. Granular dom updates React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. You can verify by inspecting the last example with the browser tools:
  35. 35. MultilineUseMultilineJSXina Component import React from 'react‘; import ReactDOM from 'react-dom'; let QuoteMaker = React.createClass({ render: function () { return ( <blockquote> <p> The world is full of objects, more or less interesting; I do not wish to add any more. </p> <cite> <a target="_blank" href=""> Douglas Huebler </a> </cite> </blockquote> ); } }); ReactDOM.render( <QuoteMaker />, document.getElementById('app'));
  36. 36. Variable Attributes Take a look at this JavaScript object named product : let product = { id: 56, name: ‘BLEU DE CHANEL ‘, image: { src:’pics/pk-004.jpg’, width : ‘200px’ } };
  37. 37. Variable Attributes Use a JavaScript variable attribute in a Component let Product = React.createClass({ render: function () { return ( <div> <h1>{}</h1> <img src={product.image.src} alt={product.image,alt} width={product.image.width} /> </div> ); } }); ReactDOM.render(< Product />, document.getElementById('app'));
  38. 38. Put Logic in a Render Function A render function must have a return statement. However, that isn't all that it can have. Can also be a fine place to put simple calculations that need to happen right before a component renders. let Random = React.createClass({ // This should be in the render function: var n = Math.floor(Math.random()*10+1); render: function () { return <h1>The number is {n}!</h1>; } });
  39. 39. Put Logic in a Render Function //import library here var friends = [ { title: "Yummmmmmm", src: "" }, { title: "Hey Guys! Wait Up!", src: "" }, { title: "Yikes", src: "" } ]; JavaScriptobject
  40. 40. // New component class starts here: let Friend = React.createClass({ render: function () { var friend = friends[0]; return ( <div> <h1> {friend.title} </h1> <img src="{friend.src}"/> </div> ); } }); ReactDOM.render(<Friend/>, document.getElementById('app')); Put Logic in a Render Function Component(Friend)
  41. 41. Conditional in a Render Function //import library here ! let TodaysPlan = React.createClass({ render: function () { var message; var fiftyFifty = true; if (!fiftyFifty) { message = "out WOOO" } else { message = "to bed WOOO" } return <h1>Tonight I am going to {message}!</h1>; } }); ReactDOM.render(<TodaysPlan />, document.getElementById('app'));
  42. 42. Use this The word this gets used in React a lot! You are especially likely to see this inside of an object that is being passed to React.createClass. let IceCreamGuy = React.createClass ( { food: 'ice cream', render: function () { return <h1>I like {}.</h1>; } } );
  43. 43. Use this In the code, what does this mean?  this refers to the instructions object being passed to React.createClass.  this has two properties: food, and render. will evaluate to "ice cream." There's nothing React-specific about this behaving in this way! However, in React you will see this used in this way almost constantly. If you aren't totally comfortable with this in JavaScript, here is a good resource.
  44. 44. Events Listener Use an Event Listener in a Component ! Render functions often contain event listeners. Here's an example of an event listener in a render function : React.createClass({ myFunc: function () { alert('Stop it. Stop hovering.'); }, render: function () { return ( <div onHover={this.myFunc}> </div>; ); } }); Function Event Listener
  46. 46. COMPONENTS INTERACTING A React application can contain dozens, or even hundreds, of components.  Each component might be small and relatively unremarkable on its own. When combined, however, they can form enormous, fantastically complex ecosystems of information.  In other words, React apps are made out of components, but what makes React special isn't components themselves. What makes React special is the ways in which components interact.  This unit is an introduction to components interacting.
  47. 47. A Component in a Render Function Here is a render function that returns an HTML-like JSX element: You've seen render functions return <div></div>s, <p></p>s, and <h1></h1>s, just like in the above example. var Example = React.createClass({ render: function () { return <h1>Hello world</h1>; } });
  48. 48. Composing Components Render functions can also return another kind of JSX: [component instances] In the above example, Crazy's render function returns an instance of the OMG component class. You could say that Crazy renders an <OMG />. let OMG = React.createClass({ render: function () { return <h1>Whooaa!</h1>; } }); let Crazy = React.createClass({ render: function () { return <OMG />; } });
  49. 49. Please use module.exports Alright! You've learned how to use require to import a file into a different file. But you don't want to import a whole file! NavBar.js isn't really what you're looking for. You just want to the NavBar component class, so that you can render a <NavBar /> instance. What you need is a way to import only a specific part of a file into another file. The answer is something called module.exports. module.exports comes from Node.js's module system, just like require does. module.exports and require are meant to be used together, and you basically never see one without the other. Here's how you use module.exports: In one file, declare module.exports to be equal to an expression. It could be any expression you want:
  50. 50. Example without (module.exports) ProfilePage.js NavBar.js var NavBar = require('./NavBar'); var ProfilePage = React.createClass({ render: function () { return ( <div> <NavBar /> <h1>All About Me!</h1> <p>I like movies and blah blah blah blah blah</p> <img src=" content/courses/React/react_photo-monkeyselfie.jpg" /> </div> ); } }); var NavBar = React.createClass({ render: function () { var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; var navLinks ={ return ( <a href={'/' + page}> {page} </a> ); }); return <nav>{navLinks}</nav>; } });
  51. 51. Example using (module.exports) ProfilePage.js NavBar.js var NavBar = require('./NavBar'); var ProfilePage = React.createClass({ render: function () { return ( <div> <NavBar /> <h1>All About Me!</h1> <p>I like movies and blah blah blah blah blah</p> <img src=" content/courses/React/react_photo-monkeyselfie.jpg" /> </div> ); } }); var NavBar = React.createClass({ render: function () { var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact']; var navLinks ={ return ( <a href={'/' + page}> {page} </a> ); }); return <nav>{navLinks}</nav>; } }); module.exports = NavBar;
  52. 52. Use the component Attributs Passing prop to componenet a render ! import React from 'react‘; import ReactDOM from 'react-dom'; var Greeting = React.createClass({ render: function () { return <h1>Hi there, {this.props.firstName}! </h1>; } }); // ReactDOM.render goes here: ReactDOM.render( <Greeting firstName='Amine' />, document.getElementById('app') );
  53. 53. Attributs (convert attrs component to json) var PropsDisplayer = React.createClass({ render: function () { var stringProps = JSON.stringify(this.props); return ( <div> <h1>CHECK OUT MY PROPS OBJECT</h1> <h2>{stringProps}</h2> </div> ); } }); // ReactDOM.render goes here: ReactDOM.render(<PropsDisplayer myProp="Hello" name="Frarthur" town="Flundon" age={2} haunted={false}/>, document.getElementById('app')) {"myProp":"Hello","name":"Frarthur","town":"Flundon","age":2,"haunted":false}
  54. 54. Include element with passing props import React from 'react‘; import ReactDOM from 'react-dom'; var App = React.createClass({ render: function () { return ( <div> <h1> <Greeting name={} /> </h1> <article> Latest newzz: where is my phone? </article> </div> ); } }); ReactDOM.render( <App name="aminem9" />, document.getElementById('app') ); import React from 'react‘; var Greeting = React.createClass({ render: function () { return <h1>Hi there, {}!</h1>; } }); module.exports = Greeting;.
  55. 55. Default props value ! Impot ,,, var Button = React.createClass({ ??? render: function () { return ( <button> {this.props.text} </button> ); } }); ReactDOM.render( <Button text="" />, document.getElementById('app') ); getDefaultProps: function () { return { text: 'I am a button' }; },
  57. 57. Dynamic information in React There are two ways for a component to get dynamic information: props and state. Besides props and state, everything in a component should always stay exactly the same. You just spent a long lesson learning about props. Now it's time to learn about state. props and state are all that you need to set up an ecosystem of interacting React components.
  58. 58. The state To read a component's state, use the expression The above component class reads a property in its state from inside of its render function. Just like this.props, you can use this.state from any property on the instructions object. {this.state.myProperty}
  59. 59. getInitialState ! import React from 'react‘; import ReactDOM from 'react-dom'; var App = React.createClass({ getInitialState: function () { return { title: 'Best App' }; }, render: function () { return ( <h1>{this.state.title}</h1> ); } }); ReactDOM.render(<App />, document.getElementById('app') )
  60. 60. A component can do more than just read its own state. A component can also change its own state. A component changes its state by calling the function this.setState. this.setState takes two arguments: an object that will update the component's state, and a callback. You basically never need the callback. In the code editor, take a look at Example.js. Notice that <Example /> has a state of:
  61. 61. var Example = React.createClass({ getInitialState: function () { this.setState( { hungry: true } ); return { mood: 'great', hungry: false }; }, render: function () { return <div>{this.state.hungry}</div>; } }); <Example /> Set a state
  62. 62. Call this.setState from Another Function import React from 'react‘; import ReactDOM from 'react-dom'; var Mood = React.createClass({ getInitialState: function () { return { mood: 'good', color: 'yellow' }; }, changeColor: function () { var newColor = this.state.color == 'yellow' ? 'green' : 'yellow'; this.setState({ color: newColor }); },
  63. 63. Call this.setState from Another Function toggleMood: function () { var newMood = this.state.mood == 'good' ? 'bad' : 'good'; this.setState({ mood: newMood }); }, render: function () { return ( <div> <h1>I'm feeling {this.state.mood}!</h1> <button onClick={this.toggleMood}> Click Me </button> </div> ); } }); ReactDOM.render(<Mood />, document.getElementById('app'));
  64. 64. Build a Stateful Component Class import React from 'react‘; import ReactDOM from 'react-dom'; var Header = React.createClass({ getInitialState: function() { return { imageSource: "mypicture.png" }; }, changeImage: function() { this.setState({imageSource: "differentpicture.png"}); }, render: function() { return( <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} /> ); } }); module.exports = Header;
  65. 65. Build a Stateless Component Class import React from 'react‘; import ReactDOM from 'react-dom'; var Header = React.createClass({ render: function() { return( <img src={this.props.imageSource} /> ); } }); ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);
  66. 66. property vs state react
  67. 67. Thank you ! UI = f (state)