ReactJS is an open-source Javascript library to build Frontend applications. Although It is indeed very simple and easy to understand, sometimes we may feel overwhelmed when first jumping in to learn something new. Using the right knowledge with the right technology would pump you to start your React Journey 🎆.
In this article, I’ve jotted down a step-by-step guide to start a react application for your next project. Please feel free to share your thoughts or ask any question/ issues you get along the way.
Let's get started :)
1-Prerequisites
NodeJS - React recommends installing Node >= 14 on your local machine
NPM/ YARN - Package manager. I recommend npm
create-react-app - Install the package globally, and make sure you have the latest version.
Using npm
npm install -g create-react-app
2- Creating the Project
The exciting part is here, let’s bootstrap our react project. To create a new react application, we’re going to use create-react-app. You can use npm or yarn to generate the project. I’ll be using npx;
npx create-react-app cfh-app
It might take a couple of minutes to install and generate the files This will produce a bootstrapped react application with a basic structure.
Using Templates in React
If you’re looking to create a react project with a template, use the following command;
npx create-react-app cfh-app --template [template-name]
In ReactJS documentation they have mentioned two templates by default:
Community templates available; "cra-template-*" on npm.
Using Typescript
npx create-react-app cfh-app --template -typescipt
Project Naming conventions to consider
-No capital letters
-Special characters should be URL-friendly
3- Project Structure
Let’s take a quick look at the project structure which we just bootstrapped.
cfh-app
├ node_modules
├ package.json
├ .gitignore
├ public
└ src
├ App.css
├ App.js
├ App.test.js
├ index.css
├ index.js
Src Folder
The src project contains our react code. It has an index.js file that renders content in DOM and we can browse all our changes in the browser.
Public folder
Public folder is used to store static resources, like images, fonts, logos etc.
Package.json
It contains our app’s packages and dependencies, along with the project name and version.
README .md
It is a markdown file that by default contains an overview of react application, and helpful information to play around with the project including build, and test commands.
A new GitHub repo is initialized in our project’s directory. You can observe .gitignore as well. You can create a remote repository and commit your changes.
4-Running the project
Last but not least let’s run the project. We'll use the same package manager that we used to build the project.
Using Yarn
yarn start
Using Npm
npm start
A new tab will open http://localhost:3000/ with our react project. Yay!!!
Now you can play around with react and change the code in the App. jsx and the change will be auto-rendered as soon as you save your changes.
If you want to build a react project from scratch, do check out this amazing article; https://medium.com/edonec/how-to-create-a-react-app-without-create-react-app-aa0b5adba4cd
Happy Hacking Codingfreakhead!