Introduction to React
If you don't know the difference between a framework and a library, then check out this article.
Tools needed before installing ReactJS 🛠
You need to have the following things installed before you start creating a React Application.
- NodeJS - Download the latest version of NodeJS
- A code editor like Visual Studio Code
- A Chrome extension - React Dev Tools
I recommend you to be in Chrome while you're working with React for better experiences.
Creating Our First React App 👩💻
Let's create a React app using the following steps:
- Open up a folder in your terminal.
npx create-react-app my-appin your terminal and hit Enter. This will take some time to install React and some other packages and dependencies to make your app ready.
- Go inside the folder by typing
cd my-appin your terminal.
- Now use
npm startin your terminal to see your app running locally at http://localhost:3000/ You'll see the following image when your app runs locally on your computer.
Understanding the file structure 📂
You might get scared of watching the huge codebase i.e., the files and folders after you have created your React app. Some people might run like this shutting down their computers.
But no need to worry because I'm here to help you. Open up the folder called my-app in Visual Studio Code. You'll see the folders somewhat like this.
Now, here forget about the node modules folder as it only contains the packages and dependencies needed to make our ReactJS application. It got installed when we run our first command
npx create-react-app my-app. So, we'll not be dealing with that folder, just keep it as it is.
Then comes the public folder. It contains some images and other files along with the
index.html. Now here we only have to focus on our
index.html file and others are not needed currently. The
index.html file will contain the following:
Here the root is used in
index.js file which is inside the src folder to render the pages locally on localhost.
⚠One important thing is that do not keep any secrets or credentials inside this folder as it will be leaked since it's a public folder.
Next comes the
index.js file you can see the way they're creating ReactDOM and elements and rendering web pages. Then there are 2 stylesheets -
App.css which are used for styling the pages. The main styling lies under
App.css for which you can visualize the beautiful web page running locally on your localhost. Now, let's see the
Understanding JSX 🔎
App.js file inside the src folder. It looks like this:
The highlighted part is known as JSX.
Points to remember while using JSX:
- In place of "for" you have to use "htmlFor"
- JSX fragment feature: With return() we can return only one tag or Element. If you want to return two elements using JSX, then you have to use the JSX Fragment Feature or cover the whole content inside one element. For example, if we want to return the content of an H1 tag and Div tag together we will be using a JSX fragment ( <>.....</>).
You can learn more about JSX from here.
React is a very popular framework in today's world and also very demanding in getting jobs.
Some resources to learn ReactJS
- React documentation
- CodeWithHarry ReactJS playlist
- Reactjs - Learn React, Practically
- React-Play - It's an open source project you can contribute to made by @atapas
- Complete React Course by freecodecamp
So, this was all about getting started with ReactJS. I hope you have understood. Feel free to give your feedback or ask questions in the comments section.
Hope this helps you. Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my YouTube Channel and connect on LinkedIn or Twitter.
Also, feel free to support my work.😊
Top comments (1)
Thanks a lot for mentioning ReactPlay 🤩