Skip to main content

Session 02: Introducing JSX, Components and Props

Create a react project (typescript)

https://create-react-app.dev/docs/adding-typescript/

At current folder, open terminal / bash / powershell:
npx create-react-app my-app --template typescript

or

At current folder, open terminal / bash / powershell:
yarn create react-app my-app --template typescript

1. Introducing JSX

https://react.dev/learn/describing-the-ui

2. First Elements

https://react.dev/learn/your-first-component

3. Importing and Exporting Components

https://react.dev/learn/importing-and-exporting-components

4. Writing Markup with JSX

https://react.dev/learn/writing-markup-with-jsx

5 Passing Props to a Component

https://react.dev/learn/passing-props-to-a-component

6. Conditional Rendering

https://react.dev/learn/conditional-rendering

7. Rendering Lists

https://react.dev/learn/rendering-lists

Read more: CSS in React (CSS Flexbox)

https://www.w3schools.com/css/css3_flexbox.asp

https://www.w3schools.com/css/css3_flexbox_container.asp

https://www.w3schools.com/css/css3_flexbox_items.asp

https://www.w3schools.com/css/css3_flexbox_responsive.asp

https://www.youtube.com/watch?v=z6tJ5ngiF14&list=PLC3y8-rFHvwg6rjbiMadCILrjh7QkvzoQ