Avadhut

React Crash Course

Avadhut Lohar's photo
Avadhut Lohar
·

2 min read

Intro to React

What is React?

A JavaScript library for building user interfaces

Why should we use React?

  • Easier to use

  • Maintainable

  • Scalable

  • Most popular frontend framework

Reusable Components

Why use Reusable Components?

Components help reduce code duplication

Two parts to components:

  • Creating a component

1 - Create a new file :

"Todo.jsx"

2 - Inside of this file create a function :

function Todo{}

3- Inside of your function , return some JSX :

function Todo {
return <div> Finish the project</div>
}

4 - Export your function :

export default Todo

  • Using a component

1 - Import the file :

import Todo from "./components/Todo.jsx"

2 - Use the component 

<Todo />

Props

What are props?

Props make components dynamic

Two parts to props :

  • Creating props

Pass in the property name and value

<Todo propName="Prop Value" />

How to use a prop

  • Accept props in parameter
function Todo ({propName}){
...
}
  • Use props
function Todo({propName}){
return <div>{propName}</div>
}

How to create multiple props

  • Pass in the property name and value
<Todo propName="Prop Value" propTwo="Second Prop Value"/>

How to use multiple props

  • Accept props in parameter
function Todo ({propName,propTwo}){
...
}
  • Use props
function Todo({propName}){
return <div>{propName}{propTwo}</div>
}

Event Handlers

Code that executes when an event occurs.

Most important event handlers :

  • onClick

  • onChange

React Hooks

There are multiple react hooks, but the most important ones are :

  • useState

useState is how we define variables in React.

Conditional Rendering

  • rendering a component when a certain condition is met.

  • useEffect

Routing

Routing lets you navigate around your website.

API Integration

How to retrieve data from an API in React?

  • fetch

  • axios

React