@ -19,7 +19,7 @@ You need a local web server to test the web app we'll build in this lesson. If d
- Node.js. Make sure you version of Node.js is at least 12, or the latest stable release.
- Preferred code edition or IDE
- Terminal. MacOS and Windows both have built-in terminals. If you're using a code editor like VSCode, it also has conveniently built-in terminal.
- React devtools is recommended. It is a web browser extension that helps with developing and debugging when using React.
- React devtools is recommended. It is a web browser extension that helps with developing and debugging when using React. We will be using the devtools when we start creating components.
Components are sections of your application that you extract out into separate files so that you can make them reusable. Conceptually, components are like JavaScript functions. There are two types of components, functional components and class components. Because of the nature of React's ecosystem and how its features, recommendations, and versions are continually updated, for brevity's sake we will learn the build the project with function components. You have already seen the first component generated when we ran `create-react-app` in `App.js`. The simplest way to define a component is to write a JavaScript function. Let's start by creating our first component file called `Hero.js` inside a new directory called `components/` under the `src` folder. A function component must always return markup, which is what `React.createElement` generates.
Components are sections of your application that you extract out into separate files so that you can make them reusable. Conceptually, components are like JavaScript functions. There are two types of components, **functional components** and **class components**. Because of the nature of React's ecosystem and how its features, recommendations, and versions are continually updated, for brevity's sake we will learn the build the project with function components. You have already seen the first component generated when we ran `create-react-app` in `App.js`. The simplest way to define a component is to write a JavaScript function. Let's start by creating our first component file called `Hero.js` inside a new directory called `components/` under the `src` folder. A function component must always return markup, which is what `React.createElement` generates.
```jsx
const Hero = () => {
@ -63,7 +63,9 @@ const Hero = () => {
export default Hero;
```
As you can see, we've written our function using the arrow function concept introduced in JavaScript ES6 which works the same way as a regular function component.
As you can see, we've written our function using the arrow function concept introduced in JavaScript ES6 which works the same way as a regular function component. Function components are naturally stateless as what it usually does is returns something that parses into HTML elements. As your application gets more complex and need to handle changing of state, you'll need methods to hook into your components to handle that. Previously, components with state had to be written as classes, but thanks to the introduction of React Hooks (which we will get into in a later section), we can now write more declarative and performant code. Your use of classes or functions depends on your preference and situation.
When working with function components, we always want to aim to extract components out into smaller composable pieces. Our `Hero` component in this case can be described as a parent component. Whatever element that is contained inside of this component can potentially be extracted out into another subcomponent e.g a button component. We will show an example of this in our **props** section below.
## Props
@ -71,13 +73,13 @@ We briefly touched on props in our examples above. In this section, we'll go int
### What are props (properties)?
Props (short for properties) are plain JavaScript objects that hold data that can effect the output of the render function your application's components. Props are data that are meant to be passed around so consider that if you have a rather large application with nested components, you'll need to pass down data from the top most parent component down to the child component. Let's have a look at our 'Hero' component:
Props (short for properties) are plain JavaScript objects that hold static or dynamic data that can effect the output of the render function in your application's components. Props are data that are meant to be passed around so consider that if you have a rather large application with nested components, you'll need to pass down data from the top most parent component down to the child component. Let's have a look at our 'Hero' component:
```jsx
const Hero = ({ name }) => {
const Hero = ({ hero }) => {
return (
<divclassName="hero">
<h1>My name is {name} and this is my portfolio!</h1>
<h1>My name is {hero.name} and this is my portfolio!</h1>
</div>
);
}
@ -85,7 +87,7 @@ const Hero = ({ name }) => {
export default Hero;
```
The `name` prop variable is being passed down from a parent component which is our `App.js` in this case. This is currently an arbitrary data value that we haven't defined yet. But what is happening here is that `name` is a variable or 'placeholder' that when rendered will evaluate to whatever you've set the value to e.g a string containing your name.
The `hero` prop variable is being passed down from our outer most parent component which is our `App.js` in this case. The `hero` variable is an arbitrary data value that we haven't defined yet. But what is happening here is that `hero` is a variable or 'placeholder' that when accessed at `hero.name` will render and evaluate to whatever you've set the the property name value to e.g a string containing your name.
Let's now have a look at our `App.js` with some markup edits and adding of a data layer:
@ -96,7 +98,7 @@ import Hero from './components/Hero';
function App() {
return (
<divclassName="App">
<HeroheroData={heroData} />
<Herohero={{...hero}} />
</div>
);
}
@ -104,13 +106,13 @@ function App() {
export default App;
```
We are importing in a mock data file, which we will get to creating later and defining an attribute prop called `heroData` to pass in our data also called `heroData`. The attribute can be called any arbitrary name but is a good idea to name it something that pertains to the value you're expecting. In our `Hero.js`, we'll then need to pass in the prop and render out the hero data's property such as a`name`.
In `App.js`, we are importing in a mock data file, which we will get to creating later and defining an attribute prop called `hero` to pass in our data object called `heroData`. The prop attribute can be called any arbitrary name but is a good idea to name it something that pertains to the value you're expecting. In our `Hero.js`, we'll then need to pass in the prop and render out the hero data's property such as the`name`.
```jsx
const Hero = ({ heroData }) => {
const Hero = ({ hero }) => {
return (
<divclassName="hero">
<h1>My name is {heroData.name} and this is my portfolio!</h1>
<h1>My name is {hero.name} and this is my portfolio!</h1>
We won't be dealing with too much complex data in this course but the examples provided give some options as to how React can handle data in multiple ways depending on preference and use cases. Before we go any further with introducing another way of providing centralized data, let's create a file where we will store our portfolio data to pull from. In a real-world application, there are other ways to input and source your data from platforms such as a Content Management System or even from markdown. For this project and course, we'll be creating a mock data to pull data objects from, so let's get right to it!
We won't be dealing with too much complex data in this project and course but the examples provided give some options as to how React can handle data in multiple ways depending on preference and use cases. Let's now create a file where we will store our portfolio data to pull from. In a real-world application, there are other ways to input and source your data from platforms such as a Content Management System or even from markdown. For this project and course, we'll be creating a mock data to pull data objects from, so let's get right to it!
### Creating a data source
@ -213,7 +215,7 @@ export const footerData = {
};
```
In this file, we've created several objects with properties and immediately exported them. For brevity's sake, each of the object points to a component in the portfolio project with mainly string properties that we will use to store our data. You can replace or fill out the key values on those properties when you start to build out more components. Note the `nanoid()` function we are calling at the `id` keys. `nanoid` is an external library we will be using to generate unique string IDs. Let's go ahead a install nano id now:
In this file, we've created several objects with properties and immediately exported them. Each of the object points to a component in the portfolio project with mainly string properties that we will use to store our data. You can replace or fill out the key values on those properties when you start to build out more components. Note the `nanoid()` function we are calling at the `id` keys. `nanoid` is an external library we will be using to generate unique string IDs. Let's go ahead a install nano id now:
```bash
npm i nanoid
@ -223,11 +225,17 @@ npm i nanoid
yarn add nanoid
```
Unique ID keys are necessary when rendering lists in React as the keys help React to identify which items have changed. We will go into keys and lists when we get to mapping out and rendering the lists in our components. Go to this [React documentation](https://reactjs.org/docs/lists-and-keys.html#keys) to read more about keys.
## Context and hooks
Unique ID keys are necessary when rendering lists in React as the keys help React to identify which items have changed. We will go more into keys and lists when we get to mapping out and rendering the lists in our components. Go to this [React documentation](https://reactjs.org/docs/lists-and-keys.html#keys) to read more about keys.
## Hooks
In this section, we'll be introducing another core concept of React, [hooks](https://reactjs.org/docs/hooks-intro.html). Hooks make function components stateful without using the 'class' concept in React.
useState
useContext
useEffect
The three dots in `...heroData` is called the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and it helps to pass in all the props so that we don't have to write out the prop variables individually.
In the React chapter, we're going to lay out the foundations to create your very own customizable single page application portfolio in React. At the end of the chapter and ultimately the end of the bootcamp program, you will have multiple projects and materials to showcase in your portfolio.
## Lessons
1. Scaffold React project and set up tooling
2. Build out your site: Components, Props, JSX, State & Hooks
3. Add styling and deploy your site
## Requirements and Submission
In the portfolio course, we will going over the core concepts of building a portfolio. You will need to customize your styling and add any extra features. The below list components that are required in order to submit the final portfolio:
- Updated portfolio featuring at least 2 projects
- Use React library
- A hero component with content
- An about component with content
- A portfolio list component
- A footer component
- Deployed site to hosting platform of choice (Netlify, Vercel, Heroku, Github pages, etc.)
Submit link of portfolio in the Moodle platform.
## Credits
Written with ♥️ by [Jaeriah Tay](https://www.twitter.com/jaeriahtay)
Jaeriah Tay
5 years ago
committed by
GitHub