React CodeDancing - Basics & JSX

[MilosTanaskovic]

React CodeDancing - Basics & JSX

*Feedback UI App *Feedback UI App - Figma design prototype

[MilosTanaskovic]

Feedback UI App (Entry Level)

This is going to allow us to touch on everything from:

• Components
• Props
• State
• Hooks
• Events
• Context API
• Frame Motion
• CRUD (create, read, update, delete item)
• React Router
• Figma Design Prototype https://www.figma.com/file/zppYSMP6dUEUh3SBp6FPOg/Untitled?node-id=326%3A2

[MilosTanaskovic]

create react app

getting started with React https://create-react-app.dev/docs/getting-started npx create-react-app feedback-app --use-npm cd feedback-app Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner.

[MilosTanaskovic]

Initializing React

remove all files from src folder create index.js file

• import react
• import react-dom
• ReactDom.render() - takes 2. parameters (<App/>,document.getElementById('root'))
• wrapp App with <React.StrictMode><App/></React.StrictMode>

create App.js (main component in app)

• import react
• create functional component
• return (JSX)

create global index.css

[MilosTanaskovic]

Intro To JSX

JSX is syntactic sugar JSX elements must be wrapped in an enclosing tag use <></> fragment to wrapp 2 or more elements there are some diff betwen HTML and JSX attribute (class - className, for - htmFor) JSX under the hood:

import React from 'react'

export default function App() { return React.createElement( 'div', { className: 'container' }, React.createElement('h1', {}, 'My App') ) }

### Dynamic Values & Lists in JSX

> use `{}` for dynamic (js) values...
> Above return store state, js, logic...

### Conditionals in JSX
> use `{}` for conditionals rendering
> use `&&` for conditionals rendering
> use `? :` for conditionals rendering