React.Js the basic

My little understanding of react.Js

Transcript

1. React.Js the basic Olatunde Owokoniran @hurlatunde
2. • Comfortable with HTML5 and CSS3 • Comfortable with JavaScript • Aware of Bootstrap (relative to the course) • Familiar with Node.js, specifically NPM (relative to the course) What You Should Know React.Js the basic With Olatunde Owokoniran
3. React is a javascript library that’s used for building user interfaces. • Is open source, but maintained by Facebook • Can be the “V” (or view) in MVC • Is ideal for large-scale, single page applications • Uses a high speed virtual DOM **Whenever a change happens the virtual DOM efficiently re-renders the DOM** • Uses clean and easy-to-understand JSX syntax React.Js React.Js the basic With Olatunde Owokoniran
4. The structure of HTML elements that makes up a web page React.Js the basic With Olatunde Owokoniran DOM (Document Object Model) • Reading and writing to the DOM is slow, But JavaScript objects are faster than DOM objects. • React.js virtual DOM is an object • React.js never reads from the real DOM, but only writes to the real DOM if needed
5. In here we have javascript logic that’s interactive with the DOM to make updates. So whenever you use functions like getElementById ** you are reading from the DOM** But whenever you change any of the DOM elements, by calling functions like .html , .innerHtml, .removeClass , .addClass and more ** you are writing to the DOM** JavaScript Logic, How it works React.Js the basic With Olatunde Owokoniran DOM JavaScript Logic QUERY General javascript logic Read and Write
6. React only interact with the virtual DOM (Javascript Object) So whenever you use get document node, it gets state information from the virtual DOM, when we call the render function react will update the virtual DOM which will only update the necessary changes to the real DOM React.js DOM, How it works React.Js the basic With Olatunde Owokoniran React.js virtual DOM JavaScript Logic React.js virtual DOM logic DOM Render
7. React.render ( React.createElement('h1', null, 'Hello, world!'), document.getElementById('example') ); Native JavaScript with react React.Js the basic With Olatunde Owokoniran Below is some line of code written with pure Javascript, but having to keep writing such lines of function could get out of hands easily. But there’s is an easier way is JSX
8. Compiled JavaScript React.render ( React.createElement('h1', null, 'Hello, world!'), document.getElementById('example') ); JSX React.Js the basic With Olatunde Owokoniran JSX syntax needs to be converted back to pure javascript before it will run on the browser. So the tool to use is called BABEL JSX React.render ( <h1>Hello, world!</h1>, document.getElementById('example') );
9. In this Example we are going to be building a very simple weather app, just to show how react works. With help of Gulp React.Js the basic With Olatunde Owokoniran Setting up React.Js
10. Automate and enhance your workflow React.Js the basic With Olatunde Owokoniran Gulp Gulp is a tool that helps out with several tasks when it comes to web development. It's often used to for frontend tasks like: • Spinning up a web server • Reloading the browser automatically whenever a file is saved • Using preprocessors like Sass or LESS • Optimizing assets like CSS, JavaScript, and images
11. React.Js the basic With Olatunde Owokoniran Project source https://github.com/hurlatunde /weatherApp Project Gulp help https://hurlatunde.github.io/articles/2016 -11/getting-started-react-and-gulp
12. Next Step React.Js the basic With Olatunde Owokoniran Tutorials for Getting Started with React • Build with React buildwithreact.com/tutorial • Raw React by James K Nelson jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ • Official React Tutorial facebook.github.io/react/docs/tutorial.html • Comprehensive React.js Guide by Tyler McGinnis tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-buildi ng-apps-with-react I wouldn't recommend a tutorial that teaches so many technologies at once. This set of tutorial did great by addressing different technologies in different sections. The first half of the tutorial is only on Redux, and the second half is on React.
13. Conclusion Olatunde Owokoniran @hurlatunde