Probably the easiest way to get started with React is to use an online editor like codesandbox.io or repl.it.

If you'd rather develop locally, Create React App is a great choice.

For me, I like to practice with the same tools I use at work, so I need more customization than what Create React App provides by default. That's why I created this starter template project.

We'll be using React, Parcel, Jest, Babel, Yarn, ESLint, AirBnb Style Guide, Node Version Manager, and Enzyme.

Project Setup

Create an empty directory for your project. I'll call mine react-template

mkdir react-template

Enter the project directory

cd react-template

Install Node Version Manager (If you're having problems, check the troubleshooting section on the NVM GitHub)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Install the current LTS version of node

nvm install --lts

Use the current LTS version of node

nvm use --lts

Generate a .nvmrc file with the currently used node version

node -v > .nvmrc

Automatically switch to the correct version of node by adding this to $HOME/.bashrc

cdnvm() {
    cd "$@";
    nvm_path=$(nvm_find_up .nvmrc | tr -d '\n')

    # If there are no .nvmrc file, use the default nvm version
    if [[ ! $nvm_path = *[^[:space:]]* ]]; then

        declare default_version;
        default_version=$(nvm version default);

        # If there is no default version, set it to `node`
        # This will use the latest version on your machine
        if [[ $default_version == "N/A" ]]; then
            nvm alias default node;
            default_version=$(nvm version default);
        fi

        # If the current version is not the default version, set it to use the default version
        if [[ $(nvm current) != "$default_version" ]]; then
            nvm use default;
        fi

        elif [[ -s $nvm_path/.nvmrc && -r $nvm_path/.nvmrc ]]; then
        declare nvm_version
        nvm_version=$(<"$nvm_path"/.nvmrc)

        declare locally_resolved_nvm_version
        # `nvm ls` will check all locally-available versions
        # If there are multiple matching versions, take the latest one
        # Remove the `->` and `*` characters and spaces
        # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
        locally_resolved_nvm_version=$(nvm ls --no-colors "$nvm_version" | tail -1 | tr -d '\->*' | tr -d '[:space:]')

        # If it is not already installed, install it
        # `nvm install` will implicitly use the newly-installed version
        if [[ "$locally_resolved_nvm_version" == "N/A" ]]; then
            nvm install "$nvm_version";
        elif [[ $(nvm current) != "$locally_resolved_nvm_version" ]]; then
            nvm use "$nvm_version";
        fi
    fi
}
alias cd='cdnvm'
cd $PWD

Initialize Git

git init

Install Yarn if you don't already have Yarn.

npm install --global yarn

Initialize the package manager

yarn init -y

Find the node and yarn versions

node -v
yarn -v

Specify your engines in package.json

{
// other configurations
  "engines": {
    "node": "^14.16.0",
    "yarn": "^1.22.5"
  }
// other configurations
}

Add React

yarn add react
yarn add react-dom

Add Parcel

yarn add -D parcel@next

Create Required Files

Create a source directory

mkdir src

Create an index.jsx file.

touch src/index.jsx

Add this code to index.jsx

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.querySelector('#root'));

Create an index.html file

touch src/index.html

Add this code to index.html.

<html lang="en">
<body>
<div id="root"></div>
<script src="./index.jsx"></script>
</body>
</html>

Create App.jsx

touch src/App.jsx

Add this code to App.jsx

import React from 'react';

const App = () => {
  return (
    <div>
      Hello!!!
    </div>
  );
};

export default App;

Run the Application

Add a start script to package.json

{
// other configurations
  "scripts": {
    "start": "parcel serve ./src/index.html"
  }
// other configurations
}

Run the application

yarn start

Open localhost:1234 in your browser. You should see Hello!!!.

Conclusion

This is the bare minimum to get a React application working with Parcel.

React Starter Template - Part 2 where we'll setup linting and testing.

React Starter Template - Part 1

Project Setup

Create Required Files

Run the Application

Conclusion