React

Install

This component was made by Stratis Dermanoutsos. The code can be found here.

Create React project

This component was made by Stratis Dermanoutsos. The code can be found here.

Basic Scripts

  • Start the development server

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Bundle the app into static files for production

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Start the test runner

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Remove this tool and copy build dependencies, configuration files and scripts into the app directory

    This component was made by Stratis Dermanoutsos. The code can be found here.

    Once you run this, there is no turning back!

JSX

JSX is a syntax extension for JavaScript. It was written to be used by React and looks a lot like HTML. Given JSX is not valid JavaScript, web browsers can’t read it directly.

JSX is an inline markup that looks like HTML and gets transformed to JavaScript. A JSX expression starts with an HTML-like open tag, and ends with the corresponding closing tag. JSX tags support the XML self close syntax so you can optionally leave the closing tag off.

For example,

This component was made by Stratis Dermanoutsos. The code can be found here.

Components

Components is the heart of React. Their job is only 1: Break UIs into small chunks.

They can be either a function or an ES6 class.

Function components

This component was made by Stratis Dermanoutsos. The code can be found here.

How to use?

This component was made by Stratis Dermanoutsos. The code can be found here.

Class components

This component was made by Stratis Dermanoutsos. The code can be found here.

How to use?

This component was made by Stratis Dermanoutsos. The code can be found here.

Component Instance

This component was made by Stratis Dermanoutsos. The code can be found here.

Element

This component was made by Stratis Dermanoutsos. The code can be found here.

Hooks

UI components are often dynamic.

Developers had to build and use classes to use certain React’s features. While classes are still there, hooks are a more ergonomic option.

Hooks enable the developer to re-use stateful logic. Without them, it is easy, and sometimes even necessary, to wrap components inside components and repeat this process a lot of time, eventually getting lost.

Basically, hooks are functions that generally start with the word ‘use’.

Only call them at the top level of a function!

  • useState()

    Its purpose is to handle reactive data. Any data that changes is called state. So, when there is a change in the state, React re-renders the UI to display those changes.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • useEffect()

    It exists to handle the lifecycle of a component.

    The code bellow runs every time a state is changed.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    Example case

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • useContext()

    It allows the developer to work with React’s context API. In other words, share data without passing props.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    In the code above, when the mood value changes inside parent, it changes in the ‘MoodEmoji’ component too.

    The useContext() hook is a cleaner version of a ‘Consumer’ component.

  • useRef()

    It’s used to grab a value that changes but does not re-render the UI.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    In the code above, the value of ‘count’ changes but the displayed value stays the same.

    A more common use is to grab HTML elements from JSX.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • useReducer()

    It is basically a different way to manage state

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • useMemo()

    It is used to optimize computation cost for improved performance.

    It is only recommended for expensive calculations.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • useId()

    It is a new hook introduced with React 18 and it is used for generating unique IDs on both the client and server.

    This component was made by Stratis Dermanoutsos. The code can be found here.

There are more hooks, but I kept it simple and focused to the common ones.

Images

This component was made by Stratis Dermanoutsos. The code can be found here.

Import styles from CSS

  • The CSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • The Component

    This component was made by Stratis Dermanoutsos. The code can be found here.

Make your life easier

Object of React Components

This will serve as a simple library of components. They can be defined inside a single file, let’s say Timeline.js.

This component was made by Stratis Dermanoutsos. The code can be found here.

Now, to call them, simply do

This component was made by Stratis Dermanoutsos. The code can be found here.

Short import paths

This is a very common problem when working with React:

import module from '../../models/car';

It’d be much better looking if it was something like:

import module from 'models/car';

To achieve this, simple add the following line inside the compilerOptions in your jsconfig.json or tsconfig.json. (depending on whether you use JavaScript or TypeScript respectively)

'baseUrl': 'src',

It will look something like this:

This component was made by Stratis Dermanoutsos. The code can be found here.

Suspend Layout

The new <Suspense> tag enables you to render another component while your data is being fetched, without the need of a ternary operator (? :) or anything like that.

This component was made by Stratis Dermanoutsos. The code can be found here.

Avoid inline function calls

Let’s say you need a button that writes "Hello world!" in the console. You could do it in an inline style:

This component was made by Stratis Dermanoutsos. The code can be found here.

or by using a predefined method:

This component was made by Stratis Dermanoutsos. The code can be found here.

While the inline method can be useful in reducing the lines of code in your file, it greatly reduces readability and makes your program difficult to maintain if used frequently. By defining a method before using it in your JSX, you can write longer functions and still keep them readable.

Deploy to production

Apache

To deploy a React project to apache, there are several steps that must be taken. These steps with ensure that the endpoint will work for all routes and apache won’t throw 404s for not finding a directory.

  1. Go to your package.json and paste the following:

    "homepage": ".",

  2. Inside the <head> tag of your index.html file, paste:

    <script type="text/javascript"> document.write("<base href='//" + document.location.host + "/' />"); </script>

    Note that, after the document.location.host, you may need to paste the name of the directory your application will be deployed in. This is a necessity if your server handles multiple endpoints. To do that:

    <script type="text/javascript"> document.write("<base href='//" + document.location.host + "/{path}/' />"); </script>

    and replace the {path} with the directory’s path.

  3. Inside the App.js or index.js, depending on where you’ve declared the <BrowserRouter>, you’ll have to provide the {path} you set in the previous step as basename. To do that, change <BrowserRouter> into <BrowserRouter basename='{path}'> replacing it like before.

  4. Inside the project’s public/ directory, create a file called .htaccess and paste:

    Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

  5. Build & deploy

    This component was made by Stratis Dermanoutsos. The code can be found here.

    and paste the generated files inside your Apache directory.

Resources