What is React?!!

React is your UI building buddy, crafting dynamic web interfaces with reusable components. It keeps things efficient by only updating what's changed, making your apps smooth and fast. Declarative and flexible, it's a popular choice for building modern, interactive web experiences. ✨

How to get started...

1. Node js (LTS version)

   

   To checkout whether node is installed on your machine
   - Open your terminal and type "node -v"(If it shows some version like this photo it means node is succesfully installed on your device!)

   

1. A code editor (preferably VS Code because I will be following that in this tutorial and upcoming ones).

   

2. Create a new folder and open it in vscode

   

3. Open the terminal in vs code by pressing " ctrl + ` "

   

4. We can setup our react project using two ways :
   -Using Vite (more efficient and quicker way)
   -Using Create-React-App (old way of creating react apps)

   I) Using Vite (Bundler)
   - npm create vite@latest
   - give project name (01vitereact)
   - select the framework (React)
   - select the language (JavaScript)
   - After the files are configured and loaded
   - Go into the project folder by pressing cd foldername (cd 01vitereact)
   - Install the node modules explicitly by typing' npm install 'or' npm i'
   - To run the project type ' npm run dev ' this runs the dev script command which is present in the package.json file

Sorry for the look its just the css issue..

This is the dev script which helps in igniting the project!!

II) Using Create-React-App template
- npx create-react-app 01basicreact
- Go into your project directory ( cd 01basicreact )
- Here node modules are already installed with the template command(so no need to install node modules explicitly)
- To run the project type' npm run start ' or ' npm start '

It takes a lot of time to setup react app using CRA!!

This is the start script which helps in igniting the app!!

1. Bonus :
   Let's see how we can deploy these projects (I will be using netlify)
   - In this tutorial we have used both CRA and Vite for setting up the project, so I will show you how to deploy them each on netlify drop

   

- For project built using Vite : - In the 01vitereact directory run the command ' npm run build '

- You will get a 'dist' folder that will be served to end users when the website is deployed so drop this dist folder on netlify drop

Here's the website where it is deployed

URL :
Vite App

- For project built using CRA : - In the 01basicreact directory run the command ' npm run build '

- You will get a 'build' folder that will be served to end users when the website is deployed so drop this build folder on netlify drop

Here's the website where it is deployed

URL :
CRA APP

Additional Resources :
React -> Official React Documentation
React Guide
-> If you want to brush up your js fundamentals and basic react !
Vite ->Official Vite Documentation
CRA-> Official CRA Documentation

If you found this post helpful then make sure to follow for more ...