DEV Community

lifeascoder
lifeascoder

Posted on

Make your first React JS project by this post. Learn to code#2

Hey there, I am back with an awesome post and This post helps you make your first React JS project. IN this post, Don't skip a word. Read it all carefully.

                 **DEPENDENCIES**
Enter fullscreen mode Exit fullscreen mode

For the dependencies, You need to install Node.js in your PC/Laptop. To install Node.js, Go to. Then Install it. If you want more help then Look for it in the internet. _IMPORTANT - Always install the latest LTS version so that our whole this matches. _ If you want more detailed content, I will put a video of how to install it.

WINDOWS -
LINUX -
MAC OS -

Image description

              **MAKING OUR FIRST PROJECT**
Enter fullscreen mode Exit fullscreen mode

After that, Go to your ( TERMINAL IN LINUX AND MAC OS, CMD IN WINDOWS ). Then type npx create-react-app and then type your websites name.
For example -
npx create-react-app MyFirstWebsite.

All done. Now your project has been made. Now all you have to do is run the website. But HOW?!?

            **RUNNING OUR WEBSITE**
Enter fullscreen mode Exit fullscreen mode

To run our website, Go to terminal or open terminal in our React folder. Then type npm start or yarn start to run the website. It will open your website in your default browser.

           **KNOWING THE FILES**
Enter fullscreen mode Exit fullscreen mode

The first thing you will see will be node modules. It has the... the... How will I say it? It have all basic things for our Javascript to run and things like that.

IMAGE -
Image description

Then is Public folder where our HTML file and our images, SVG stores.

IMAGE -
Image description

Src folder has our JavaScript files and our main coding will be done there. You can see through all the files and open it in your Text Editor. We can add our images in there also. We use images from that folder only. In the Public folder, The files will be used by the HTML file.

Image description

Then package.json and package-lock.json. Npm has lots of packages that people want to use over and over again. package.json provides a simple way for people to keep track of packages they use in their application.

That's all. Enjoy learning it. Signing Out!!!

Top comments (0)