Introduction to React, JSX, Components, props and state. Building your first Components, using create-react-app.

2. $ whoami
blessing_edugie.ebowe
Software Developer @Andela
Introduction to sweet:) React

3. Scheme of Work
Scheme of Work
01. What is React.js?
02. What is JSX?
03. Our First Love:Component
04. Love is Complex:Complex Components
05. Love may/may not need Money:Data-Driven Components

4. • Something that you can use to build what you see on a webpage.
• React is a view layer library, that is not a framework like Angular.
• React is a declarative, efficient, interactive and flexible
JS library for building user interfaces.
https://reactjs.org/tutorial/tutorial.html#what-is-react
Difference btw framework & lib: you call lib. Framework calls you
What is React.js?
What is React.js 1

5. • Virtual DOM - tree of JavaScript objects that represents the actual DOM.
• Uses efficient diffing algorithms, in order to know what changed
• Updates subtrees of the DOM
• Faster DOM manipulation
• Unidirectional Data Flow - Data flows in one direction, separates data from DOM
• UI Components - Reusable, Readable and Interactive components
• JSX Sweetness - JavaScript eXtension, Allows for writing HTMLike JS
• React Native for Mobile
• React dev tools: React Chrome Extension
• BIG BACKING - Facebook
Why should I use React.js?
What is React.js 2

6. At the heart of all React applications
are components.
We write React components that
correspond
to interface elements.
We then organize these components
inside higher-level components which
define the structure of our application.
App -> ConverterBoxes -> SelectBox
Let’s talk React

7. • XML-like syntax for
generating component’s
HTML.
• Translates to plain JS
What is JSX?
What is JSX? 1
• React without JSX
• Transform JSX to React
function call using babel

8. • Self-contained reusable building blocks of an application
• They describe your UI at any point in time
• They are basically idempotent functions (same input same output)
• Created using React’s Component method
• Only required method is render, but has other lifeCycle Methods
• Inserted into the DOM using ReactDOM’s render method
Our First Love:Component
Our First Love:Component::Rendering and Creating

9. Love is Complex:Complex Components
Love is Complex:Complex Components::Rendering and Creating

10. • Props:
• Data passed down from parent component to child component
• Read Only
• Accessed via this.props(class/container component) or
props(presentational/functional component)
• State:
• Represents internal state of component
• Accessed via this.state(class/container component)
• When component’s state data changes, the rendered markup will be updated
by re-invoking the render method.
• Read and Write
Love may/may not need Money:Data Driven Component
Love may/may not need Money:Data-Driven
Components

11. Bonus: Using create-react-app
Bonus:Using create-react-app

12. • https://www.fullstackreact.com/30-days-of-react/
• https://babeljs.io/learn-es2015/
• https://reactjs.org/
• React Tutorial
• For JS/HTML/CSS https://www.w3schools.com/
Follow up materials
Follow up
materials

15. Thank You