From 00cd92a74f70e71e7bc0dfca48286419e29b7246 Mon Sep 17 00:00:00 2001 From: Jaeriah Tay Date: Wed, 24 Mar 2021 18:16:49 -0700 Subject: [PATCH] add react 1 scaffold setup --- 8-react/1-scaffold-site/README.md | 221 ++++++++++++++++++++++++++++++ 1 file changed, 221 insertions(+) diff --git a/8-react/1-scaffold-site/README.md b/8-react/1-scaffold-site/README.md index e69de29b..df82f666 100644 --- a/8-react/1-scaffold-site/README.md +++ b/8-react/1-scaffold-site/README.md @@ -0,0 +1,221 @@ +# Scaffold a React.js app: Introduction to React.js; JSX, Scaffold your site +### Introduction + +In the previous web application projects, we learned how to build fully functional applications that runs directly in the browser using static HTML, CSS, and JavaScript. In this next chapter, we'll be using React, a declarative, efficient, and flexible JavaScript library for building modern user interfaces and web applications. It is a very popular choice when building a SPA, Single Page Application. Frameworks and libraries are commonly used in modern web applications because of the ease of starting a new project. A scaffolded project normally would have configurations, toolings and dependencies already set up and installed for you. We will be taking a practical approach by builidng a project to learn React as a frontend library and will also be linking resources such as the React documentation, for further reading. Throughtout the chapter, we will introduce concepts such as JSX, components, props, state, and lifecycle. + +In this lesson, we're going to lay out the foundations to create your very own customizable single page application portfolio in React. This lesson is the first of three lessons in the React chapter where we will first scaffold the React project, install necessary tooling and libraries, one of which is TailwindCSS, a CSS utility library and build out the structure of the porfolio. + +### Prerequisites + +As this is the last chapter of the curriculum, prerequisites are all the chapters leading up to this React chapter. + +- Basic familiarity with HTML & CSS. +- Basic knowledge of JavaScript and programming. +- Basic understanding of the DOM. +### Preparations + +You need a local web server to test the web app we'll build in this lesson. If don't have one, you will need to install [Node.js](https://nodejs.org). + +- 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. + +## Project Setup + +### Install React + +First, we're going to boostrap the React project by installing it from our Terminal. React has a handy command `create-react-app` to run whereby it will bootsrap a starter project with all the necessary dependencies installed. You can read more about Create React App [here](https://github.com/facebook/create-react-app) Open your preferred terminal and run: + +```bash +npx create-react-app portfolio + +# OR + +npm init react-app my-app + +# OR + +yarn create react-app portfolio +``` + +The first couple of keys runs and installs React and the `portfolio` is the name of your directory. It can be anything you decide to name it, but for simplicity sake let's call it `portfolio`. [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+ and higher. Running one of the above commands will create a directory called `portfolio` inside the current folder (usually your home directory). + + +Once the installation is done, change directory into your project folder and open the project up in your code editor. + +```bash +cd portfolio +``` +### React project structure + +Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +portfolio +├── README.md +├── node_modules +├── package.json +├── .gitignore +├── public +│ ├── favicon.ico +│ ├── index.html +│ └── manifest.json +└── src + ├── App.css + ├── App.js + ├── App.test.js + ├── index.css + ├── index.js + ├── logo.svg + └── serviceWorker.js + └── setupTests.js +``` + +The public folder contains our assets, html static files and custom client side javascript files. package.json is used by npm (Node package manager) to save all the packages needed to deploy our app, but we don't have to worry about this because CodeSandbox installs and updates this file for us. + +In our public folder, we have a standard html file called index.html. This is our point of entry file where we have our root element, which is named by convention. If you scroll down to line 30 in the body element, you will see
. This is the root element where we will be injecting our application. + +The src folder contains all our React code and houses our index.js, app.js and later on our components when we start to create them. In index.js, you will see something like this: + +```js +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + + +ReactDOM.render( + + + , + document.getElementById('root') +); +``` + +Here we import the React library and we use the ReactDOM render() method in order to print the contents of our App component into the root div in our index.html that we specified above. Our main app component App.js has to be imported as well to be included in the render. The App.js component is passed in as the first argument in the render function and the rootElement as the second argument. That will tell React to render the app component and transform it into an element using the React.createElement method at build time to the index page. We will be stripping out all the scaffolded code in the component App.js and rebuilding it later on. + +```js +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); +} + +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. + +### Install TailwindCSS + +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: + +```bash +npm i tailwindcss autoprefixer postcss-cli + +# OR + +yarn add tailwindcss autoprefixer postcss-cli. +``` + +More details on [here](https://tailwindcss.com/docs/installation). + +Now, we need to generate the configuration for tailwind which will create a minimal `tailwind.config.js` file at the root of your project: + +```bash +npx tailwind init + +# OR +npx tailwind init --full # with all default configuration + +touch postcss.config.js +``` + +After running the above commands, the `tailwind.config.js` file is created which contains all our default configuration. Next we need to install [CRACO (Create React App Configuration Override)](https://github.com/gsoft-inc/craco), an easy and comprehensible configuration layer for create-react-app, because Create React App doesn't let you override the PostCSS configuration natively. + +```bash +npm install @craco/craco + +# OR + +yarn add @craco/craco +``` + +When the installation is complete, update your scripts in your `package.json` file to use `craco` instead of `react-scripts` for all scripts except eject: + +```diff +"scripts": { +- "start": "react-scripts start", +- "build": "react-scripts build", +- "test": "react-scripts test", ++ "start": "craco start", ++ "build": "craco build", ++ "test": "craco test", +"eject": "react-scripts eject" +}, +``` + +Now, create a `craco.config.js` at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins: + +```bash +touch craco.config.js +``` + +```js +// craco.config.js +module.exports = { + style: { + postcss: { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ], + }, + }, +} +``` + +Because Tailwind is a library with default utility classes, CSS will be need to compiled for production. It is good practive to purge your project of unused styles in production builds so that load time is faster In your tailwind.config.js file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds: + +```diff +// tailwind.config.js +module.exports = { +- purge: [], ++ purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], +darkMode: false, // or 'media' or 'class' +theme: { +extend: {}, +}, +variants: { +extend: {}, +}, +plugins: [], +} +``` + +### Task + + +--- + +## Credits +Written with ♥️ by [Jaeriah Tay](https://www.twitter.com/jaeriahtay) \ No newline at end of file