ReactJS Basics codecademy

Intro to JSX

LESSON 1

An introduction to JSX fundamentals.

Exercises

• 1. Why React?

• 2. Hello World

• 3. The Mystery, Revealed

• 4. What is JSX?

• 5. JSX Elements

• 6. JSX Elements And Their Surroundings

• 7. Attributes In JSX

• 8. Nested JSX

• 9. JSX Outer Elements

• 10. Rendering JSX

• 11. ReactDOM.render() I

• 12. ReactDOM.render() II

• 13. Passing a Variable to ReactDOM.render()

• 14. The Virtual DOM

• 15. JSX Recap

Advanced JSX

LESSON 2

Learn more about JSX!

Exercises

• 1. class vs className

• 2. Self-Closing Tags

• 3. JavaScript In Your JSX In Your JavaScript

• 4. Curly Braces in JSX

• 5. 20 Digits of Pi in JSX

• 6. Variables in JSX

• 7. Variable Attributes in JSX

• 8. Event Listeners in JSX

• 9. JSX Conditionals: If Statements That Don’t Work

• 10. JSX Conditionals: If Statements That Do Work

• 11. JSX Conditionals: The Ternary Operator

• 12. JSX Conditionals: &&

• 13. .map in JSX

• 14. Keys

• 15. React.createElement

• 16. JSX Recap

Your First React Component

LESSON 3

Learn how to create your first react component.

Exercises

• 1. Hello World, Part II… THE COMPONENT

• 2. Import React

• 3. Import ReactDOM

• 4. Create a Component Class

• 5. Name a Component Class

• 6. Component Class Instructions

• 7. The Render Function

• 8. Create a Component Instance

• 9. Render A Component

Components and Advanced JSX

LESSON 4

Apply your knowledge of JSX to React components.

Exercises

• 1. Use Multiline JSX in a Component

• 2. Use a Variable Attribute in a Component

• 3. Put Logic in a Render Function

• 4. Use a Conditional in a Render Function

• 5. Use this in a Component

• 6. Use an Event Listener in a Component

• 7. Components React

Components Render Other Components

LESSON 5

Learn how and why components render other components.

Exercises

• 1. Components Interact

• 2. A Component in a Render Function

• 3. Apply a Component in a Render Function

• 4. Require A File

• 5. export

• 6. Component Rendering In Action

this.props

LESSON 6

Learn about one of the ways to store dynamic information in React: this.props.

Exercises

• 1. this.props

• 2. Access a Component’s props

• 3. Pass props to a Component

• 4. Render a Component’s props

• 5. Pass props From Component To Component

• 6. Render Different UI Based on props

• 7. Put an Event Handler in a Component Class

• 8. Pass an Event Handler as a prop

• 9. Receive an Event Handler as a prop

• 10. handleEvent, onEvent, and this.props.onEvent

• 11. this.props.children

• 12. defaultProps

• 13. this.props React

this.state

LESSON 7

Learn about the other way to store dynamic information in React: this.state.

Exercises

• 1. State

• 2. Setting Initial State

• 3. Access a Component’s state

• 4. Update state with this.setState

• 5. Call this.setState from Another Function

• 6. this.setState Automatically Calls render

• 7. Components Interacting Recap

Stateless Components From Stateful Components

LESSON 8

Learn to pass props from a stateful component to a stateless component

Exercises

• 1. Stateless Components Inherit From Stateful Components

• 2. Build a Stateful Component Class

• 3. Build a Stateless Component Class

• 4. Pass a Component’s State

• 5. Don’t Update props

Child Components Update Their Parents’ state

LESSON 9

Learn how to make a child component update its parent.

Exercises

• 1. Child Components Update Their Parents’ state

• 2. Define an Event Handler

• 3. Pass the Event Handler

• 4. Receive the Event Handler

• 5. Automatic Binding

• 6. One Sibling to Display, Another to Change

• 7. Pass the Right props to the Right Siblings

• 8. Display Information in a Sibling Component

• 9. Stateless Components Inherit From Stateful

Style

LESSON 10

Learn simple styling in React.

Exercises

• 1. Advanced React Techniques

• 2. Inline Styles

• 3. Make A Style Object Variable

• 4. Style Name Syntax

• 5. Style Value Syntax

• 6. Share Styles Across Multiple Components

---

React Documentation