Last Updated: 30 December, 2022
📊 Table of Contents
- 📊 Table of Contents
- ❓What’s React?
- 💬 Past Presentations
- ✳️ Getting Setup
- ⌨️ JSX and TSX
- 📦 The Power of Components!
- ⚙️ Adding Functionality
- 🔄 State
- 📩 Properties (aka Props)
- 📂 Actions on Load
- 🌐 Quick Note on API Calls
- 🎨 A Pop of Color
React was developed at Facebook and released as open source in 2013. It’s easy to get started using it because React makes use of familiar HTML elements to output, has a huge community so it’s easy to get help, and is scalable so you can use it on applications both large and small.
The official documentation can be found here:
💬 Past Presentations
Intro to Frontend Dev Presentation
Spring 2021 In-Depth Frontend Dev Presentation
In-Depth Frontend Dev More Adventures With React Series # 2 Workshop # 3
✳️ Getting Setup
- You can check your current version by running
npm -v, respectively, in your terminal.
npx create-react-app my-app
- Directory is another name for folder 📂
lslets you list all the files in a directory
cdlets you change directory
- To use with TypeScript enter:
npx create-react-app my-app --template typescript
npm startfrom within your project folder and navigating to
localhost:3000in your web browser. As you save changes to your React components, this page will update automatically. This is called hot reload.
- You can shut down this development server any time by pressing
For more details, see React's official documentation.
⌨️ JSX and TSX
Writing Markup with JSX
We won’t be providing many resources on TypeScript, but if you’d like to learn more, official resources can be found here:
📦 The Power of Components!
React projects are structured into components, small building blocks which make up a larger project. (Your project is really just a big component.)
(Functional) Components all follow the same basic structure:
Components allow you to abstract common elements in your code and allows you to break your complex project into smaller, more manageable/maintainable pieces.
As an example, if your header and paragraph in the above code were much more complex, you could break your
App into two components with their own complex code:
⚙️ Adding Functionality
React has one major limitation: it doesn’t know when to re-render (update) the screen as variables are changed. When should the function return again? You don’t want it to re-render every time any variable changes!
Instead, React developers make use of state. State variables are special variables which trigger a re-render of the view.
📩 Properties (aka Props)
Suppose we wanted the header (
<h2> element) in the
Counter to have a more complex output. We’d need some way of telling the header what number to display. This is where Properties, often shortened to Props, come into play.
Props let you make components more reusable since you can change what information they display. This is useful as variables change and across when re-using existing components where you need the same logic in more than one place.
Additional properties can be added by separating them with commas. For example:
📂 Actions on Load
Often you want to perform an action when a page is loaded. This may be fetching information from local cache or from a backend API. React provides a useful
useEffect function which is run on load to perform an action when that component is rendered.
Here is the official documentation:
Using the Effect Hook - React
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. The Effect Hook lets you perform side effects in function components: This snippet is based on the counter example from the previous page, but we added a new feature to it: we set the document title to a custom message including the number of clicks.
And here is a small example:
🌐 Quick Note on API Calls
API calls tend to follow this structure:
- Frontend makes an API call to get data from a database or other server. Data is stored on the server in a format efficient for the server.
- Server responds to the API and sends back data in JSON format.
- The frontend has a previously defined Promise of the format of the data. It tries to unpack the data using this understanding.
🎨 A Pop of Color
Styling React is very similar to styling standard HTML. CSS works as before and the same concepts apply. That said, React (well, JSX) also has some convenience features to make it even easier to style without having to open a separate styles file! W3Schools has a great summary:
React CSS Styling