Scribd
Upload
11 views

Full Stack React

Uploaded by

John Rowarth
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Full Stack React

Uploaded by

John Rowarth
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

REACT

280. Introduction to JSX and Babel


Starting index.html react file
Inject html into our website like so in the
index.js file
282. Javascript Expressions in JSX & ES6 Template Literals

Add variables to html with {} or js expressions such as 2 +2. But not statements like
else if
284. JSX Attributes & Styling React
Elements
Use className instead of class with JSX

Also change to type to JSX in


the script tag
When writing attributes in jsx, make the
attributes camelcased.

contentEditable allows you to edit the element on the UI


285. Inline Styling for React Elements
286. React Styling Practice
287. React Components
Usually create an app component with
everything in it
289. Javascript ES6 - Import, Export and Modules
Left one is best way to
import
293. React Props
295. React DevTools
Then go in browser dev tools and go to
components.
This is a great tool to following props

Download chrome
extension
Key is required by react
for all components
296. Mapping Data to Components rendered by a loop, to
uniquely identify each
element
298. Javascript ES6 Map/Filter/Reduce
Filter
Reduce
FIND
FindIndex is same is find method but displays
the index
301. React Conditional Rendering with the
Ternary Operator & AND Operator
You can use ternary operators in jsx as they are an expression,
they return a value directly. Whereas if statements return a block
of code.

•Expression: Produces a value and can be part of a statement.


•Statement: Executes an action and may contain expressions as
part of its structure.
You can also choose to render something if
something is true, if not you can return
nothing

Faster way to write the code on the left


302. Conditional Rendering Practice
304. React Hooks - useState
305. useState Hook Practice
Set interval allows you to continuously do a task every
specified time
307. Javascript ​ES6 Destructuring Challenge
Solution
308. Event Handling in React: Changing btn
color when hovering over
309. React Forms
Add event.prevent default when using react
forms as the page automatically refreshes
which you may not want
311. Changing Complex State
313. Javascript ES6 Spread Operator
314. Javascript ES6 Spread Operator Practice
315. Managing a Component Tree
316. Managing a Component Tree Practice
317. Keeper App Project - Part 3
319. React Dependencies & Styling the
Keeper App using Material UI

You might also like