From 0f02843c11918c8a75e6a9e811baaa1015302c2a Mon Sep 17 00:00:00 2001 From: Jaeriah Tay Date: Fri, 2 Apr 2021 22:41:20 -0700 Subject: [PATCH] edits to lesson 2 --- 8-react/1-scaffold-site/README.md | 43 +++++-- 8-react/2-components-props-state/README.md | 137 +++++++++++++++++++++ 8-react/2-components-state-props/README.md | 67 ---------- 3 files changed, 170 insertions(+), 77 deletions(-) create mode 100644 8-react/2-components-props-state/README.md delete mode 100644 8-react/2-components-state-props/README.md diff --git a/8-react/1-scaffold-site/README.md b/8-react/1-scaffold-site/README.md index 8b19b588..328a607a 100644 --- a/8-react/1-scaffold-site/README.md +++ b/8-react/1-scaffold-site/README.md @@ -125,9 +125,19 @@ export default App; The `App` function in App.js represents a React function component. In React, components can be defined as class components or function components. We will get into explaining more about these components in the next chapter when we start building out more components. You can create your components as a individual files (Single File Component - SFC). In React, html-like tags which are what we call JSX can be passed in the return statement to be returned. The JSX inside the return function is what the App.js will render out. JSX stands for JavaScript XML and is a syntax extension to JavaScript that allows you to write markup inside a React component. -### Set up TailwindCSS +### Set up TailwindCSS and SASS -Before we go any further, let's install [TailwindCSS](https://tailwindcss.com/), the CSS utility library we will be using for styling of this project. Tailwind CSS is a highly customizable, low-level CSS framework that gives us all of the building blocks we need to build intuitive user interfaces. So, it is simply a utility first CSS framework. Let's install Tailwind: +Before we go any further, let's install [TailwindCSS](https://tailwindcss.com/), the CSS utility library we will be using for styling of this project. Tailwind CSS is a highly customizable, low-level CSS framework that gives us all of the building blocks we need to build intuitive user interfaces. So, it is simply a utility first CSS framework. We want to write our CSS using SASS, a CSS compiler so that we can easily nest our styles seamlessly. Let's install Tailwind and the node-sass package: + +#### Install Node SASS + +```bash +npm i sass + +# OR + +yarn add sass +``` #### Install Tailwind @@ -136,7 +146,7 @@ npm i tailwindcss autoprefixer postcss-cli # OR -yarn add tailwindcss autoprefixer postcss-cli. +yarn add tailwindcss autoprefixer postcss-cli ``` More details on [here](https://tailwindcss.com/docs/installation). @@ -218,14 +228,24 @@ plugins: [], } ``` -Now open up the `src/app.css` file that was generated when creating your React app and import in Tailwind's `base`, `components`, and `utitlities` styles, replacing all the original file contents. +#### Create styles directory and files + +Next, let's create a `styles` folder and a new `tailwind.scss` file inside of it. Move the `index.css` file that was generated when creating your React app into the `styles` directory and rename it to `index.scss`. In the `tailwind.scss` file, import in Tailwind's `base`, `components`, and `utitlities` styles, replacing all the original file contents. ```css -// src/index.css +// src/tailwind.scss + +@import "tailwindcss/base"; -@tailwind base; -@tailwind components; -@tailwind utilities; +/* Start purging... */ +@import "tailwindcss/components"; +/* Stop purging. */ + +/* Start purging... */ +@import "tailwindcss/utilities"; +/* Stop purging. */ + +/* Custom utilities */ ``` Next, you'll need to import the CSS file in your `/src/index.js` @@ -233,7 +253,8 @@ Next, you'll need to import the CSS file in your `/src/index.js` ```diff import React from 'react'; import ReactDOM from 'react-dom'; -+ import './index.css'; ++ import './styles/index.scss'; ++ import './styles/tailwind.scss'; import App from './App'; import reportWebVitals from './reportWebVitals'; @@ -245,6 +266,8 @@ ReactDOM.render( ); ``` +The `index.scss` will be empty for now until component styles are imported in when you start creating components in the next lesson. + #### Run your development environment Run the below command to start up your development environment: @@ -302,7 +325,7 @@ function App() { export default App; ``` -In localhost:3000, you should be able to see the hotreloaded changes reflected in your browser! +In localhost:3000, you should be able to see the compiled and hotreloaded changes reflected in your browser! ## Next diff --git a/8-react/2-components-props-state/README.md b/8-react/2-components-props-state/README.md new file mode 100644 index 00000000..f70d2433 --- /dev/null +++ b/8-react/2-components-props-state/README.md @@ -0,0 +1,137 @@ +# Build out your site: Components, State, Props, JSX & Hooks + +### Introduction + +We will be continuing on from the previous lesson where you set up your React project with Tailwind, a CSS utility-first library. This lesson will go over the core fundamentals of what makes React a modern library to build user interfaces using small composable pieces of code. We will be using 'components' to isolate blocks and elements of the project according to React's best code practice. What makes React a library instead of a framework is because of its flexibility, efficiency, and declarativeness and as developers we have the freedom to make architectural decisions that makes sense for our projects. + +In this section, we'll start by laying out the foundations to create your very own customizable single page application portfolio in React. We will build out composable components, use React Hooks, use state and props to pass data around, and learn how to use JSX to render our templates in our portfolio application. + +## JSX: JavaScript and XML + +To refresh our memory in the last lesson, we edited the paragraph and anchor elements in a syntax that looks exactly like HTML. In fact, it is not HTML and is actually a markup language called JSX, which stands for JavaScript XML. Using JSX, we can write code that looks like HTML in our JavaScript files. JSX is not mandatory or neccessary to write markup in your React application but it is definitely a more convenient and accessible way. Consider the difference below in using the `createElement` method, which is what JSX is under the hood. `React.createElement` creates one instance of a component by passing the first argument a string of the element tag, the second argument as an empty object to pass in optional attributes, and lastly the inner tags you would like to render. + +Using `React.createElement`: + +```jsx +const Hero = () => { + return React.createElement( + "div", + {}, + React.createElement("h1", {}, "My portfolio") + ); +}; +``` + +Using JSX: +```jsx +const Hero = () => { + return ( +
+

My portfolio

+
+ ); +} +``` + +Essentially, JSX translate the HTML tags into `React.createElement` calls. Note that `className` attribute key is used instead of `class`, as `class` is a reserved keyword in JavaScript. JavaScript expressions can also be written inside JSX. For instance, the code below shows a variable or prop passed in. We will dive more into props later in the lesson. In the JSX, you would then output the prop's value inside curly braces. When the component renders, the name's value will output onto the DOM. + +```jsx +const Hero = ({ name }) => { + return ( +
+

My name is {name} and this is my portfolio!

+
+ ); +} + +export default Hero; +``` + +## 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. + +```jsx +const Hero = () => { + return ( +
+ // ... +
+ ); +} + +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. + +## Props + +We briefly touched on props in our examples above. In this section, we'll go into more details of how to use props and how to use an alternative to props if you plan on passing data around your application. + +### 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: + +```jsx +const Hero = ({ name }) => { + return ( +
+

My name is {name} and this is my portfolio!

+
+ ); +} + +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. + +Let's now have a look at our `App.js` with some markup edits and adding of a data layer: + +```jsx +import { heroData } from './mock/data'; +import Hero from './components/Hero'; + +function App() { + return ( +
+ +
+ ); +} + +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`. + +```jsx +const Hero = ({ heroData }) => { + return ( +
+

My name is {heroData.name} and this is my portfolio!

+
+ ); +} + +export default Hero; +``` + +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 suchs as a Content Management System or even from markdown. + +### Creating a data source + +install nanoid + +## Context and hooks + +useContext + +## Hooks + +## Credits +Written with ♥️ by [Jaeriah Tay](https://www.twitter.com/jaeriahtay) + + + diff --git a/8-react/2-components-state-props/README.md b/8-react/2-components-state-props/README.md deleted file mode 100644 index 44b20d13..00000000 --- a/8-react/2-components-state-props/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# Build out your site: Components, State, Props & JSX - -### Introduction - -We will be continuing on from the previous lesson where you set up your React project with Tailwind, a CSS utility-first library. This lesson will go over the core fundamentals of what makes React a modern library to build user interfaces using small composable pieces of code. We will be using 'components' to isolate blocks and elements of the project according to React's best code practice. What makes React a library instead of a framework is because of its flexibility, efficiency, and declarativeness and as developers we have the freedom to make architectural decisions that makes sense for our projects. - -In this section, we'll start by laying out the foundations to create your very own customizable single page application portfolio in React. We will build out composable components, use state and props to pass data around, and learn how to use JSX to render our templates in our portfolio application. - -## JSX: JavaScript and XML - -To refresh our memory in the last lesson, we edited the paragraph and anchor elements in a syntax that looks exactly like HTML. In fact, it is not HTML and is actually a markup language called JSX, which stands for JavaScript XML. Using JSX, we can write code that looks like HTML in our JavaScript files. JSX is not mandatory or neccessary to write markup in your React application but it is definitely a more convenient and accessible way. Consider the difference below in using the `createElement` method, which is what JSX is under the hood. `React.createElement` creates one instance of a component by passing the first argument a string of the element tag, the second argument as an empty object to pass in optional attributes, and lastly the inner tags you would like to render. - -Using `React.createElement`: - -```jsx -const Hero = () => { - return React.createElement( - "div", - {}, - React.createElement("h1", {}, "My portfolio") - ); -}; -``` - -Using JSX: -```jsx -function Hero() { - return ( -
-

My portfolio

-
- ); -} - -export default App; -``` - - -## Components - -What are 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. - -```jsx -function Hero() { - return ( -
- // ... -
- ); -} - -export default App; -``` - -We will go into more details as we build out more components in the project. - -Now that we've walked through the starting structure in a React application, this is where the real fun begins. As you know we will be building a real-world e-commerce application sourcing data from an API data source. In order to do that, we will need to install a package dependency. So let's get right to it! - -## State and props - -## Credits -Written with ♥️ by [Jaeriah Tay](https://www.twitter.com/jaeriahtay) - - -